WordPressでシンタックスハイライトを実現する方法

技術系の記事を投稿することが多いので、シンタックスハイライトは重要な機能です。WordPressで記事を書く場合、デフォルトではシンタックスハイライトしてくれないのでプラグインを使う必要があります。

WordPressでシンタックスハイライトできるようにしたい人向けに当ブログでも使っているSyntaxHighlighter Evolved というプラグインを紹介。コードブロックをシンタックスハイライトしてくれます。

SyntaxHighlighterでシンタックスハイライトする方法

例えば、JavaScriptのコードは次のようにハイライトされます

function syntaxHighlight(arg) {
    if (arg >= 0) {
        return 'Excellent';
    } else if (arg > 5) {
        return 'Good';
    } else {
        return 'Not bad';
    }
}

設定できること

テーマ

シンタックスハイライトのカラースキームはプラグイン一覧から「SyntaxHighlighter Evolved」 > 「設定」と進んで「テーマ」の欄で変更できます。上記の例は RDark というテーマを選んでます。

ショートコード

クラシックエディタ派なので基本的にはショートコードを使って書いてます。codeタグで囲むか言語を直接タグとして囲むことでハイライトを有効にできます。ショートコードが使えると便利で助かってます。

2021/07追記

このプラグインでは望まないところでエスケープ処理が走ることがあります。

この問題を解決するには、プラグインに手を加えるか、あるいは代替のプラグインを導入する必要があります。代替プラグインとしておすすめなのはCrayon Syntax Highlighter。SyntaxHighlighter Evolvedと同じようにショートコードでのハイライト指定も可能だそうです。

2021/08追記

このブログではスタイルシートに下記を追加して見た目を微調整してます。

font-size 14px;
padding 20px 0;
line-height 1.5em;