prism.jsでソースコードをハイライト表示する
テーマの関係でWP Code Highlight.jsが上手く表示できなかったため、再度良いものがないか調べてたところ、Prismを発見。
JavaScript+CSSなので、WordPressだけでなく、通常のWebサイトでも使用可能です。
また追加機能(プラグイン)で行番号表示も可能です。これは凄い!!
唯一大変だったのは、既存のハイライト表示プラグイン(Crayon Syntax Highlighterなど)からの移行作業でした。
Prism の導入方法
Prism.js のダウンロード
Prismからダウンロードして使用します。
- DOWNLOADボタンをクリック
あらかじめテーマを選択(青枠)しておくことも可能です - Compression level:
通常はサイズの小さくなるMinified versionを選択 - Themes
事前に選択していない場合は、希望のテーマを選択 - Languages
ソースコードをハイライト表示したい言語を選択
"all"だとサイズが大きくなるため注意 - Plugins
使用するプラグインを選択します
どんな内容かは、各プラグインをクリックすれば参照できます - 選択が完了したらトータルサイズが確認できます
- DOWNLOAD JSボタンをクリック
- DOWNLOAD CSSボタンをクリック
WordPress への Prism 適用
- 使用しているテーマフォルダまたは子テーマフォルダに、ダウンロードした
prism.js
、prism.css
を格納します - 同じフォルダにある
functions.php
に以下を追加します(ファイルがなければファイルを追加します)
使用しているテーマによっては正しくハイライト表示されない場合があります。
Webサイトへの Prism 適用
headタグに以下を追記します。
記述方法
で記述します。xxxx
は言語です。Supported languagesを参照してください。
html
、xml
はmarkup
ですが、html
、xml
と記述しても内部で変換してくれるようです。