Markdownのコード

Markdownには、何かをコードとして印す方法が2つあります。文の中の数語をバッククォートで挟む方法と、それより長いものをフェンスで囲む方法です。ブロックの形は言語名も持てて、それがプレビューでも書き出しでもGitHubでもシンタックスハイライトを効かせます。

まず `npm install` を実行し、そのあと `vite.config.js` を編集します。

```js
function greet(name) {
  return `こんにちは、${name}`
}
```

    半角スペース4つの字下げでも
    コードブロックになります。

function greet(name) {
  return `こんにちは、${name}`
}

半角スペース4つの字下げでも
コードブロックになります。

インラインコード

バッククォート1つで挟みます。ファイル名、コマンド、関数名、キー、値。読む人が打つか写すかもしれないものに使ってください。

コードの範囲の中では、Markdownは解釈をやめます。*斜体にならない* はアスタリスクのまま残ります。おかげでインラインコードは、エスケープせずに記法を見せるいちばん簡単な方法になります。

フェンス付きコードブロック

バッククォート3つだけの行、コード、閉じるバッククォート3つ。言語は開くフェンスのすぐ後ろに書きます。

```python
def greet(name):
    return f"こんにちは、{name}"
```

def greet(name):
    return f"こんにちは、{name}"

ハイライタが読むのはこの言語名です。よく使うのは js、ts、python、bash、json、yaml、html、css、sql、swift、go、rust、diff。知らない名前を書いても害はなく、色の付かないブロックになるだけです。

言語を省いてもコードブロックにはなります。色が付かないだけです。それでも書いてください。4文字で、長いブロックが読めるようになります。

チルダでも書けます

~~~ はバッククォートとまったく同じようにフェンスを開き、閉じます。

~~~sql
SELECT * FROM documents WHERE pinned = 1;
~~~

見せたいコード自体がバッククォート3つを含むときに便利です。

バッククォートを見せる

インラインコードの中でバッククォートを見せるには、中身が使っている数より多いバッククォートで囲み、両端に空白をひとつずつ置きます。

インラインコードには `` ` `` を使います。

バッククォートを含む範囲には ``` `` ``` を使います。

同じ考え方はブロックにも効きます。バッククォート3つのフェンスを見せたいなら、4つで囲みます。このページの例はすべてそう書かれています。

空白4つの形式

ブロック全体を半角スペース4つ下げても、コードになります。2004年の元の記法で、いまもどこでも動きますが、実害のある欠点が2つあります。言語を持てないことと、読みやすさのために字下げしたつもりがうっかり発動してしまうことです。

ほぼどの場面でもフェンスのほうが優れています。字下げがまだ勝つのはリスト項目の中で、そこでは組み合わせ方が読みやすく安定します。

diffブロック

言語に diff を指定すると赤と緑の行になり、変更を示すいちばん明快な方法になります。

```diff
- const md = new MarkdownIt({ html: true })
+ const md = new MarkdownIt({ html: false })
```

- const md = new MarkdownIt({ html: true })
+ const md = new MarkdownIt({ html: false })

よくある間違い

フェンスを閉じ忘れる。 開いたフェンスから先が、文書の終わりまで全部コードになります。ページが急に等幅になったら、これが理由です。

言語名に空白が入っている。 ```java script はJavaScriptではありません。言語として読まれるのは最初の1語だけです。

リストの中でフェンスの字下げが合っていない。 リスト項目の中のフェンス付きブロックは、項目のテキストの位置に合わせて下げないと、リストがそのフェンスで終わってしまいます。

強調のつもりでインラインコードを使う。 バッククォートは「これはコードだ」であって「これは重要だ」ではありません。強調には **太字** を使ってください。スクリーンリーダーも検索エンジンも、両者を別のものとして扱います。

よくある質問

コードブロックを入れるには？

バッククォート3つだけの行を置き、その下にコードを書き、閉じるバッククォート3つを置きます。シンタックスハイライトが欲しいときは、開くフェンスのすぐ後ろに言語名を足します（```python）。

バッククォートそのものを見せるには？

中身が含む数より多いバッククォートで範囲を囲み、両端に空白を入れます。 ` でバッククォート1つが出ます。フェンス付きブロック全体なら、3つではなく4つで開いて閉じてください。

シンタックスハイライトで使える言語は？

処理系の後ろにいるハイライタ次第ですが、よく使う名前（js、python、bash、json、html、css、sql、swift、go、rust、yaml、diff）はほぼどこでも通ります。認識されない名前は、色が付かないだけです。

フェンスと字下げのコードブロックの違いは？

フェンスは ``` か ~~~ で区切られ、言語名を持てます。字下げのブロックは半角スペース4つ下げた行の集まりで、言語名を持てません。フェンスのほうが明快で、いまどきの文書はそちらを使いますが、リスト項目の中では字下げのほうが安定して組み合わさります。

ページ全体がコードになってしまうのはなぜですか？

閉じていないフェンスがあります。相方のいない ``` を探してください。そこから先は、ファイルの終わりまでコードとして扱われます。