目次
コードに色をつける方法（highlight.js）
Gutenbergの「コード」ブロックは、そのままだと色がつかず読みづらいです。
以下の方法で、VSCodeのような見やすいカラー表示ができます。
やること一覧（最短3ステップ）
| 手順 | 内容 |
|---|---|
| ① | JSとCSSをサイト全体に読み込む（コピペでOK） |
| ② | コードブロックにスタイルをあてる |
| ③ | 記事中のコードに自動で色がつくようになる |
</body> の直前に貼るコード（SWELL → カスタマイズ → 高度な設定）
<!-- highlight.js の本体とテーマ -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<!-- 自動ハイライト起動 -->
<script>
document.addEventListener("DOMContentLoaded", function () {
hljs.highlightAll();
});
</script>
コードの見た目を整えるCSS（カスタマイズ → 追加CSS）
.wp-block-code code {
background: #1e1e1e;
color: #dcdcdc;
padding: 1em;
border-radius: 6px;
font-size: 0.9em;
overflow-x: auto;
display: block;
font-family: 'Fira Code', Consolas, monospace;
}
記事中での使い方
以下のように「コードブロック」を使うだけで、自動で色がつきます。
```js
const hello = (name) => {
console.log(`Hello, ${name}`);
};
```
特定の言語にしたいとき
「コードブロック → 高度な設定 → 追加CSSクラス」にこう書きます：
language-python
自動で <code class="language-python"> に変換され、指定した言語として色がつきます。
補足：自動判定のしくみ
- 言語を指定しなくても
highlight.jsが自動で判別して色付けします。 - ほとんどの場合は正しく認識されます。
- 特定の言語にしたいときだけ
language-xxxをつければOK。
よくある質問
Q. セキュリティ的に大丈夫？
→ 問題なし。世界中の開発サイトが使っている安全なライブラリです。
Q. サイトが重くならない？
→ 普通の使用量では問題なし。100個以上コードがある記事でなければ気にしなくてOK。
Q. なにかリスクやデメリットはない？
⚠ 表示速度・スコアへの影響（Googleの評価）
- 外部ライブラリ（highlight.js）を読み込むため、PageSpeed Insightsのスコアがわずかに下がることがあります。
- 特にモバイル環境では、**「使用していないJavaScriptの読み込み」**と指摘される可能性があります。
- ただし、体感的な速度にはほぼ影響しません。100点満点を目指すサイトでなければ気にしなくてOKです。
⚠ コードと見た目の分離（保守性）
- コードブロックに直接ではなく、ページの下（フッター）で全体にスクリプトを追加しているため、
「この記事のどこでハイライトが動いてるのか」が見た目では分かりません。 - 後から見直したときに「なにで色がついてるのか？」がやや分かりづらいことがあります。
- Gutenbergのコードブロックにそのまま色を設定できる仕組みではないという点は少し不自然かもしれません。
全体まとめ（1枚図）
[1] 設定エリアに JS+CSSをコピペ
↓
[2] Gutenbergのコードブロックを使う
↓
[3] 自動で色つきの表示に（VSCode風）
↓
[4] 必要なら「追加CSSクラス」で言語指定も可
終わり
一度設定すれば、あとはいつも通り記事を書くだけ。
読みやすくてプロっぽい記事になります。
Comment