SyntaxHighlighter Evolved 仕様について バックスラッシュの仕様など

ソースコード表示プラグインについて

ソースコードを表示する際、
「SyntaxHighlighter Evolved」 というプラグインが使いやすく、
汎用性が高いので、その注意点や、詰まったところを書く。

まず、このプラグインを使う場合、いくつかの留意事項がある。
基本的な導入方法は他ページにもよく載っているので割愛する。

SyntaxHighlighterの設定

まずこのプラグインを入れて最初にすることは、
WordPress管理画面から「設定」→「SyntaxHighlighter」をクリック。

SyntaxHighlighterのバージョン項目を「バーション2.x」とし、
「ツールバーを表示する」の項目にチェックを入れる。
この方がバージョン3.xでは使えないツールバーが使えるようになる。
ソースをコピペしたい人はツールバーを使えるようになるので、
見た目で分かりやすくコピーでき嬉しいはずである。

Enable edit mode on double click (v3.x only)の項目は、
念のためチェックを外そう。

次に、ハマったのがバックスラッシュであった。
￥記号を使いたいのに勝手にバックスラッシュに変換されてしまう。
これはSyntaxHighlighterのCSSの設定の問題である。

これを解決するためには、まずWordPress管理画面から
「外観」→「カスタマイズ」をクリック。
テーマのカスタマイズ画面に入るはずなので、
「追加CSS」を設定する場所を探す※大体下の方にある
ここで、以下を追記。

html .syntaxhighlighter code {
    font-family: sans-serif !important;
}

sans-serifの部分は好きなフォントでも良い。
とにかくバックスラッシュに勝手に変換されないフォントなら何でもOK。

以上で快適なソースコード提供環境が整うはずである。
※ただし、スマホ環境(特にAndroid)では適用されない

今回の記事が何らかの役に立てば嬉しい。