【highlight.jsの使用法】WordPressでコードを美しく表示する方法

highlight.js は，ウェブページで使用される軽量なコードシンタックスハイライターライブラリです．
このライブラリは，多くのプログラミング言語に対応しており，Webサイトやブログの投稿内でプログラミングコードを色付け，美しく表示することができます．
また、さまざまなスタイルテーマを選択でき、サイトのデザインに合わせた見た目にカスタマイズすることができます．
今回の設定では，highlight.js を CDN 経由でロードし，サイト全体に自動的に適用します．

1. テーマを選択

まずブラウザを開き，highlight.jsの公式サイトにアクセスします．
サイト内のナビゲーションメニューまたはホームページから「Highlighting Previews」にアクセスします．
このページには，多数のテーマがプレビューとともに表示されています．
各テーマをクリックして，好みのテーマを探しましょう．

好みのテーマが決まったら，そのテーマに対応するCSSファイルのCDNリンクを探します．
特にこだわりがなければ，下記のリンクから選んだテーマのURLをコピーします．

https://cdnjs.com/libraries/highlight.js

テーマ数がとても多いので，「command + F」でテーマ名を検索すると良いです．

2. functions.phpを編集

WordPressのダッシュボードにログインし，「外観」>「テーマエディター」を選択します．
テーマファイルの中から，「テーマのための関数(functions.php)」をクリック．

「functions.php」ファイルの末尾に以下のコードを追加します．
‘コピーしたURL’には自分でコピーしたURLをペーストします．
このコードは，highlight.jsのスタイルシートとJavaScriptファイルをサイトに追加し，ページの読み込み後に自動的にシンタックスハイライトを適用します．

function add_highlight_js() {
    // Highlight.jsのスタイルシートを読み込む
    wp_enqueue_style('highlight-style', 'コピーしたURL');

    // Highlight.jsのスクリプトを読み込む
    wp_enqueue_script('highlight-script', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js', array(), null, true);

    // ページの読み込み後にHighlight.jsを初期化するJavaScriptを追加
    wp_add_inline_script('highlight-script', 'document.addEventListener("DOMContentLoaded", function() { hljs.highlightAll(); });');
}

// WordPressのスクリプトとスタイルシートのキューに上記の関数をフックする
add_action('wp_enqueue_scripts', 'add_highlight_js');

コードを追加したら，ファイルの変更を保存します．
右下または上部にある「ファイルを更新」ボタンをクリックして保存します．

3. サイト上でテスト

変更を保存した後，サイト上でコードブロックが適切にハイライト表示されているか確認します．

以上で，Highlight.jsの導入完了です！
WordPressのすべてのページでコードのハイライトが有効になります．
どんどん美しいコードを生成していきましょう〜