Prism.jsでのコードハイライト方法のご紹介です。
ちなみに、Prism.jsの導入方法は、こちらで紹介しています。
WordPress：シンタックスハイライトするならPrism.js
WordPressでソースコードを色分けして表示（シンタックスハイライト）するプラグインとして人気が高いのが「Crayon Synt...
目次
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:\Users\hoge
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:\Users\hoge>" data-output="2-19"><code class=" language-powershell">dir
Directory: C:\Users\hoge
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>あとがき
これ以外にも、プラグインでいろんな表示ができそうです。詳しくは、以下のリンクから公式ホームページを参照してみてください。
