WordPress:Prism.jsでいろいろな表示

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&gt;" 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>

まとめ

これ以外にも、プラグインでいろんな表示ができそうです。詳しくは、以下のリンクから公式ホームページを参照してみてください。

http://prismjs.com/

スポンサーリンク