ワードプレスでコード表記にシンタックスハイライトを実装する方法

ワードプレスでコード表記にシンタックスハイライトを実装する方法

どうも、ぽっぽです。

技術系のブログを書くことがあるので、コードを表示する場合、シンタックスをカラフルに表示して見栄えを上げたいと思いました。

まずはプラグインを使わないでコードのシンタックスハイライトを実施出来るか調べてみました。理由は、プラグインを入れすぎるとワードプレスのレスポンスが低下するらしいからです。プラグインは必要最小限とした方が良いようです。ネットで調べると色々方法があり、そのなかから私が選んだ方法を紹介します。

code-prettifyを使ってシンタックスをハイライトする

GitHub – google/code-prettify: An embeddable script that makes source-code snippets in HTML prettier.にJavaScriptでコードのシンタックスハイライトを行ってくれるライブラリがあります。そこに使い方が記載されています。

使い方は、<script>タグを使ってJavaScriptを読み込ませます。コード表示の箇所で<pre class="prettyprint">prettyprintクラスを指定します。

そこで、ワードプレスで<script>タグを使ってJavaScriptを読み込ませる手順とprettyprintクラスを指定する手順を紹介します。

ワードプレスでJavaScriptを読み込ませる方法

ワードプレスにはwp_enqueue_script()が関数として準備されています。function.phpに下記を追記します。

// code prettifierを読み込む
add_action('wp_enqueue_scripts',function(){
    wp_enqueue_script('code_prettifier','https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js',array(),NULL,true);
});

function.phpを使う場合は子テーマを作るようにしましょう。子テーマは親テーマの機能を継承します。子テーマで編集した機能は親テーマに影響を与えません。そうすることで親テーマの更新を実行しても子テーマは影響を受けません。親テーマを直接編集すると編集した機能が上書きされてしまうことがあるためです。子テーマはこちらの記事で紹介しています。

code要素にクラスを追加する方法

記事を書くごとにコードで記述した部分をHTMLで手書きするのは大変です。JavaScriptでCSSを追加するようにしました。

cssの操作はjQueryを使うのが手っ取り早いです。私が使っているワードプレスはコード表示にwp-block-codeがクラスで指定されていたので、そのクラスにprettyprintを追加します。

// code prettifierを機能させるためにCSSクラスを追加
jQuery('.wp-block-code').addClass('prettyprint');

これが記事を表示するときに実行されるようします。

ワードプレスにデフォルトで使えるjQueryがあります。デフォルトで使う場合、省略形式の$は使えないようになっているみたいなので、省略形式でない書式で記載します。

ワードプレスでJavaScriptの埋め込み

こちらの記事でブログ記事に目次を追加する方法で一度調べました。

function.phpを編集して、<script>タグに、今回追加するJavaScriptのコードを追加します。下記は今回追加する部分だけの場合のサンプルコードです。

add_filter( 'wp_footer', function() {
    ?>
    <script>
        // code prettifierを機能させるためにCSSクラスを追加
        jQuery('.wp-block-code').addClass('prettyprint');
    </script>
    <?php
} );

以上で、過去の記事も今後書く記事も今まで通りコードを記述するだけで、ワードプレスが自動でシンタックスハイライトを行ってくれるようになりました。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

先頭に戻る