はじめに
ITStudyのサイトはCocoonのテーマを使用しているので、ソースコードのシンタックスハイライトが簡単に設定できます。
シンタックスハイライトを使うことで色をつけたり行番号を表示できるので、見やすくてわかりやすくなります。
ただ、Cocoonにはソースコードをワンクリックでコピーする機能がありません。これを実現するには「Crayon Syntax Highlighter」などのプラグインを導入する方法がありますが、ページの表示が遅くなったり開発が停止していることがあります。
他に良い方法がないか探していたところ、「Prism.js」というシンタックスハイライターを見つけました。多くの使用実績があり評判も良く無料で使用できるので導入することにしました。動作が軽快というのもいいですね。
導入手順
Prismのダウンロード
公式サイトにアクセスし「ダウンロード」ボタンをクリックします。
https://prismjs.com/
いくつかの選択項目があるので以下の通り設定します。
Compression levelは「Minified version」を選択します。
Themesは任意に選択して下さい。
Languagesは記事としてソースコードを掲載するプログラミング言語を選択します。
Pluginsは以下を選択します。
・Line Highlight
・Line Numbers
・Show Language
・Copy to Clipboard Button
「Download JS」と「Download CSS」ボタンをそれぞれクリックしファイルをダウンロードします。
ファイルのアップロード
FTPツールを使用して以下のパスに移動します。
/ドメイン名/public_html/wp-content/themes/cocoon-child-master
先ほどダウンロードした2つのファイル（prism.jsとprism.css）を上記のパスにアップロードします。
「Highlighting Code Block」プラグインの導入
このプラグインは、prism.jsを使用したシンタックスハイライト機能付きのコードブロックを追加します。プラグインの新規追加画面からインストールして有効化して下さい。
プラグインを有効化したら「Highlighting Code Block」の設定を実施します。[設定]-[CODE BLOCK]を選択します。
独自のカラーリングファイル欄に「prism.css」と入力します。独自prism.js欄に「prism.js」と入力します。その他の項目は任意に設定して「変更を保存」ボタンクリックします。
Cocoon高速化設定
「JavaScriptを縮小化する」にチェックを入れている場合のみ設定して下さい。除外するファイルとして「/themes/cocoon-child-master/prism.js」を入力して「変更を保存」ボタンクリックします。
動作確認
記事作成画面でブロック内に「HCB」のアイコンが追加されています。これを使ってソースコードを追加します。
ハイライトや行番号が表示されました。右上には「Copy」ボタンが追加されました。クリックするとソースコードが クリップボードにコピーされます。
新規作成の記事でソースコードを入力する時は「HCB」のアイコン を使えばいいのですが、過去の記事のソースコードはそのままです。少しずつ修正するかCocoonの設定（Copy機能なし）で済ますかですね。
個人的に「Copy」機能はよく使うし訪問者の方にとっても便利だと思うので少しずつ修正していこうと思います。
コメント