Markdown コードブロックの使い方：言語指定・長い行・ハイライトと画像出力

スライドや告知で小さなコード例をすぐ見せたい時は、コード画像が役立ちます。コピーできる原稿も添えましょう。単独のコードならコードから画像を開きます。周囲の解説が重要なら、Markdown 文書の中にフェンス付きコードブロックとして残します。

フェンスの役割を明確にする

フェンス付きブロックは、記号を通常の Markdown として解釈せず、コードとして表示します。開始フェンスを単独の行に置き、javascript などの言語識別子を付け、コードの最終行の後で閉じます。文中の短い識別子にはインラインのバッククォート、複数行にはブロックを使います。

次の Markdown 原稿はフェンス自体の書き方です。外側を4つのバッククォートにすることで、内側の3つのフェンスをそのまま見せています。

```javascript
console.log("Ready");
```

言語指定は、対応するレンダラーでハイライトの選択に使われます。コードの実行、依存関係の導入、動作の検証は行いません。色が不自然なら、プログラムを変更する前に言語指定とテーマを確認してください。

具体的なコードを書き出す

次の JavaScript をコード画像ツールに貼り、言語を JavaScript にしてプレビューします。3つの色名を保存し、状態を示す文字列を作る例です。製品の性能を測定するコードではありません。

const palette = ["cyan", "amber", "coral"];

function renderStatus(format) {
  return `${format}: ${palette.length} colors`;
}

console.log(renderStatus("PNG"));

色の配列、関数、コンソールへの出力呼び出しを含む JavaScript コード画像

関数が配列の長さを使う仕組みを説明する、チュートリアルの紹介やスライドに使えます。タイトルや説明文はプログラムの外に置き、実行するソースとの違いを明確にします。

文字を小さくする前に長い行を整理する

長い URL、深く入れ子になった式、横に広いオブジェクトは読みにくさの原因です。まず全文が必要か考えます。無関係な初期設定を省く場合は、残った断片で意味が通ることを確かめ、省略した旨を伝えます。

次にキャンバスを広げるか、構文を壊さない位置で整形します。カードに収めるために文字列の途中へ改行を入れてはいけません。横スクロールにも頼れません。静止画像では、撮影範囲の外にあるコードを表示できないからです。ダウンロード後に最長行と末尾の閉じ括弧を確認します。

説明とコードを一緒に届ける

最終的な表示サイズで、コメント、文字列、記号が読めるテーマを選びます。色だけで意味を伝えないようにしましょう。トークン、非公開 URL、個人情報は書き出す前に原稿から削除します。画像を後から切り取るだけでは、危険な原稿が残ります。

ソースを選択可能な本文で掲載するか、完全な例へリンクしてください。代替テキストは何を示すコードかを説明し、長い転記は周辺本文に置きます。ページ付き文書では改ページも確認します。画像の見栄えがよくても、PDF の配置まで保証されません。

コード画像を作成する。文書向けには PDF のコードハイライトを保つ手順、周囲の文章やリストには Markdown 実用ガイドを参照してください。