Markdown コードブロック 改行の仕様と PDF 対応まとめ

フェンス付きコードブロック(バッククォート3つ)では改行がそのまま保持されます。言語タグ・長行のPDF対応・バッククォートのエスケープ・タブとスペース・セキュリティまで整理します。

この記事でわかること

Markdown の本文段落で話す「行末スペース2つ」などの改行記法とは別物であることが重要なポイントです。


Markdown の フェンス付きコードブロック(バッククォート3つ \``` で囲む)の中では、エディタ上で入力した改行がそのまま表示されるのが普通です。つまり「コードブロック内の改行」は、プレーンテキストとしての行区切りであり、本文段落で話す「行末スペース2つ」などの hard break 記法とは別物です。インデントや空行もソースどおりに反映されるため、意図した行数で読みやすいコードを書くことが重要になります。

基本:フェンスで囲む

開始行に 言語名(例: javascript)を付けると、多くのエディタでシンタックスハイライトが効きます。終了の \``` を忘れると、その下の本文まで全部コード扱いになることがあり、長文ドキュメントでは典型的な事故です。ブロックの直前後に空行を入れると、パーサによっては解釈が安定します(環境依存のため、プレビューで必ず確認してください)。

```javascript
function hello() {
  console.log("line1");
  console.log("line2");
}
```

上のように、ブロックの改行はすべて保持されます。

インデント付きコードブロックとの違い

行頭にスペース4つ以上でインデントコードブロックとする古い記法もありますが、リストや引用と解釈がぶつかりやすいため、現代のドキュメントでは フェンス(\```)方式が推奨されることが多いです。チームのスタイルガイドがあればそちらに合わせるのが安全です。

PDF や印刷での注意

1行が非常に長いコードは、HTML 上では横に伸び、PDF でははみ出す・小さなフォントで縮小されるなど、読みにくくなることがあります。ツールによっては pre / code折り返しや、コードブロック内での改ページを避けるオプションがあります。可能なら手元で行を分割し、意味のある位置(引数の区切り、演算子の前後など)で改行すると、紙や PDF でも追いやすくなります。ログの一行出力のようにどうしても長い1行だけは、横スクロール前提の画面閲覧に任せる判断もあります。

エスケープとバッククォート

コードブロック内で バッククォートを表示したい場合は、フェンスを 4つ以上にするなど、環境ごとのエスケープルールに従ってください。誤ったエスケープはフェンスの閉じを壊し、以降の Markdown 全体の表示を崩す原因になります。

タブとスペースの見え方

コードブロック内のインデントは、エディタ設定の タブ幅(2 / 4 / 8)によって見え方が変わります。チームで共有するなら、.editorconfig やプロジェクトのフォーマッタで スペースに統一するか、タブ幅を揃えると、レビュー時の「ずれている」指摘が減ります。コピー&ペーストで混入した 全角スペースは、コンパイルエラーの原因になりやすいので、該当行を疑う価値があります。

言語タグの付け方

言語名(```ts など)を付けるとハイライトが付きますが、存在しない言語名だと無色扱いになるだけの環境と、警告が出る環境があります。社内ドキュメントでは **「コピー用の完全なスニペット」「説明用に短くした抜粋」**を分け、後者は本文の箇条書きに回すと、コードブロックが肥大化するのを防げます。

セキュリティの注意

ログや設定ファイルの実際の秘密情報をそのまま貼らない運用を徹底してください。トークンやパスワードは プレースホルダに置き換え、必要なら別の安全なチャネルで共有します。コードブロックは検索しやすいため、誤って貼った秘密情報はキャッシュや検索インデックスに残りやすい点にも留意してください。

このサイトで

Markdown を PDF に では、レイアウトでコードブロックの途中で改ページしない設定が使えます。長いコードは意図して行を分割し、改ページまわりは 改ページの記事 と併せて調整するとよいです。


よくある質問(FAQ)

Q. コードブロック内の空行が消えてしまいます

多くのレンダラではコードブロック内の空行はそのまま保持されます。空行が消える場合は、フェンス(終了の \```)が正しく閉じられているか、または使用しているパーサの設定を確認してください。

Q. 長い1行をコードブロック内で折り返す方法はありますか?

Markdown 標準では折り返し記法はありません。ツール側のCSS設定(white-space: pre-wrap)で折り返せる場合があります。このサイトのレイアウト設定でコードの折り返しオプションを確認してください。

Q. コードブロックの中でバッククォートを3つ使いたいのですが

外側のフェンスを4つ以上のバッククォートで囲むことで、内側に3つのバッククォートを書けます。または ~~~(チルダ3つ)をフェンスとして使用する方法もあります(環境によって対応が異なります)。

Q. PDF でコードブロックがページをまたいでしまいます

レイアウト設定の「コードブロックの途中で改ページしない」オプションを有効にしてください。長いコードブロックは手動で分割するか、改ページ位置をドラッグで調整することをおすすめします。

Q. シンタックスハイライトが PDF に出ません

PDF はブラウザの印刷機能を使うため、背景のグラフィックを印刷する設定をオンにする必要があります。また、ブラウザによって対応が異なるため Google Chrome の使用を推奨します。

関連記事