こんばんは〜。朝までマークアップを視聴しています。
注意：手動でHighlighting Code Blockのブロックにコードを全て書き直したので以下のカスタマイズは不要になりました。
さて、このブログのコードも直していたのですが、codeを掲載する際に、シンタックスハイライト表示にしたいなーと思っていたのですが、
ワードプレス標準のコードブロックで今までずっと書いていたので、後からシンタックスハイライトプラグインを導入すると全部コードを入れ直さないといけなくて、大変めんどくさくてやってなかったんです。
そこで、プログラムを使って、Highlighting Code Blockプラグインで使用しているCSSクラスをコードブロックに付与する方法を取りましたところ、無事にシンタックスハイライトされましたのでコードを共有しますね。
まず、Highlighting Code Blockプラグインをインストール有効化してくださいね。
以下コードです。効率のいい方法じゃ無いかもしれませんが、いい書き方がありましたら教えてくださいね。
ちなみに、想定外の使い方だと思いますので、あくまで臨時の方法です。本当は一つ一つのブロックを書き直して、Highlighting Code Blockに対応させるべきだと思っています。
正規の方法で導入していないので色はつきません。。。
function wrap_code_blocks_with_hcb_div($content) {
// 投稿ページと固定ページでのみ処理を行う
if (!is_singular()) {
return $content;
}
// コードブロックを検索してラップする
$pattern = '/<pre class="wp-block-code"><code>(.*?)<\/code><\/pre>/s'; // コードブロックを検索
$replacement = '<div class="hcb_wrap"><pre class="wp-block-code"><code>$1</code></pre></div>'; // ラップ用の<div>を追加
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'wrap_code_blocks_with_hcb_div');以上でコードブロック全体をHighlighting Code Blockのhcb_wrapのCSSでラップしてを表示させます。
function add_prism_class_to_code_blocks($content) {
// 投稿ページと固定ページでのみ処理を行う
if (!is_singular()) {
return $content;
}
// <pre>要素にprismクラスを追加
$pattern = '/<pre class="wp-block-code"><code(.*?)<\/code><\/pre>/s'; // コードブロックを検索
$replacement = '<pre class="prism line-numbers lang-plain"><code$1</code></pre>'; // Prism.jsクラスを追加
$content = preg_replace($pattern, $replacement, $content);
return $content;
}また、以上で行番号を追加するためのコードを追記しました。
以上です、プログラムでやっちゃうと楽ですね！