ソースコードを表示するプラグイン「WP Code Highlight.js」

スポンサーリンク

WP Code Highlight.jsとは

WP Code Highlight.js」プラグインは、ソースコードを整形して表示してくれるプラグインです。今まではGitHubで表示していたのですが、少ないソースコードのために細切れで登録するのが面倒くさくなったので、代わりになりそうなプラグインを探してみました。

WP Code Highlight.jsのインストール

「WP Code Highlight.js」プラグインのインストール方法は他のプラグインと同じです。
「プラグイン」->「新規追加」をクリックし、「WP Code Highlight.js」で検索します。
「WP Code Highlight.js」が表示されたら、「今すぐインストール」ボタンをクリックしてインストールします。インストール完了後に「有効化」ボタンをクリックすれば、使用できるようになります。

WP Code Highlight.jsの設定

「WP Code Highlight.js」の設定ですが、私の場合は下記の2つを変更しました。

【CDN】
Public CDN:cdnjs(highlightjs.org recommend)
おすすめらしいので、これに設定しています。

【Color Scheme】
好きなテーマを選択します。
私の場合は「Atelier Dune Dark」を選択しました。
それぞれのテーマのデモは下記のリンクで確認できます。

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

WP Code Highlight.jsの使い方

記事投稿時にソースコード部分を「<pre><code>ソースコード</code></pre>」と記述すると下記のように表示されます。

using UnityEngine;

public class NewBehaviourScript : MonoBehaviour
{

	// Use this for initialization
	void Start ()
    {
	}
	
	// Update is called once per frame
	void Update ()
    {
	}
}

まとめ

他に似たようなプラグインは色々あったのですが、このプラグインの動作が一番軽かったので、これに決めました。見た目はシンプルですが、簡単に使用できていい感じです。

参考URL

WP Code Highlight.js – WordPress
https://ja.wordpress.org/plugins/wp-code-highlightjs/

検証環境

Windows 10 Pro
WordPress 4.9
WP Code Highlight.js 0.6.2