SyntaxHighlighter Evolvedプラグインはそのまま使用してはいけない

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';
// 中略
}