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

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

インストール手順

  1. サイドメニュー>プラグイン>新規作成ボタン WordPressプラグイン新規追加
  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を指定している場合も気を付けてください。

このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です