タグアーカイブ: WordPress

Prism.js シンタックス・ハイライトの記述方法

PRISM.JS 記述方法

PRISM.JS 記述方法

Prism.jsでシンタックス・ハイライトの活用

2020年4月、WordPressにPrism.jsを設置してソースコードなどをシンタックス・ハイライトしました。
ダウンロードと設置方法は、下記ブログを参照してください。

WordPress 素晴らしいシンタックス・ハイライト Prism.js

WordPress 特定のページのみPrism.jsでシンタックス・ハイライト

本ブログは、Prism.jsの記述方法について説明します。

Prism.jsの記述方法

Prism.jsは、<pre>タグで挟んだ<code>タグの中にシンタックス・ハイライトするソースコードを記述します。

言語の種類は、codeタグのclassに指定した「language-kind」（kindは、言語名）というクラスで指定します。


<pre><code class="language-kind" ...>
ソースコード本体
</code><pre>

例えば、次のように記述するとCSS定義をマークアップします。


<pre>
<code class="language-css">
h3 {
    margin:      2em 0 0.5em;
    background:  gainsboro;
}
</code>
</pre>

上記の記述は、次のように表示されます。


h3 {
    margin:      2em 0 0.5em;
    background:  gainsboro;
}

「language-kind」で指定する言語の一例を示します。

言語名 クラス指定
C language-c
C++ language-cpp
Javascript language-js
PHP language-php
HTML language-markup
CSS language-css
Git language-git

但し、使用する言語を選択してPrism.js公式サイトからダウンロードしておいてください。

言語選択

言語選択

行番号を表示

行番号を表示するには、「Line Numbers」プラグインが必要です。

preタグのclassにline-numberを指定すると行番号を表示します。


<pre class="line-numbers"><code ...>

例えば、次のように記述するとC言語に行番号を表示します。


<pre class="line-numbers">
<code class="language-c">
int fact(int na)
{
  int fv;
  if(na==0) { fv = 1; }
  else {
    fv = na * fact(na-1);
  }
  return (fv);
}
</code>
</pre>

上記の記述は、次のように表示されます。


int fact(int na)
{
  int fv;
  if(na==0) { fv = 1; }
  else {
    fv = na * fact(na-1);
  }
  return (fv);
}

行番号の開始番号を指定する場合は、preタグのdata-start属性で開始行番号nnnを指定します。


<pre class="line-numbers" data-start="nnn"><code ...>

data-start=”100″とすると、次のように表示されます。


int fact(int na)
{
  int fv;
  if(na==0) { fv = 1; }
  else {
    fv = na * fact(na-1);
  }
  return (fv);
}

行範囲を強調表示

行範囲を強調表示するには、「Line Highlight」プラグインが必要です。

preタグのdata-line属性で強調表示する行範囲nnnを指定します。


<pre class="line-numbers" data-line="nnn"><code ...>
  • 行範囲は、開始行と終了行をハイフンで区切ります。
  • 複数の行番号（行範囲）を指定する場合は、コンマで区切ります。

例えば、次のように記述するとC言語の1行目と5～7行目を強調表示します。


<pre class="line-numbers" data-line="1,5-7">
<code class="language-c">
int fact(int na)
{
  int fv;
  if(na==0) { fv = 1; }
  else {
    fv = na * fact(na-1);
  }
  return (fv);
}
</code>
</pre>

上記の記述は、次のように表示されます。


int fact(int na)
{
  int fv;
  if(na==0) { fv = 1; }
  else {
    fv = na * fact(na-1);
  }
  return (fv);
}

class=”line-numbers”を省略して行番号を表示しない場合は、次のように表示されます。


<pre data-line="nnn"><code ...>


int fact(int na)
{
  int fv;
  if(na==0) { fv = 1; }
  else {
    fv = na * fact(na-1);
  }
  return (fv);
}

コマンドライン表示

コマンドラインの表示には、「Command Line」プラグインが必要です。

基本的なコマンドライン

preタグのclassにcommand-lineを指定するとコマンドラインに適した表示となります。
言語の種類は、コマンドラインに適したものを選択します。例えば、”language-shell”などとします。


