WordPress Syntex Highlighter Evolved から Prism.jsに乗り換え

参考にしたサイト
1. 引っかかった点
SyntaxHighlighterを利用して作成してた記事のPrism.jsへの置換
htmlのタグ囲い文字＜＞をphpで自動変換する
1. 参考にしたサイト

参考にしたサイト

WordPressでシンタックスハイライトならPrism.jsが軽量＆多機能でベストチョイス

とてもわかり易かったです。

このサイト様では、WordPressで「テキスト」画面で編集することを前提に書かれていました。

「ビジュアル」画面でやりたい人は他のサイト様見たほうがいいと思います。僕は上記を導入しました。

引っかかった点

jsとcssを配置しないといけないんだけど、置き場所を間違えたためだった。

/css/prism.css

/js/prism.js

/wp-content/使ってるテーマ/css/prism.css

/wp-content/使ってるテーマ/js/prism.js

上記のサイト様をよく見たらちゃんと載ってますた。。。

SyntaxHighlighterを利用して作成してた記事のPrism.jsへの置換

記事あるかなと思って探したけど、今の所見つかってない。。。みんな手動でちくちくやってるのかな。。。？

WordPressに一括置換できるプラグインがあるみたい。

htmlのタグ囲い文字＜＞をphpで自動変換する

以下、一応ご紹介するけど、おすすめしません。僕は結局コレやるのやめました。

何故なら、<pre><code>の中にhtmlタグが含まれてると、WordPressで編集中にビジュアルタグに切り替えると自動整形されてコードがグチャグチャになるので。。。

やっぱりhtmlタグを載せる場合は、いちいちエスケープする必要がありそう。。。

やり方としては、以下をfunction.phpに追加すればいい。


/*---------------------------------------------------------*/
/* 18-05-09_Add  ｈｔｍｌタグをphpで特殊文字に置換する */
/*---------------------------------------------------------*/
add_filter('the_content', function($content) {
  $content = preg_replace_callback('/<pre(.*?)><code(.*?)>(.+?)<\/code><\/pre>/s', function($matches) {
    $matches[3] = preg_replace(['/</', '/>/'], ['<', '>'], $matches[3]);
    return '<pre'.$matches[1].'><code'.$matches[2].'>'.$matches[3].'
';
}, $content);

return $content;
});