こんにちは、きゃぷてんです。
こちらの記事でも書いているのですが、ブログやWordPressテンプレートのカスタマイズの記事を書いていると、様々な言語を記事内に埋め込むことがあると思います。
ただ、上記の記事のように外部サービスを使ってコードを埋め込む場合、面倒な登録作業や「ちょっとしたWeb知識」が必要になるので、できることならプラグインで簡単に済ませたいと考える人も多いはずです。
そんなときは「軽くて速い、そしてシンプル」という特徴を持った、WP Code Highlight.jsというプラグインを使って、簡単にソースコードをブログ記事に表示してみてはどうでしょうか。
<目次>お好きなところからどうぞ
WP Code Highlight.jsとはどんなプラグイン？
ひとことで言えば「ソースコードを表示するプラグイン」です。
特徴としては、軽い・操作が簡単といった点が挙げられますので、「ブログ記事にソースコードを表示させたい、だけど面倒なのは嫌！」という場合であれば、重宝するプラグインだと思います。
ちなみに、WP Code Highlight.jsを使ってソースコードを表示すると、こんな感じで表示されるようになりますので参考にしてください。（色、フォント、デザイン等は変更可能）
<title>Title</title>
<style>body {width: 500px;}</style>
<script type="application/javascript">
function $init() {return true;}
</script>
<body>
<p checked class="title" id='title'>Title</p>
<!-- here goes the rest of the page -->
</body>
WP Code Highlight.jsを導入するメリット
WP Code Highlight.jsを導入するメリットは以下になります。
- ソースコードを表示できるようになる
- 軽い、早い、操作が簡単
- デザインが豊富（背景・文字色の変更可能）
特別な知識が無くても、簡単に記事内にソースコードが表示できるようになるので、非常に便利なプラグインです。前述した「Gist」のような面倒な登録作業が無いのもメリットと言えるでしょう。
また、便利なプラグインであっても、動作が重ければ何の意味もありませんが、WP Code Highlight.jsは非常に軽くサクサク動くのでおすすめです。
どのくらい軽いのかについては、動作速度を検証しているマニアック 技術的なブログが結構あるので、そちらを参考にしてみてくださいね。
WP Code Highlight.jsをインストール
プラグインのインストール方法については下の記事で紹介していますので、参考にしてください。
なお、検索ワードは「WP Code Highlight.js」と入力し、下図を目印にしてくださいね。
インストールが完了したら「有効化」をクリックしてください。
WP Code Highlight.jsの設定
さてさて、プラグインを有効化にしたら設定を行いましょう。
まずは、WordPressの管理画面から、「設定」→「WP Code Highlight.js」の順に操作して、WP Code Highlight.jsの設定画面を表示してください。
ここでは、以下の6つの設定を行うので「面倒だな・・・」と感じるかもしれませんが、それぞれの項目では大したことはしないのでサクサク進めていきましょう。
- CDNの設定
- Packageの設定
- Color Schemeの設定
- Highlight.js Optionの設定
- You can add some additional CSS rules for better display:の設定
- Enable [code]code content …[/code] supportの設定
CDNの設定
ここでは、ページの表示速度を高速化する設定を行います。
コンテンツ・デリバリー・ネットワーク（CDN）の略です。詳しい説明をすると2時間くらい必要になりますので何も考えずに「Public CDN:cdnjs(highlightjs.org recommend)」を選択してください。
ウェブコンテンツをめっちゃ早く配信してくれる（最適化）
Packageの設定
ここでは、表示するソースコードの言語を選択します。
よほどマニアックな言語を使っていない限り「Common」を選択しておけば問題ありません。
Color Schemeの設定
ここでは、エディタのデザインを選択します。
この記事の上の方にWP Code Highlight.jsを使った例としてソースコードを表示していますが、あのデザインはここで変更できます。
デザインのサンプルについては、highlight.js demoの「Style」に候補がありますので、クリックして確認してみてください。
僕は、なんとなくカッコいいという理由で「arta」というデザインを採用しました。
Highlight.js Optionの設定
デフォルトのままで問題ありません。
You can add some additional CSS rules for better display:の設定
デフォルトのままで問題ありません。
Enable [code]code content …[/code] supportの設定
ここでは、ショートコード使うか使わないかを設定します。
チェックを入れると、ソースコードを[code][/code]で囲むと、WP Code Highlight.jsを使えるようになるのですが、大したメリットではないのでお好みでチェックを入れてください。
最後に「Save」をクリックすると設定が反映されます。お疲れ様でした！
以上で設定が完了しましたので、実際にWP Code Highlight.jsを使ってみましょう。
WP Code Highlight.jsを使ってみよう
それでは、さっそくWP Code Highlight.jsを使ってソースコードを表示してみましょう。
WP Code Highlight.jsを使ってソースコードを表示する方法は「htmlタグを使う方法」と「ショートコードを使う方法」の2種類ありますので、ぞれぞれについて説明していきますね。
- <pre><code>～～～</code></pre>
- [code]～～～[/code]
基本的には、～～～の部分を表示させたいソースコードに変更するればOKです。
使い方1：<pre><code>～～～</code></pre>
～～～の部分を表示させたいコードに変更します。
<title>Title</title>
<style>body {width: 500px;}</style>
<script type="application/javascript">
function $init() {return true;}
</script>
<body>
<p checked class="title" id='title'>Title</p>
<!-- here goes the rest of the page -->
</body>
HTMLなどで使われる特殊文字（&、"、<、>）は、文字実体参照（&、"、<、>）を実施してから利用してください。
ちなみに、以下のように表示させるソースコードの言語名を記述する方法もありますが、わざわざ言語名を記述しなくても自動判別してくれるので、この方法を使う必要はありません。
使い方2：[code]～～～[/code]
～～～の部分を表示させたいコードに変更します。
<title>Title</title>
<style>body {width: 500px;}</style>
<script type="application/javascript">
function $init() {return true;}
</script>
<body>
<p checked class="title" id='title'>Title</p>
<!-- here goes the rest of the page -->
</body>
HTMLなどで使われる特殊文字（&、"、<、>）は、文字実体参照（&、"、<、>）を実施してから利用してください。
こちらも、言語名を記述する方法がありますが、わざわざ言語名を記述しなくても自動判別してくれるので、この方法を使う必要はありません。
「使い方1」と「使い方2」の違い
WP Code Highlight.jsの「使い方1」と「使い方2」では、文字間隔に違いがありました。
なので、ぴっちりとコードを表示させたい場合は「使い方1（HTMLタグを使う方法）」を選択すればいいですし、ゆったりとコードを表示させたい場合は「使い方2（ショートコードを使う方法）」を選択すればいいですね。
僕は、ぴっちり表示させる方が好きなので「使い方1（HTMLタグを使う方法）」派です（笑）
プラグインを増やしたくない場合は「Gist」がオススメ
無駄にプラグインを増やすのは嫌！
そんな時は「Gist」という外部サービスを利用すると、プラグインなしで綺麗にソースコードを表示することができますのでおすすめです。
最近のコメント