こんにちは、T田です。
前回は、シンタックスハイライトライブラリであるPrism.jsの基本的な使い方と、ダウンロードしたオプション（プラグイン）の使い方について説明しました。
今回は、残りのオプション（プラグイン）「Command Line」の使い方を説明します。
目次
１．はじめに
前提として、前々回と前回の内容を踏まえて話を進めます。
まだ読まれていない場合は、先にそちらを読んでいただくと今回の内容が理解しやすくなると思います。
２．UNIX風のコマンドライン
オプション（プラグイン）「Command Line」は、その名のとおりコマンドラインをハイライト表示する機能です。
UNIX風のコマンドラインとWindows風のコマンドラインを再現できますので、まずはUNIX風から説明します。
百聞は一見に如かずということで、まずはどのように表示されるのかを見てみましょう。
ls -l
合計 16
-rw-r--r--. 1 user group 582 1月 25 12:35 2016 csvTest.php
-rw-r--r--. 1 user group 109 1月 25 12:38 2016 out.csv
-rw-r--r--. 1 user group 119 1月 25 12:38 2016 test.csv
pwd
/home/user/work
このように表示させることができます。
上記は、HTML上では以下のように書かれています。
<pre class="command-line" data-user="user" data-host="localhost" data-output="2-5,7">
<code class="language-bash">ls -l
合計 16
-rw-r--r--. 1 user group 582 1月 25 12:35 2016 csvTest.php
-rw-r--r--. 1 user group 109 1月 25 12:38 2016 out.csv
-rw-r--r--. 1 user group 119 1月 25 12:38 2016 test.csv
pwd
/home/user/work</code>
</pre>
まず、<code>タグのclass属性にはlanguage-bashを指定します。
次にその外側の<pre>タグですが、属性を４つ指定しています。
・class属性：command-lineを指定
・data-user属性：プロンプトに表示されるユーザ名を指定
・data-host属性：プロンプトに表示されるホスト名を指定
・data-output属性：データ行を指定。ここに指定した行はプロンプト（[ユーザ名@ホスト名]）が表示されない
なお、data-user属性にrootを指定するとプロンプトの「$」が「#」になります。
ls -l
合計 16
-rw-r--r--. 1 user group 582 1月 25 12:35 2016 csvTest.php
-rw-r--r--. 1 user group 109 1月 25 12:38 2016 out.csv
-rw-r--r--. 1 user group 119 1月 25 12:38 2016 test.csv
pwd
/home/user/work
３．Windows風のコマンドライン
次に、Windows風のコマンドラインを説明します。
こちらもまずは見てみましょう。
dir
C:\Users のディレクトリ
2013/05/29 21:18 <DIR> .
2013/05/29 21:18 <DIR> ..
2013/05/29 21:18 <DIR> Public
2015/10/27 20:22 <DIR> user
0 個のファイル 0 バイト
4 個のディレクトリ 27,676,069,888 バイトの空き領域
上記は、HTML上では以下のように書かれています。
<pre class="command-line" data-prompt="C:\Users>" data-output="2-9">
<code class="language-powershell">dir
C:\Users のディレクトリ
2013/05/29 21:18 <DIR> .
2013/05/29 21:18 <DIR> ..
2013/05/29 21:18 <DIR> Public
2015/10/27 20:22 <DIR> user
0 個のファイル 0 バイト
4 個のディレクトリ 27,676,069,888 バイトの空き領域</code>
</pre>
まず、<code>タグのclass属性にはlanguage-powershellを指定します。
次にその外側の<pre>タグですが、属性を３つ指定しています。
・class属性：command-lineを指定
・data-prompt属性：プロンプトの文字列を指定
・data-output属性：データ行を指定。ここに指定した行はプロンプト文字列が表示されない
４．おわりに
今回は、Prism.jsのオプション（プラグイン）「Command Line」について説明しました。
これでPrism.jsの説明は以上です。また次のブログでお会いしましょう！
<スポンサーリンク>
- 投稿タグ
- HTML, Prism.js, シンタックスハイライト
