SyntaxHighlighter Evolvedとは
SyntaxHighlighter EvolvedはWordPressのページ内にシンタックスハイライト付きのコードを簡単に追加するためのプラグイン。
例えば以下のようなコードをページ内に表示したい場合、ブロックの追加でSyntaxHighlighterを選択すれば以下のように色付きでコードを追加できるようになる。
.foo {
width: 400px;
height: 300px;
background: #CCC;
}
function add(a, b) {
if (a && b) {
return a + b
}
}
console.log(1, 2)
使用する際はバグ修正が必要
SyntaxHighlighter Evolvedプラグインには&があると&に変換してしまうという重大なバグがある。
そのため、 HTMLエンティティ化された特殊文字の&を&に置換する処理をfunctions.phpに追記する必要がある。
function my_syntaxhighlighter_precode($code, $attr, $tag) {
if ($tag === 'code') {
$code = wp_specialchars_decode( $code );
}
return $code;
}
add_filter('syntaxhighlighter_precode', 'my_syntaxhighlighter_precode', 10, 3);
JavaScriptのconstが色付けされない
SyntaxHighlighter Evolvedプラグインは最新版でもvarやletは色付けされるがconstなどが色付けされない。
現在はvarではなくconstを使用するのが主流となっているため、これだと問題がある。
コードで何を色付けするかは以下のフォルダ内のJavaScriptファイルを修正すれば自分で設定可能。
wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/
JavaScriptの場合はshBrushJScript.jsのvar keywordsにconstを追加すればconstが色付けされるようになる。
function Brush()
{
var keywords = 'const break case catch class continue ' +
'default delete do else enum export extends false ' +
'for function if implements import in instanceof ' +
'interface let new null package private protected ' +
'static return super switch ' +
'this throw true try typeof var while with yield ' +
'async await';
// 中略
}