Blog

記事の書き方

このブログに記事を追加する手順と本文で使える構文をまとめます。

公開

表示の確認も兼ねて、このブログに記事を追加する手順と本文で使える構文をまとめます。

記事の追加

記事は app/routes/blog/(content) に 1 記事 1 ファイルで置きます。ファイルの名前からスラッグが決まり、例えば writing-guide.mdx なら /blog/writing-guide で公開されます。

Markdown と MDX

記事は Markdown か MDX で書きます。JSX・ESM・JavaScript 式は MDX でだけ使えます。YAML フロントマターと GFM 構文は共通です。

Markdown で HTML タグを使うと、インライン要素は中身のテキストだけ残り、ブロック要素は中身のテキストごと消えます。

YAML フロントマター

記事のメタデータをファイルの冒頭に YAML フロントマターとして定義します。--- で囲んだ部分が YAML フロントマターです。

---
title: 記事の書き方
description: このブログに記事を追加する手順と本文で使える構文をまとめます。
published: "2026-09-13"
---
項目内容
title記事の題名。
description記事の概要。
published記事の公開日。YYYY-MM-DD 形式。
modified記事の更新日。省略可。YYYY-MM-DD 形式。published 以降の日付にします。

記事の確認

記事を書き終えたら、次の 3 つを実行します。

コマンド用途
pnpm dev表示の確認。
pnpm fmt記事の整形。
pnpm lint:text文章の校正。pnpm lint:text:fix で自動修正できます。

使える構文

本文で使える構文です。GitHub Flavored Markdown に準拠していますが、ちゃんとスタイルが適用されるのはここに挙げた構文だけです。それ以外はブラウザーのデフォルトスタイルが適用されます。

見出し

本文の見出しは ## から始めます。# は記事の題名で使うため、本文では使わないようにします。

## 見出しレベル 2

### 見出しレベル 3

#### 見出しレベル 4

##### 見出しレベル 5

###### 見出しレベル 6

太字

**太字**です。

太字です。

ブロック引用

> 引用文です。

引用文です。

コード

`インラインコード` です。

インラインコード です。

コードブロックは 3 つ以上のバッククォートのコードフェンスで囲みます。最初のコードフェンスに続けて言語を指定するとハイライトされます。対応している言語は Languages | Shiki で確認できます。

```scala
@main def hello(): Unit =
  val greeting: String = "こんにちは"
  println(greeting)
```
@main def hello(): Unit =
  val greeting: String = "こんにちは"
  println(greeting)

リンク

私の [個人サイト](https://kaisei-yoneyama.dev/personal-website/) です。

https://kaisei-yoneyama.dev/personal-website/

私の 個人サイト です。

https://kaisei-yoneyama.dev/personal-website/

サイト内リンクは /blog/ のように、サイトのルートを基準としたパスで書きます。

画像

画像は public に置きます。パスの書き方はリンクと同じです。

![ファビコン](/favicon.ico)

ファビコン

リスト

- 順序なしリスト
- 2 つ目の項目
  - ネストは半角スペース 2 つ

1. 順序付きリスト
2. 2 つ目の項目
   1. ネストは半角スペース 3 つ
  • 順序なしリスト
  • 2 つ目の項目
    • ネストは半角スペース 2 つ
  1. 順序付きリスト
  2. 2 つ目の項目
    1. ネストは半角スペース 3 つ

表

| 左揃え | 中央揃え | 右揃え |
| :----- | :------: | -----: |
| 左揃え | 中央揃え | 右揃え |
左揃え中央揃え右揃え
左揃え中央揃え右揃え

脚注

脚注です[^1]。

[^1]: 脚注の内容です。

脚注です1。

改行

1 行目です。\
2 行目です。

1 行目です。
2 行目です。

エスケープ

Markdown として解釈されることを避けるには、バックスラッシュでエスケープします。

\`ここはインラインコードになりません\`。

| 記号 | 名前             |
| :--: | :--------------- |
|  \|  | バーティカルバー |

`ここはインラインコードになりません`。

記号名前
|バーティカルバー

MDX

MDX では JSX・ESM・JavaScript 式が使えます。

export const builtAt = new Date().toLocaleString("ja-JP", { timeZone: "Asia/Tokyo" });

このページは {builtAt} に生成されました。

<figure>
  <blockquote>引用文です。</blockquote>
  <figcaption>引用元です。</figcaption>
</figure>

このページは 2026/10/9 0:29:27 に生成されました。

引用文です。
引用元です。

Footnotes

  1. 脚注の内容です。 ↩