記事内のプログラムやhtml、cssなどのソースコードをきれいに見やすく表示してくれるシンタックス・ハイライターの「prism.js」をCocoonに設置する方法について覚書。
「prism.js」は、きれいに表示するだけでなく行番号の表示や行の強調表示など細かい表示カスタマイズが可能です。
Cocoonのコード表示設定
Cocoonにはもともとコード表示をきれいに表示してくれる設定があり、[Cocoon設定] の [コード] タブからコードの表示をどうするかを設定できます。
Cocoonでは、コードのハイライト表示に「highlight.js」を使用していますが「highlight.js」では、行番号の表示/非表示くらいはできてもその他の細かい表示が簡単にはできません。
「prism.js」は、「highlight.js」に比べれば見た目のおしゃれさは劣りますが、行番号の開始を任意の番号から開始したり、任意の行を強調表示するなど細かい表示設定が簡単にできます。
今回はCocoonのコードのハイライト表示機能を使わずに、「prism.js」を設置して使用する方法を説明します。
※子テーマを使用していることを前提として説明します。
prism.jsとprism.cssファイルのダウンロード
ブラウザで「prism.js」の公式サイトを開きます。
画面右上にある[DOWNLOAD]ボタンをクリックします。
最初にコード表示の全体的なデザインをクリックして選択します。
コード表示デザインサンプル
各デザインのサンプルを以下に表示するので、自分が気に入ったデザインを選択してください。
DEFAULT
DARK
FUNKY
OKAIDIA
TWILIGHT
COY
SOLARIZED LIGHT
TOMORROW NIGHT
使用言語の選択
次に「prism.js」を使ってハイライト表示させたい言語を選択します。
ここでは使用する言語のみ選択してください。
選択する言語が多ければ大きほどCSSファイルの容量が大きくなるので、なるべく自分が使うであろう最低限の言語だけチェックを付けるようにしてください。
Pluginの選択
「Plugins」では「prism.js」で使用したい機能を選択します。
各機能がどういったものかは、各機能のリンクをクリックすれば機能の説明と使用したときとしないときでの違いを見ることができます。
jsファイル、CSSファイルのダウンロード
すべて選択し終わったら、画面下部の[DOWNLOAD JS]ボタンをクリックし、「prism.js」本体をダウンロードします。
ダウンロード時に「この種類のファイルはコンピュータに損害を...」というメッセージが表示される場合がありますが、「prism.js」本体のファイルなので保存して構いません。
次に[DOWNLOAD CSS]をクリックして「prism.css」をダウンロードします。
prism.jsとprism.cssファイルのアップロード
ダウンロードした2つのファイル、「prism.js」と「prism.css」ファイルをFFFTPやWinSCPなどを使用してCocoonの子テーマのフォルダに保管します。
ディレクトリパスとしては、WordPressインストールディレクトリ > wp-content > themes > cocoon-child-master になります。
Coconnテーマのヘッダーにprism.jsを読み込むコードを追加
サーバーにアップロードした2つのファイルを読み込むコードをCocoonテーマのヘッダーに追加します。
WordPressの「ダッシュボード」の左メニューから[外観] > [テーマファイルエディター]をクリックします。
※テーマファイルの変更に関して「注意」が表示された場合は、[理解しました]をクリックしてください。
「テーマを編集」画面が表示されるので、「編集するテーマを選択」が「Cocoon Child」になっていることを確認し、画面右下の[tmp-user] > [head-insert.php] をクリックします。
※子テーマを使用していない場合は、「編集するテーマを選択」が「Cocoon」になっていればよいです。
以下の画面が表示されるので、一番下の行に以下の2行を追記します。
<link rel="stylesheet" href="./wp-content/themes/cocoon-child-master/prism.css">
<script src="./wp-content/themes/cocoon-child-master/prism.js" defer></script>
追記したら[ファイルを更新]をクリックします。
上記のように「ファイルの編集に成功しました。」と表示されれば完了です。
以上でprism.jsが使用できるようになります。
もしCocoonの設定でコードのハイライトを有効化している場合は、チェックを外して使用しないように設定してください。
prism.jsを使用したコードの記載方法
「prism.js」を使用してコードをハイライト表示させる際の各種指定方法については、以下の記事に代表的な例を載せていますので参照してください。
まとめ
Cocoonテーマで「prism.js」を使用する場合の設置方法について説明しました。
使用しているテーマがCocoonでなくても設置方法自体は余り変わりません。
使用しているテーマに合わせてヘッダーに挿入するコードのjsファイルとCSSファイルの指定を修正すればよいです。
コメント