PART 03 — コードブロックの書き方
インラインコードとシンタックスハイライト

言語名を指定し忘れて、色のつかないただの黒い文字のコードブロックを量産していた時期がありました。たった一言添えるだけで見やすさが段違いになると知って以来、必ず言語名を書くようにしています。

インラインコードの書き方

文章中で変数名やコマンド名、ファイル名などを強調したいときは、対象をバッククォート（`）1つで囲みます。

この関数は `greet()` という名前で、`name` という引数を1つ取ります。
設定ファイルは `config.yaml` に配置してください。

バッククォートで囲んだ部分だけ等幅フォントに変わり、背景色がついて地の文と区別されます。段落中に短いコード片を差し込みたいときに使う記法です。

コードブロックの基本（```言語名）

複数行にわたるコードを掲載する場合は、バッククォート3つ（```）で開始と終了を囲む「フェンス付きコードブロック」を使います。 開始のバッククォートの直後に言語名を書くと、その言語向けのシンタックスハイライトが適用されます。

```python
def greet(name):
    return f"Hello, {name}"

print(greet("Markdown"))
```

言語名の指定は省略も可能ですが、その場合は色分けされないプレーンテキストとして表示されます。

コマンドの実行結果やターミナル出力を貼り付ける場合は、```bashや```consoleのように実行環境に合わせた言語名を指定するのが定番です。 差分（diff）を示したいときは```diffを使うと、行頭に+や-を付けるだけで追加行・削除行が色分けされます。

```bash
$ npm install
$ npm run dev
```

```diff
- console.log("old")
+ console.log("new")
```

シンタックスハイライトの仕組み

シンタックスハイライトとは、コード中のキーワード・文字列・コメントなどを種類別に色分けして表示する機能です。 Markdown自体に色分けの機能があるわけではなく、プレビュー側（VS Codeのプレビューや、GitHubなどのレンダラー）が言語名をヒントにして色を割り当てています。

VS Codeの標準プレビューは、TextMate文法という仕組みをベースに色分けを行っており、Python・JavaScript・JSON・YAML・SQLなど主要な言語であればほぼ追加設定なしで正しくハイライトされます。 独自のドメイン特化言語（DSL）など対応言語にない場合は、近い構文の言語名（例えば設定ファイルならyamlやini）を代用しても実用上は問題ないことが多いです。

表示結果を確認する

実際にVS Codeのプレビューでは、インラインコードとコードブロックは次のように表示されます。

図1: インラインコード（上）とPythonコードブロック（下）のソース（左）とプレビュー表示（右）

コードブロックには言語名がタブのように表示され、def や return などのキーワードが色分けされているのが確認できます。 このプレビューでの見た目は、次のPARTで扱うMermaid記法でも同じ考え方で拡張されます。

コードブロックは「コード専用」ではない

フェンス付きコードブロックの言語指定欄には、実はプログラミング言語だけでなく「図の記述言語」を指定することもできます。 その代表例がMermaidです。```mermaidと書いてその中に専用の記法でノードや矢印を記述すると、対応した拡張機能がそれをフローチャートなどの図として描画します。

言い換えると、Markdownのコードブロックという1つの仕組みの上に、シンタックスハイライト（見た目を整える機能）とMermaid（内容を図として再構築する機能）という、性質の異なる2つの拡張が乗っている形です。 この関係性を理解しておくと、次のPARTでMermaidの記法を学ぶときにも「なぜコードブロックの中に書くのか」が腑に落ちやすくなります。

つまりMermaidは「特殊な言語名を指定したコードブロック」という、これまで説明してきた仕組みの延長線上にある機能です。次のPARTでは、このコードブロックの拡張的な使い方として、Mermaidによるフローチャートの描き方を具体的に解説します。