過去バージョン

pre の基本

function hello() {
    console.log("Hello, world!");
}

通常の HTML では連続する空白や改行が 1 個分にまとめられますが、

 内ではそのまま表示されます。ブラウザのデフォルトスタイルで等幅フォント（monospace）が使われます。


code との組合せ（推奨）


function add(a, b) {
  return a + b;
}




要素
意味
デフォルト挙動

整形済みテキスト（ブロック）
空白・改行保持 + 等幅
ソースコード（インライン）
等幅
プログラム出力
等幅
キーボード入力
等幅
変数名
斜体



HTML 特殊文字のエスケープ

 内でも HTML としては解釈されるため、< や & はエスケープが必要:




  Hello





<div class="card">
  Hello
</div>

Markdown のコードブロックは内部で自動エスケープしてくれます。手書きで HTML を書く場合は htmlspecialchars() 相当の処理を通します:

CSS white-space の挙動


値
空白
改行
折返し

normal
まとめる
無視
する
nowrap
まとめる
無視
しない
pre
保持
保持
しない（はみ出す）
pre-wrap
保持
保持
する
pre-line
まとめる
保持
する
break-spaces
保持
保持
する（空白でも折返し）



 要素のデフォルトは white-space: pre 相当。長い行ははみ出るため、表示制御が重要です。


横スクロール vs 折り返し
/* パターン A: 横スクロール（コード表示の定番） */
pre {
  overflow-x: auto;     /* はみ出たら横スクロールバー */
  white-space: pre;
}

/* パターン B: 折り返し（モバイルで読みやすい） */
pre {
  white-space: pre-wrap;
  word-break: break-word;
}

/* パターン C: ハイブリッド（モバイル時だけ折返し） */
@media (max-width: 600px) {
  pre {
    white-space: pre-wrap;
  }
}
スタイリングのお手本
pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 1em 1.2em;
  border-radius: 6px;
  overflow-x: auto;
  font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  margin: 1em 0;
}

pre code {
  background: none;
  padding: 0;
  font-family: inherit;
}

/* インラインの code（pre の外）は別スタイル */
:not(pre) > code {
  background: #f1f5f9;
  color: #be123c;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: .9em;
}
シンタックスハイライト


ライブラリ
特徴

Prism.js
軽量、プラグイン豊富、行番号 / コピーボタン対応
Highlight.js
言語自動検出、設定不要
Shiki
VS Code と同じ TextMate 文法。サーバ側で HTML 生成可
Starry-Night
GitHub と同じレンダリング



Prism の最小例



function fib(n) {
  return n <= 1 ? n : fib(n - 1) + fib(n - 2);
}





言語クラスの慣例


Prism / Highlight.js / Markdown all 共通: class="language-XXX"
例: language-html, language-javascript, language-python, language-bash, language-sql, language-yaml, language-json
Highlight.js は class="hljs language-XXX" も受け付ける


samp / kbd と組み合わせ


$ npm install lodash
added 1 package in 2s



保存は Ctrl + S です。
kbd {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 2px 6px;
  font-family: ui-monospace, monospace;
  font-size: .85em;
}

samp {
  font-family: ui-monospace, monospace;
  color: #475569;
}
アクセシビリティ


スクリーンリーダーは pre>code を「コードブロック」として認識する
長いコードには aria-label で「JavaScript のサンプルコード」のような意味的な見出しを付けると親切
キーボードでスクロール可能にする: tabindex="0" + フォーカススタイルを付ける

  
function Button({ children }) {
  return <button>{children}</button>;
}
  

よくある間違い


pre 内に空行が増える → ソース HTML の改行がそのまま反映される。タグの直後・直前は改行しないコツ
code 単体でブロック扱い →  はインライン要素。複数行コードには 必ず 
 でラップ

Markdown のコードブロックがハイライトされない → 言語名指定 ```js を忘れている
横スクロールがスマホで見えない → スクロールバーが極小で気づかれない。::-webkit-scrollbar でデザイン


FAQ

Q: 
 でタブ幅を変えたい

A: CSS で tab-size: 2;（または 4）を指定すれば、タブ文字の表示幅を制御できます。


Q: コピーボタンを付けたい

A: Prism の toolbar プラグインや、自前で navigator.clipboard.writeText() を呼ぶボタンを設置。

Q: 行番号を付けたい

A: Prism は class="line-numbers" を追加するだけ。CSS だけでも counter-increment で実装可能。