WordPressのcodeをハイライトするプラグインを全記事に適応したい

Question

今までCrayon Syntax Highlighterというプラグインを使用していたのですがCrayon Syntax Highlighterは適応をすると全記事にのコードが自動で変換されていました。

新しくHighlighting Code Blockというコードをハイライトさせるプラグインを使用したいと考え、有効化したのですが、適応されずにWordpressのデフォルトのハイライトのないコードになってしまいました。

全記事手作業で置き換えるのは大変なので一括で変更を行いたいのですがめぼしいやり方がわからず困っています。何か良い方法はないでしょうか？

Answer 1

Crayon Syntax Highlighter が、pre タグを置き換える機能があったからですね。

Crayon Syntax Highlighter のソースコードをみると下記の部分で置き換えています。

crayon_wp.class.php#L268 で、一致する部分を探して、public static function class_tag($matches) で、置き換えています。

Highlighting Code Block のソースコード を見た感じでは、全ての <pre>タグ を置き換える処理はしていないようなので、同じような感じですべての preタグを置き換えたいのであれば、Filter_Reference/the_content あたりを利用して、「Crayon Syntax Highlighter」が置き換えているようなコードを自分で作成するしかないと思います。

---

(2019.04.19 18:12 追記)

手抜きですが <pre>〜</pre> を <div class="hcb_wrap"><pre class="prism line-numbers">〜</pre></div> に置き換えれば見た目を近づける事はできそうです。

完全に同じようにしようとすると「属性」等のチェックや置き換えでいろいろ面倒そうですが...

手抜きコードだとこんな感じでしょうか。これをベースにチャレンジしてみてください。(画像のテーマは、twentynineteen です。)

function my_filter_syntax_highlight_185228( $content ) {
 
  if ( is_single() && in_the_loop() && is_main_query() ) {
    $content = preg_replace_callback( "|<pre>(.*?)</pre>|su",
      function( $matches ){
        return '<div class="hcb_wrap"><pre class="prism line-numbers"><code>'.$matches[1].'</code></pre></div>';
      },
      $content );
  }
  return $content;
}

add_filter( 'the_content', 'my_filter_syntax_highlight_185228' );

投稿内容:

before:

after: (上記コードの実行例)