WordPressでコマンドやコードを色分けして表示したいなら「Prism.js」がおススメ

WordPressでコマンドやコードを色分けして表示したいなら「Prism.js」がおススメ

WordPressで記事を作成するとき、コマンドやソースコードを色分けして表示(シンタックスハイライト)したいときがあります。

そのようなとき、シンタックスハイライトできるプラグインを導入するのがよくあるパターンですが、プラグインを導入する方法は、サイトの表示速度が遅くなってしまうことがあります。

そこでおススメしたいのが、軽量かつ多機能でWordPressへの導入も簡単なシンタックスハイライター「Prism.js」です。

ここではWordPress環境への「Prism.js」の導入方法や使い方を紹介します。

「Prism.js」とは

WordPressでコマンドやコードを色分けして表示したいなら「Prism.js」がおススメ

Prism

「Prism.js」は、軽快な動作と多機能さに特徴のある、シンタックスハイライトができるJavaScriptライブラリです。

主な機能としては、行番号表示・指定行のハイライト・ツールバーの表示などがあり、これ以外にも豊富な機能が用意されています。

Prism.jsを使った時の表示は、以下のようになります。

h1 {
border-bottom: solid 3px black;
/*線の種類(実線) 太さ 色*/
}

「Prism.js」の導入方法

導入方法は、WordPressのプラグインに比べると一手間かかりますが、以下の流れで導入できます。

公式ダウンロードサイトへアクセス

まず、上記の公式サイトへアクセスし、サイト上部の「Download」ボタンをクリックします。

WordPressでコマンドやコードを色分けして表示したいなら「Prism.js」がおススメ

すると、以下のようなカスタマイズ画面が表示されるので、各設定項目を順に設定します。

WordPressでコマンドやコードを色分けして表示したいなら「Prism.js」がおススメ

Compression level:圧縮レベルの選択

高度なカスタマイズをする予定がない限り、「Minified version」のままでOKです。

Themes:テーマを選択

ベースとなるデザインを、8種類用意されているのテーマから選びます。(各テーマのリンクをクリックすれば、デザインを確認できます。)

また、好みのテーマがなくても、CSSを編集すれば後からデザインのカスタマイズも可能です。

Languages:使用言語を選択

よく使う言語にチェックを入れます。

ちなみに、私は以下を選択しました。

  • Markup
  • CSS
  • C-like
  • JavaScript
  • Bash
  • Batch
  • PHP
  • PowerShell
  • Vim

Plugins:追加機能を選択

追加したい機能を選択します。

ちなみに、私は以下を選択したました。

  • Line Numbers
  • Show Language
  • Toolbar
  • Command Line

プラグインはたくさん用意されており、各プラグインのリンクをクリックすると、機能について説明したページが表示されるので、どんな機能か想像がつくと思います。

ファイルのダウンロード

ここまでの設定を終えたら、ページ下部に表示されている「Download JS」と「Download CSS」をそれぞれクリックして、JSファイルとCSSファイルをダウンロードします。

WordPressでコマンドやコードを色分けして表示したいなら「Prism.js」がおススメ

WordPress環境にファイルをアップロード

ダウンロードした二つのファイルを、テーマディレクトリ(子テーマがある場合は、子テーマディレクトリ)直下にアップロードします。

アップロードができたら、ファイルを呼び出す記述を「functions.php」に追記してください。

function my_prism() {
    wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/prism.css' );
    wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/prism.js', array('jquery'), '1.9.0', true );
   }
add_action('wp_enqueue_scripts', 'my_prism');

これで、Prism.jsが利用できるようになりました。

「Prism.js」を使った表示例

「Prism.js」を使った表示例をいくつか紹介します。

CSS(行番号あり)

表示:

h1 {
border-bottom: solid 3px black;
/*線の種類(実線) 太さ 色*/
}

コード:

<pre class="line-numbers"><code class="language-css">h1 {
border-bottom: solid 3px black;
/*線の種類(実線) 太さ 色*/
}</code></pre>

コマンドライン(出力表示なし)

表示:

cd /usr/local/etc
cp php.ini php.ini.bak
vi php.ini

コード:

<pre class="command-line language-bash" data-user="root" data-host="mysv"><code class=" language-bash">/usr/local/etc
cp php.ini php.ini.bak
vi php.ini</code></pre>

コマンドライン(出力表示あり)

表示:

pwd
/usr/home/hoge/bin
ls -la
total 2
drwxr-xr-x   2 chris  chris     11 Jan 10 16:48 .
drwxr--r-x  45 chris  chris     92 Feb 14 11:10 ..
-rwxr-xr-x   1 chris  chris    444 Aug 25  2013 backup
-rwxr-xr-x   1 chris  chris    642 Jan 17 14:42 deploy

コード:

<pre class="command-line language-bash" data-user="hoge" data-host="mysv" data-output="2, 4-8"><code class=" language-bash">pwd
/usr/home/hoge/bin
ls -la
total 2
drwxr-xr-x   2 hoge  hoge     10 Jan 10 16:48 .
drwxr--r-x  45 hoge  hoge     95 Feb 20 13:10 ..
-rwxr-xr-x   1 hoge  hoge    444 Aug 25  2013 backup
-rwxr-xr-x   1 hoge  hoge    642 Jun 17 14:42 deploy</code></pre>

PowerShell(出力表示あり)

表示:

dir


    Directory: C:Usershoge


Mode                LastWriteTime     Length Name
----                -------------     ------ ----
d-r--        10/14/2015   5:06 PM            Contacts
d-r--        12/12/2015   1:47 PM            Desktop
d-r--         11/4/2015   7:59 PM            Documents
d-r--        10/14/2015   5:06 PM            Downloads
d-r--        10/14/2015   5:06 PM            Favorites
d-r--        10/14/2015   5:06 PM            Links
d-r--        10/14/2015   5:06 PM            Music
d-r--        10/14/2015   5:06 PM            Pictures
d-r--        10/14/2015   5:06 PM            Saved Games
d-r--        10/14/2015   5:06 PM            Searches
d-r--        10/14/2015   5:06 PM            Videos

コード:

<pre class="command-line language-powershell" data-prompt="PS C:Usershoge&gt;" data-output="2-19"><code class=" language-powershell">dir


    Directory: C:Usershoge


Mode                LastWriteTime     Length Name
----                -------------     ------ ----
d-r--        10/14/2015   5:06 PM            Contacts
d-r--        12/12/2015   1:47 PM            Desktop
d-r--         11/4/2015   7:59 PM            Documents
d-r--        10/14/2015   5:06 PM            Downloads
d-r--        10/14/2015   5:06 PM            Favorites
d-r--        10/14/2015   5:06 PM            Links
d-r--        10/14/2015   5:06 PM            Music
d-r--        10/14/2015   5:06 PM            Pictures
d-r--        10/14/2015   5:06 PM            Saved Games
d-r--        10/14/2015   5:06 PM            Searches
d-r--        10/14/2015   5:06 PM            Videos</code></pre>

あとがき

WordPressでコマンドやコードを分かりやすく色分けして表示したいときの実現方法として「Prism.js」も選択肢として十分におススメできます。

お試しあれ。

記事が役立ったらシェアしてくれるとうれしいです。

あなたにおすすめのコンテンツ
トップへ戻る