お問い合わせはコチラから

自前で組み込んだPrism.jsをコードブロックプラグインに置き換える手順

サイト運営

ソースコードのハイライトは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

ダウンロードしたprism.jsとprism.cssは、設定⇒CODE BLOCKから設定を開いて読み込むように指定しないと有効になりません。

また、 ダウンロードしたprism.cssを読み込むとHCBブロックのprism.css使用時に右上の言語名の背景色が付いていたものが無くなるので、自分で追加した方が良いと思います。

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で表示できるようになりました。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました