こんにちは、ゆんつです。
プログラミングやブログのカスタマイズについて記事にしようとする場合、説明文と一緒に自分が書いたソースコードも記載することが多いかと思います。
ソースコードをブログに記載したい場合、単純にコードをコピーしてWordPressのビジュアルエディタに貼り付けると
let hello = 'hello!';
console.log(hello);
普通の文章との区別がつきづらいね
文章とコードの見た目が同じでとても解り辛いです。
ソースコードが、文章の部分とは明らかに違う見た目だったり、さらにそのコードをワンクリックでコピーできるような仕組みがあれば見る人にとってわかりやすく、かつ、便利になります。
そのような場合に役立つのがシンタックスハイライト。
シンタックスハイライトを使えばソースコードと普通の文章との見た目が明確に区分され、しかも行番号が表示されたりソースコードの重要な部分をハイライト表示することが出来たりするので、ソースコードがとても見やすくなります。
WordPressではシンタックスハイライト機能を持つプラグインがいくつもありますが,割と動作が重いものが多くブログの表示速度が低下する可能性があります。
僕はブログは軽さが大事だと思っているので、ブログが重くなるようなプラグインは極力入れたくありません。
そこでプラグインではなく、動作も軽快な「Prism.js」導入したいと思います。
Prism.jsとは？
動作の軽快なシンタックスハイライターです。
プラグインではないので導入は少し面倒ですが、プラグインよりも軽く、必要な機能だけを自分で選んで導入することが出来ます。
軽いんです
導入にはFTPクライアントが必要
Prism.jsはプラグインではないのでWordPressのプラグイン画面からクリック1つで導入することは出来ず、ダウンロードしたファイルをFTPクライアントを使ってサーバーにアップロードする必要があります。
ですのでPrism.jsの導入には、まずFTPクライアントが導入されていることが条件となります。
といっても難しくはないので、もし持っていない場合はFTPクライアントをダウンロードしてください。
もしまだFTPクライアントを導入していない場合はフリーソフトのFileZillaが使いやすいですよ。
導入手順
1. JavaScriptとCSSをダウンロードする
Prism.jsの公式ページに飛びます。
画面右上の「Download」をクリック。
ダウンロードページではダウンロードするものを自分で選んでいく形になりますので、順番に選んでいきます。
Compression levelの選択
まずはCompression level（圧縮レベル）を選択します。
Development versionとMinified versionがあります。
Development versionは圧縮されていないファイルで、ダウンロードしたファイルを自分でカスタマイズしたい場合などに選択します。
Minified versionは圧縮されたファイルで、通常はこちらを選択します。
テーマの選択
次にコードの背景に表示されるテーマの選択です。
以下の7種類から選択します。
Default
Dark
Funky
Okaidia
Twilight
Coy
Solalized_Light
Tommorow Night
自分のブログのデザインに合うものを選びましょう。
言語の選択
Compression levelとテーマを選択したら、Prism.jsを使ってシンタックスハイライトしたい言語を選択します。
初期状態では
Markup + HTML + XML + SVG + MathML
CSS
C-like
JavaScript
の4つの言語が選択されています。
現在使う言語に加えて将来的に使う言語かもしれない言語をチェックしていきましょう。
チェックしていない言語を後から追加したい場合、再度ここで使用する言語にチェックをしてダウンロードしなければならないので、少しでも使う可能性がある言語はチェックしておいた方が良いかもしれません。
プラグインの選択
続いて機能を追加するプラグインを選択します。
たくさん種類がありますが、
・指定した行をハイライト表示する「Line Highlight」
・行番号を表示する「Line Numbers」
・ソースコードにマウスが乗っかると使用されている言語名を表示してくれる「Show Language」
・行頭や行末の余分な空白を除去してくれる「Normalize Whitespace」
・ソースコードがワンクリックでコピーできるようになる「Copy to Clipboard Button」
がお勧めです。（※Show LanguageやCopy to Clipboard Buttonをチェックすると自動的にtool barにもチェックが入るのでこれも一緒にダウンロードします）
全ての選択が完了したらJavaScriptとcssを適当な場所にダウンロードします。
JavaScriptとcss、両方ともダウンロードしなければならないので注意してください。
片方だけだと動かないよ
ChromeでJavaScriptをダウンロードする際には、こんな感じの警告が表示されることがありますが、そのまま保存を押してダウンロードします。
これで必要なファイルは入手できました。
つづいてダウンロードしたファイルの設置です。
JavaScriptとCSSを設置する（使用テーマ:Cocoon）
ダウンロードしたJavaScriptとCSSを自分が契約しているサーバーに設置します。
まずはFTPクライアントでサーバーと接続し、Cocoonの子テーマのフォルダ（cocoon-child-master）に移動します。
/ドメイン名/public_html/wp-content/themes/cocoon-child-master
がCocoonの子テーマフォルダの場所になります。
例えば僕の場合なら
/konopure.com/public_html/wp-content/themes/cocoon-child-master
となります。
cocoon-child-masterというフォルダの中にcssという名前のフォルダとjsという名前のフォルダを作成します。
そしてjsという名前のフォルダにダウンロードしたJavaScriptをアップロードし、cssというフォルダにダウンロードしたcssをアップロードします。
以上でサーバーへのファイルの設置は完了です。
functions.phpに書き込む
WordPressのダッシュボードから、外観→テーマの編集をクリックします。
テーマの編集画面が開くので、編集するテーマを選択で「Cocoon child」が選ばれているのを確認して「テーマのための関数（functions.php)」をクリック。
するとCocoon Child: テーマのための関数 (functions.php)を編集する画面になるので
「//以下に子テーマ用の関数を書く」と書かれている行の下に以下のコードを記入します。
//Prism.jsとPrism.cssの読み込み
function load_prism() {
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_prism');
functionの後の関数名は「load_prism」にしていますが、自分の好きな関数名でいいです。
注意するのは「Prism.jsとPrism.cssの読み込みに使う関数名」と「Prism.jsとPrism.cssの呼び出しに使うadd_actionの第2引数の関数名」を同じににすることです。
この状態で保存をしたらprism.jsの導入は完了です。
※2019年10月8日追記
この記事を書いた当時はこれで導入完了でしたが、Cocoonの新バージョンではこのままの状態ではprism.jsが効きません。ですので以下にもう1つ手順を追加します。
Cocoonの高速化設定からprism.jsを除外する
新しいバージョンのCocoonでは高速化設定からprism.jsを除外しないとprism.jsが効きません。
その設定について説明します。
WordPressの管理画面から「Cocoon設定」→「高速化」をクリック。
「高速化」の中に「JavaScriptの縮小化」という項目があります。
ここにprism.jsが入っているフォルダのファイルパスを指定して縮小化の対象から除外します。
例えば僕の環境の場合、prism.jsは「/konpure.com/public_html/wp-content/themes/cocoon-child-master/js」というフォルダに入っています。
この場合には「/konpure.com/public_html/wp-content」よりも後ろの部分、「/themes/cocoon-child-master/js」を入力欄にコピペします。
コピペ後に設定を保存するとprism.jsが縮小化の対象外となり、新しいバージョンのCocoonでもprism.jsが効くようになります。
今後「Cocoon」のアップデートにより除外しなくてもprism.jsが効くようになるかもしれませんが、prism.jsが効かない場合はこの方法で対策をしてみてください。
以上でprism.jsの導入は完了です。
お疲れさまでした
導入だけで長くなってしまったので、基本的な使い方は以下の記事をご覧ください。
それでは、またー。
コメント