WordPressにシンタックスハイライトを表示する手順【初心者向け】

WordPressにプログラミングコードを貼り付けたいけど、きれいに表示したいな。ベストな方法を知りたい！

こんな疑問にお答えします！

本記事の内容

WordPressでシンタックスハイライトならPrism.jsがオススメな理由
Prism.jsの始め方
Prism.jsの使い方

本記事を読むとWordPressに以下のような表示が可能となります。

document.write("Hello world!!");

本記事の信頼性

本記事を書いている私はエンジニア歴10年です。 Web開発の経験も多数あります。現役SEの私がコードを説明する際に便利なシンタックスハイライトについてご紹介します。

WordPressでシンタックスハイライトならPrism.jsがオススメ

WordPressでシンタックスハイライトをするための選択肢はいくつもあります。

Prism.js
Crayon Syntax Highlighter
Mivhak Syntax Highlighter
Simple Code Highlighter

私もいくつか使って来ましたが、この中でPrism.jsをオススメする理由は以下です。

ライブラリが軽量なため、読み込み速度が遅くなりにくい
対応言語が豊富
現在もメンテナンスがされている

Prism.jsの始め方

Prism.jsの公式サイトにアクセスし、トップページのDOWNLOADボタンをクリックします。

Prismの設定画面が表示されます。一つづつ説明しますね。

Compression level

PrismのJavaScriptファイルやCSSファイルの圧縮レベルを選択します。ここはMinified versionを選択しましょう！

CoreとThemes

Coreはすでにチェックが入っているのでいじらずに、Themesの中からお好みのテーマを選びます。テーマのリンクをクリックすることで、見え方のサンプルを表示できます。私はOkaidiaを使用しています。

Languages

シンタックスハイライトを適用するプログラミング言語を選びます。こちらも自分が使用する想定の言語を選びましょう。私は以下の赤枠をチェックしました。

一番下までスクロールすると、選択したThemeのイメージがが表示されるので、問題なければJSとCSSをダウンロードしてください。

ダウンロードしたJSとCSSをWordPressを動かしているサーバにコピーします。

本サイトはWordPressテーマにsangoを使用しているので、コピー先は以下でした。
/watalogs.com/public_html/wp-content/themes/sango-theme-child

WordPressの「外観」⇒「テーマエディター」⇒右側の「テーマのための関数」を選択し、以下のコードを貼り付けてください。

function load_prism() {
  wp_enqueue_style( 'prism-style', get_theme_file_uri( '/prism.css' ) );
  wp_enqueue_script( 'prism-script', get_theme_file_uri( '/prism.js' ), [], false, true );
}
add_action( 'wp_enqueue_scripts', 'load_prism' );

Prism.jsの使い方

Prismの使い方は簡単です。ソースコードブロックを追加し、高度な設定に「language-javascript line-numbers」を指定するだけです。

プレビューでソースコードを確認してみましょう！以下のように表示されれば完成です。お疲れ様でした！

document.write("Hello world!!");