・ 更新: Markdownの書き方

執筆・検証: MD Converter編集部

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

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

この記事でわかること

  • フェンス付きコードブロック（\```）の中での改行の扱い
  • 言語タグの付け方とシンタックスハイライト
  • 長い1行が 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 など）を付けるとハイライトが付きますが、存在しない言語名だと無色扱いになるだけの環境と、警告が出る環境があります。社内ドキュメントでは **「コピー用の完全なスニペット」と「説明用に短くした抜粋」**を分け、後者は本文の箇条書きに回すと、コードブロックが肥大化するのを防げます。

セキュリティの注意

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

PDFでコードを途中分割させない

印刷CSSでは、短いコードブロックにbreak-inside: avoidを指定すると途中分割を避けられます。1ページを超えるコードには適用せず、長い行は意図して分割してください。改ページまわりは改ページの記事と併せて調整します。

よくある質問（FAQ）

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

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

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

Markdown標準では折り返し記法はありません。出力側のCSSでwhite-space: pre-wrapを指定するとソフトラップできます。利用する変換器が印刷CSSやコード折り返し設定に対応しているか確認してください。折り返しに使うCSSプロパティの使い分けは改行まわりの CSS 入門で詳しく解説しています。

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

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

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

印刷CSSで短いコードブロックにbreak-inside: avoidを指定します。1ページを超えるコードは収まらないため、意味のまとまりで分割してください。変換器に同等の設定がある場合も、保存したPDFで余白と分割位置を確認します。

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

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

関連記事

PDFで表示を確認する

コードブロックの表示をPDFで確認する