<pre class="command-line"><code class="language-shell">

例えば、次のように記述するとコマンドラインを表示します。


<pre class="command-line">
<code class="language-shell">
rm config.bak
cp config config.org
</code>
</pre>

上記の記述は、次のように表示されます。
コマンドプロンプト“[user@localhost] $”は、デフォルトの表示です。


rm config.bak
cp config config.org

ホスト名を指定

コマンドラインの左側に表示しているコマンドプロンプト“[user@localhost] $”は、デフォルトの表示です。preタグのdata-host属性でホスト名を変更できます。


<pre class="command-line" data-host="ホスト名"><code class="language-shell">

例えば、次のように記述するとホスト名を指定できます。


<pre class="command-line" data-host="myhost">
<code class="language-shell">
rm config.bak
cp config config.org
</code>
</pre>

上記の記述は、次のように表示されます。コマンドプロンプトは、[user@myhost]となります。


rm config.bak
cp config config.org

ユーザー名を指定

コマンドラインの左側に表示しているコマンドプロンプト“[user@localhost] $”は、デフォルトの表示です。preタグのdata-user属性でユーザー名を変更できます。


<pre class="command-line" data-user="ユーザー名"><code class="language-shell">

例えば、次のように記述するとユーザー名を指定できます。


<pre class="command-line" data-user="yuki">
<code class="language-shell">
rm config.bak
cp config config.org
</code>
</pre>

上記の記述は、次のように表示されます。コマンドプロンプトは、[yuki@localhost]となります。


rm config.bak
cp config config.org

ユーザー名を”root”とするとコマンドプロンプトが”#”に変わります。


rm config.bak
cp config config.org

プロンプトを指定

コマンドラインの左側に表示しているコマンドプロンプト“[user@localhost] $”は、デフォルトの表示です。preタグのdata-prompt属性でプロンプトを変更できます。


<pre class="command-line" data-prompt="プロンプト"><code class="language-shell">

例えば、次のように記述するとプロンプトを指定できます。


<pre class="command-line" data-prompt="yuki@host:~/data$">
<code class="language-shell">
rm config.bak
cp config config.org
</code>
</pre>

上記の記述は、次のように表示されます。
コマンドプロンプトは、[yuki@host:~/data$]となります。


rm config.bak
cp config config.org

コマンドプロンプトの表示抑止

コマンドラインの左側に表示しているコマンドプロンプト“[user@localhost] $”は、各行に表示します。コマンドからの出力がある場合は、preタグのdata-output属性でコマンドプロンプトの表示抑止行nnnを指定します。


<pre class="command-line" data-output="nnn"><code class="language-shell">
  • 行範囲は、開始行と終了行をハイフンで区切ります。
  • 複数の行番号（行範囲）を指定する場合は、コンマで区切ります。

例えば、次のように記述するとコマンドプロンプトを表示抑止します。


<pre class="command-line" data-output="2-6">
<code class="language-shell">
lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 18.04.4 LTS
Release:        18.04
Codename:       bionic
_
</code>
</pre>

上記の記述は、次のように表示されます。
コマンドプロンプトは、2行目から6行目について表示抑止します。


lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 18.04.4 LTS
Release:        18.04
Codename:       bionic
_

Prism.jsを使わないコマンドライン表示

Prism.jsでコマンドラインの表示を行えました。好みの問題ですが、私は昔のDOS風の黒い画面がお気に入りです。

preタグとcodeタグをクラスや属性なしで記述すると、Prism.jsのシンタックス・ハイライトは機能しません。


<pre><code>・・・

CSSを次のように定義して、preタグをDOSボックス風にします。


pre {
    margin: 1.0em 0.5em;
    padding: 5px;
    color:          lightgray;
    background-color: #444;
    border: 1px solid #ccc;
    border-radius:    0.5em;
}

例えば、次のように記述するとPrism.jsを使わずにコマンドラインを表示できます。


<pre>
<code>
$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 18.04.4 LTS
Release:        18.04
Codename:       bionic
</code>
</pre>

上記の記述は、次のように表示されます。


$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 18.04.4 LTS
Release:        18.04
Codename:       bionic