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

2022.2.12 更新

皆さまごきげんよう。

さて、うちのワードプレスはマルチサイトになっております。
そのせいか分かりませんが、ワードプレスのバージョンが上がるタイミングなどで、時々今まで問題なく使えていたプラグインがエラーになってしまうことがあります。

以前、コードをハイライトさせるプラグイン wp-code-highlight-js を入れて大変重宝していたのですが、久しぶりにマルチサイトの一つをメンテナンスしていると、なんとプラグインのエラー表示がヘッダーやフッターに何行も出現しているではありませんか。

もうプラグインに頼るのは諦めるしかない(´ω｀。)、ということで、今回はjavascriptでシンタックスハイライトを実装してみることにしました。

google-code-prettifyでシンタックスハイライトを実装する

javascript、シンタックスハイライトで検索すると色々出て来ますが、今回は導入が楽そうなオートローダー版（自動で読み込んでくれる）の、google-code-prettify-js を使ってみることにしました。
導入は簡単で、function.phpに下記のコードを貼り付けるだけです。


//シンタックスハイライト
add_action('wp_enqueue_scripts', 'themeslug_enqueue_script');
function themeslug_enqueue_script(){
wp_register_script('google-code-prettify-js', 'https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian', null, null, false);
wp_enqueue_script('google-code-prettify-js');
}

又は、<head></head>内に下記↓を追加するだけでもOK

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&amp;skin=sunburst"></script>

あとはコードを囲うpreタグに下記のようにクラスを追加するだけです。

<pre class="prettyprint">段落番号なし
<pre class="prettyprint linenums">段落番号も追加する場合はこちら

こちらがgoogle-code-prettifyのサイトです。カスタマイズの方法なども載っております。

ちなみに上のリンクの中のskin=〇〇の部分をskin galleryからお好きなものに書き換えることが出来ます。
英語ですが、詳しい使い方はこちらのページでご確認ください。

ともかくこれでまた一つ、プラグインを停止させることが出来ました。
ちょっと選べるテーマが少ないですが、簡単に導入出来てプラグインより軽量、ということで取り入れてみて良かったと思います。

他にもhighlight.jsやprism.jsあたりも人気があるようなので、試したらまたレビューしようと思います。

ワードプレスの新エディタGutenbergの難点？

前回ワードプレスの新エディタ・Gutenbergを使ってみて良い点を挙げてみましたが、今回この記事を書きながら コードを貼る、という点でかなり面倒なのでは？と気になる点が出て来ました。

記事にある通り、シンタックスハイライトを使うにはpreタグにクラスを付けなければならないわけですが、せっかくコードというブロックがあるにも関わらず、preタグにクラスを付けるためにhtmlで編集をしなければならいのです。

今回の様な記事では効率が悪いため、結局クラシックエディタを復活させて書いている次第です。まだまだ一長一短といった感じですね。

ワードプレスの新エディタGutenbergが使えないときの解決法

もしかしたら私が知らないだけかも知れませんが…Gutenbergでシンタックスハイライトさせたコードを貼るのに何か良い方法があれば、情報お待ちしております！m(_ _)m

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

google-code-prettifyでシンタックスハイライトを実装する

ワードプレスの新エディタGutenbergの難点？

いいね: