ソースコードのハイライトはPrism.jsを使っています。もともとLuxeritasを使っていた時に、Prism.jsが推奨されていたというのが理由です。
その後、Cocoonにテーマを切り替えた後も移植してそのまま使っていました。その時の経緯は、LuxeritasからCocoonにテーマを切り替えた時の記事にまとまっています。
最近ブロックエディタを使うようになり、今まで使っていたClassicエディタでPrism.jsを使う方法（addQuicktagの囲みショートコード）がまともに使えないことがわかりました。Classic paragraph内でソースコードを単純にコピペすると<br>タグが入ってしまいます。
このままだと使いにくいし、かといって別のソースコード表示方法を導入するのも過去の記事と見た目が変わってしまうのでイヤだなと思っていました。
この記事では、Cocoonとブロックエディタの組合せでPrism.jsを使う方法についてまとめています。この記事を読むことで、CocoonでPrism.jsをトラブルなく導入できるようになります。
Prism.jsのコードブロックプラグインを導入
Prism.jsをブロックエディタで使えるプラグインがあります。
Highlighting Code Blockというプラグインです。ちなみに、作者はSwellを作っている人です。
このプラグインを導入すると、Prism.jsとPrism.cssが自動的に読み込まれるので、今まで自前で読み込んでいたファイルは不要になります。
Luxeritasのショートコードを修正
LuxeritasにはPrism.jsを使うための囲みショートコードがありました。Cocoonにテーマを切り替えた時に、過去の記事でもPrism.jsが使えるようにLuxeritasの仕組みを移植しました。
今回、新しくプラグインを導入したら、Luxeritasのショートコードが機能しなくなりました。導入したプラグインが想定する書式と違っているためです。
なぜ違うのか、理由は定かではありませんが、次のように、Luxeritasのショートコードを書き換えてHighlighting Code Blockで使われている書式に変更することで、プラグイン導入後でも正常に動くようになります。
ショートコードの中身を書き換えることで過去記事を修正しなくても対応できるのはショートコードを使う最大のメリットだと思います。
Luxritasのショートコード
<?php
add_filter('the_content',function($c){preg_match_all('/\[highlight_css\].+?\[\/highlight_css\]/ism',$c,$m);if(isset($m[0])){foreach((array)$m[0] as $v){$s=htmlspecialchars($v,ENT_QUOTES|ENT_HTML5,'UTF-8',false);$c=str_replace($v,$s,$c);}}return $c;},9);add_shortcode('highlight_css',function($args,$contents){
$contents = str_replace( array( '<br />', '<br/>', '<br>' ), '', $contents );
$contents = str_replace( '<p>', "\n", $contents );
$contents = str_replace( '</p>', '', $contents );
$contents = '<pre class="line-numbers language-css"><code class="language-css">' . trim( $contents ) . '</code></pre>';
return $contents;
});High light code block用のショートコード
<?php
add_filter('the_content',function($c){preg_match_all('/\[highlight_css\].+?\[\/highlight_css\]/ism',$c,$m);if(isset($m[0])){foreach((array)$m[0] as $v){$s=htmlspecialchars($v,ENT_QUOTES|ENT_HTML5,'UTF-8',false);$c=str_replace($v,$s,$c);}}return $c;},9);add_shortcode('highlight_css',function($args,$contents){
$contents = str_replace( array( '<br />', '<br/>', '<br>' ), '', $contents );
$contents = str_replace( '<p>', "\n", $contents );
$contents = str_replace( '</p>', '', $contents );
$contents = '<div class="hcb_wrap"><pre class="prism line-numbers lang-css" data-lang="CSS"><code>' . trim( $contents ) . '</code></pre></div>';
return $contents;
});Cocoonの高速化設定からPrism.jsを除外
Prism.jsを単体で導入した時にもハマったのですが、Prism.jsを高速化設定で圧縮してしまうと正常に動作しなくなります。
Cocoonの高速化設定で、jsの圧縮の除外設定がありますので、そちらに指定します。
詳細は、以下の記事を参照してください。
Prism Pluginsの追加
PrismにはPluginsという追加のjavascriptがあって、好きなものを追加できるようになっています。初期状態だとLine Numbersがチェックされていますが、他に有用なものにToolbarと Copy to Clipboard Buttonがあります。
この2つを追加すると、ソースのCopyボタンが表示されるようになるので結構便利です。
- Line Numbers
- Toolbar
- Copy to Clipboard Button
CSSの追加（言語名の背景色、Copyボタンの配置変更）
div.code-toolbar>.toolbar {
top: 1em!important;
right: 0.5em!important;
}
.hcb_wrap pre::before {
background-color: #c8cbcc;
}まとめ
Prism.jsをCocoonでも使いたい、でも、ブロックエディタのブロックが無い！というところから、プラグインを導入しました。プラグインを導入することで、ブロックエディタでもPrism.jsが使えるようになりますし、過去の記事もそのままPrism.jsで表示できるようになりました。
