***子-番外. ハイライト表示 prism.js

※[functions.php]をいじるので、採用は自己責任でお願いします。
試してみたい場合は、テストサイトでやってみましょう。

以前はソースコード(HTMLタグ)をハイライト表示させるのに「Syntax Highlighter」を使っていましたが、新エディターになってから記事を更新すると、タグがグチャグチャになることを発見。
Lognoteの山川先生に教えていただいて、ハジプロ!さんのシンタックスハイライター「prism.js」の使い方 | プラグイン無しでソースコードを綺麗に埋め込めるを導入させていただきました。
テーマ:fsvbasicと twentyseventeen で上手く機能しています。

ダウンロード:https://prismjs.com

マニュアル:ハジプロ!さんのシンタックスハイライター「prism.js」の使い方 | プラグイン無しでソースコードを綺麗に埋め込める
 

functions.php

他のものもいろいろ追加しているので最後尾に入れるとバグりました。なので下図のように子テーマの[functions.php]の黄色枠の冒頭部分のすぐ下にマーカー部分を追加で上手く行きました。

add_action( 'wp_enqueue_scripts', 'prism_js' );
function prism_js() {
    wp_enqueue_style( 'prism', get_bloginfo( 'stylesheet_directory') . '/prism.css', array(), null, 'all');
    wp_enqueue_script( 'prism', get_bloginfo( 'stylesheet_directory') . '/prism.js', array(), false, false );
}

 

記述例

<pre><code class="language-php" data-language="php">
ここにコードを書く
</code></pre>

 

エスケープツールで変換

HTML(PHP)タグのままでは使えないのでタグを変換します。ツールはオンラインで使用するのでブックマークしておきます。
ツール:HTMLエスケープツール

ツールの変換前枠にコードを入力して変換をクリックすると、変換後枠に変換されたタグが生成されるのでコピーします。

 
エディターにペーストしてみました。
水色マーカー部分を図のように差し替えるだけでOKです。
わたしは、ユーザー辞書に『こーーど』で登録しています。HTMLやCSSの場合は、『php』の部分を『html』『css』に書き換えるだけです。

 
行数やハイライト表示もできますが、長い文書だと表示が崩れてしまうのでわたしは使っていません。

ZIP

わたしの設定と同じ必要最低限でよければZIPもあります。
ダウンロード:prism.css.zip
ダウンロード:prism.js.zip