コードをハイライト表示させるプラグイン「WP Code Highlight.js」の使い方

WP Code Highlight.jsの概要

概要

WP Code Highlight.jsを利用することでソースコードをハイライトさせ見栄え良く表示させることが可能になる。

SyntaxHighlighterよりもHighlight.jsのほうがシンプルで動作も速いらしい。

そのためWP Code Highlight.jsの動作も速いはず。

動作サンプル

#include <stdio.h>

int main(void)
{
	printf("Hello, world");
	return 0;
}

WP Code Highlight.jsの設定

WP Code Highlight.jsをインストールし、プラグインを有効化したら、「設定」>「WP Code Highlight.js」に設定画面が追加される。

WP Code Highlight.js 設定の場所

変更を加えたら保存を忘れないこと。

対応言語の設定

対応させたい言語が「Package」の「Common」に含まれていないなら「Custom」にして必要な言語にチェックを入れる。

なお、「Common」のままでは他の言語にチェックを入れることはできない。

「Custom」にしても「Common」に含まれる言語のチェックを外すこともできない。

色の設定

「Color Scheme」の項目で色を設定できる。

基本的にデフォルトのままで問題ないだろう。

もちろん好きな設定でも構わない。

デフォルトよりもVsのほうが見やすいかもしれない。

色の設定の一覧はHighlight.jsのサイトにあるデモで確認できる。

https://highlightjs.org/static/demo/

WP Code Highlight.jsの使い方

言語を自動判別させる

<pre><code> </code></pre>

上記のタグで囲まれた範囲に適用される。

記事を書く際にタグの埋め込みを忘れないこと。

デフォルトでは自動的に言語を判別するが、任意に指定したほうが正確だろう。

手を抜かないほうが安心だ。

言語を指定する

<pre><code class="html"> </code></pre>

上記のようにclassで言語を指定できる。

classの指定の詳細は次のURLで確認できる。

http://highlightjs.readthedocs.org/en/latest/css-classes-reference.html

毎回参照するのは面倒なので、自分が使いそうなものだけメモをしておいたほうがいいだろう。

言語とalias

個人的に使いそうなaliasをまとめてみた。

言語名 alias
C# cs, csharp
C++ cpp, c, cc, h, c++, h++, hpp
CSS css
HTML, XML xml, html, xhtml, rss, atom, xsl, plist
JavaScript javascript, js, jsx
PHP php, php3, php4, php5, php6

ハイライトさせない方法

何も指定しなければ自動的に言語が判別されハイライトされてしまう。

ハイライトさせないためには次のようにnohighlightと指定すること。

<pre><code class="nohighlight"> </code></pre>

プラグイン外でのデザインのカスタマイズ

デザインが気に入らない場合、WordPressのテーマをカスタマイズすることで解決できるかもしれない。

テーマのCSSファイルで<pre>タグを設定を見直すこと。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です