WP Code Highlight.jsの導入手順|WordPressプラグイン

      2018/10/12

当サイトではCrayon Syntax Highlighterを利用しているのですが動作が重いようです。
またGoogle Chromeでコピー操作がデフォルトでブロックされてたり・・・
調べたところ、WP Code Highlight.jsというプラグインが良さそうだっため、インストールしてみました。

インストール手順

  1. サイドメニュー>プラグイン>新規作成ボタン
    WP Code Highlight.js step1
  2. キーワードにWP Code Highlight.jsを入力
    WP Code Highlight.js step2
  3. 検索結果のWP Code Highlight.js>今すぐインストールボタン
    WP Code Highlight.js step3
  4. インストール完了画面でプラグインを有効化
    WP Code Highlight.js step4
    ここで有効化しなかった場合は、
    サイドメニュー>プラグイン>WP Code Highlight.js>有効化
    WP Code Highlight.js step5

設定

WP Code Highlight.js の設定

  1. [order]サイドメニュー>設定>WP Code Highlight.js
    WP Code Highlight.js step6
  2. CDNは「Public CDN: cdnjs (highlightjs.org recommend)」を選択
    WP Code Highlight.js step7
  3. Package>Common(CDNをlocal以外にするとCommonになる)
    Otherは必要ならチェック
  4. Color Schemehighlight.js demoを参考に任意のものを選択
    ここでは「Atelier Heath Dark」選択
  5. Highlight.js Option:何もしない
  6. You can add some additional CSS rules for better display:何もしない
  7. Crayon Syntax Highlighterを使っていたので、Crayon Syntax Highlighter Compatiableにチェック
  8. Enable [code]code content …[/code] support:チェックしない
  9. Saveボタン
    WP Code Highlight.js step8

Crayon Syntax Highlighter を無効化

  1. サイドメニュー>プラグイン>Crayon Syntax Highlighter>停止
    WP Code Highlight.js step9
  2. 必要に応じて、停止後削除

上手く表示されない場合

ここまでやったのですが、現在使用中のテーマ(Giraffe Child)では正しく表示されませんでした。
試しに別テーマにしたところ、正しく表示されたので、正しく表示されない場合はテーマを変えて試してみて下さい。
また、CSSにて以下の様なstyleを指定していると、一部のフォント色が期待した色になりませんでした。

* {
    color: var(--primary-text);
    font-family: 'Noto Sans JP', sans-serif;
}

この場合、以下の様に変更すると期待した色になります。

*:not(pre > code) {
    color: var(--primary-text);
    font-family: 'Noto Sans JP', sans-serif;
}

同様に、precodeにstyleを指定している場合も気を付けて下さい。

 - WordPress