導入したきっかけ
Cocoon のソースコード設定にあるハイライトを試したのですが、「#」や「”」記号がうまく表現できず、ブログのソースコードをどのように表示させるかを悩んでいた時に Prism.js に出会いました。
設定できる言語が多く、書きたい内容にあわせて「#」や「”」のカラーが調整できるので、個人的には、すごく使いやすいという印象です。
設定方法
js、css ファイルのダウンロード
公式画面右上のダウンロードボタンからダウンロード画面へ進みます。
画面を開くとダウンロードに必要な選択項目が出てきますので簡単に記載していきます。
Compression level：ファイルの圧縮レベル
通常の Javascript ファイルとするか、圧縮したファイルにするかの選択となります。
※カスタマイズや処理の内容を確認したい場合には、Development version を選択し、サイトに導入して使用するだけであれば、デフォルトで選択されている Minified version を選択する方が容量が軽くていいかと思います。
Themes：テーマを選択します。
ソースコードの表示する配色テーマを選択します。
公式サイトの右側に丸いボタンがあり、こちらをクリックするとサイト内のソースコードがテーマの配色で表示されるので、試した上で各自のサイトにあったテーマを決めるのが一番かもしれません。
※このブログでは「Okaidia」を使用してます。
Languages：言語を選択します。
ハイライトとして使用したい言語を選択します。
※今回、特に「”」（ダブルクウォーテーション）をコメントアウトとして使用したかったので、vim も選択しました。
Plugins：使用したいプラグインを選択します。
色々あり、全部は確認できていないのですが、今回導入したプラグインを簡単に記載します。
・Line Highlight
行番号のハイライト
・Line Numbers
行番号の表示
・Show Language
言語名の表示（※設定している言語名が右上に表示されます。）
・Copy to Clipboard Button
コピーボタンを表示（※ソースコードのコピーボタンが右上に表示されます）
・Download Button
ダウンロードボタンを表示（※ソースコードのダウンロードボタンが右上に表示されます）
・Diff Highlight
先頭に「+」「-」記号をつけることで、diff ツールみたいに見やすい差分表記が可能になります。
チェックが完了したら画面下にある「DOWNLOAD JS」「DOWNLOAD CSS」ボタンをクリックし、ダウンロードします。
必要ファイルのアップロード
ダウンロードが完了したら、サーバーにアップしていきます。
※アップロードの仕方は、FTP や SSH を利用したり GUI 画面からであったりとサーバー環境に依存するところもありますので省略します。
アップロード先は、wp-content/themes/ 配下にテーマのディレクトリがありますので、中身を確認します。
今回、cocoon-child を使用してますので、cocoon-child-master 配下になります。
js や css のディレクトリがないので作成し、js ディレクトリに prism.js ファイルを css ディレクトリに prism.css ファイルをそれぞれアップロードします。
読み込み設定
次にアップロードしたファイルの読み込み設定を記述します。
テーマディレクトリ配下に function.php ファイルがあり、こちらに読み込み設定を記述します。
直接ソースコードを変更してもいいのですが、WordPress 管理メニューの[外観]->[テーマエディタ]からも変更できます。
// Prism.js と Prism.css の読み込み設定
function load_extra_files() {
wp_enqueue_style('prism-style', get_stylesheet_directory_uri() . '/css/prism.css');
wp_enqueue_script('prism-script', get_stylesheet_directory_uri() . '/js/prism.js', array(), false, false);
}
// Prism.js と Prism.css の呼び出し
add_action('wp_enqueue_scripts', 'load_extra_files');
保存すれば、設定は完了です。
コメント