コード表をSyntaxHighlighterからprism.jsに置き換えたので、prism.jsの書式とか言語の指定方法とか、prism.jsの使い方についてマニュアル代わりに覚書。
prism.jsの基本書式
prism.jsの基本的な書式は以下の通り。
<pre><code> ～ プログラム ～ </code></pre>
<pre>タグや<code>タグ内にオプションといて行番号表示や言語指定などを追加する。
行番号表示の指定
行番号の表示/非表示、開始行番号の指定、任意の行番号のハイライト表示方法について以下に記載します。
行番号の表示
行番号を表示する場合。
<script>
document.write("Hello world!!");
</script>
実際のhtmlは以下の通り。
<pre class="line-numbers"><code class="language-js"><script>
document.write("Hello world!!");
</script>
</code></pre>
<pre>タグ内に「class="line-numbers"」を指定することで行番号が自動的に振られます。
コード内の"<"などの特殊文字は、"<"などのコードで記載する必要があります。
特殊文字の変換は、もとのテキストを貼り付ければボタン一発で変換してくれる便利なサイトがあるので利用してみてください。
一つ一つちまちま書き直すのは面倒だし非効率なので。
特殊文字を簡単に変換してくれるサイト
参考までに2つのサイトを紹介します。
行番号を表示しない
行番号を表示したくない場合は、「class="line-numbers"」を指定しなければよいです。
<script>
document.write("Hello world!!");
</script>
実際のhtmlは以下の通り。
<pre><code class="language-js"><script>
document.write("Hello world!!");
</script>
</code></pre>
行番号を任意の番号から開始
行番号を任意の番号から振りたい、例えば最初の行番号を"5"から始めたい場合は、<pre>タグ内に「 class="line-numbers" data-start="X"」(Xは任意の行番号)を指定します。
<script>
document.write("Hello world!!");
</script>
実際のhtmlは以下の通り。
<pre class="line-numbers" data-start="5"><code class="language-js"><script>
document.write("Hello world!!");
</script>
</code></pre>
任意の行をハイライト表示する
任意の行をハイライト表示して強調したい場合は、<pre>タグ内に「data-line="X"」を指定します。
<script>
document.write("Hello world!!");
</script>
実際のhtmlは以下の通り。
<pre class="line-numbers" data-line="2"><code class="language-js"><script>
document.write("Hello world!!");
</script>
</code></pre>
例えば、行番号を任意の番号から開始して、かつ任意の行をハイライト表示したい場合は、「data-start」と「data-line」を組み合わせればよいです。
<script>
document.write("Hello world!!");
</script>
実際のhtmlは以下の通り。
<pre class="line-numbers" data-start="5" data-line="6"><code class="language-js"><script>
document.write("Hello world!!");
</script>
</code></pre>
連続した行をハイライト表示したい場合、例えば1行目と2行目をハイライト表示したいときは、「data-line="X-Y"」と指定すればよいです。
<script>
document.write("Hello world!!");
</script>
実際のhtmlは以下の通り。
<pre class="line-numbers" data-line="1-2"><code class="language-js"><script>
document.write("Hello world!!");
</script>
</code></pre>
連続していない複数の行をハイライト表示したい場合は、「data-line="X,Y"」という感じでカンマ","で区切ってハイライト表示したい行番号を指定します。
例えば、1行目と3行目をハイライト表示したいとか。
<script>
document.write("Hello world!!");
</script>
実際のhtmlは以下の通り。
<pre class="line-numbers" data-line="1,3"><code class="language-js"><script>
document.write("Hello world!!");
</script>
</code></pre>
連続する行と別の行をハイライト表示したい場合、例えば2行目、3行目と5行目とかは、「data-line="X-Y,Z"」という感じで指定すればよいです。
<script>
var x ;
x = 10 * 2;
document.write(x);
</script>
実際のhtmlは以下の通り。
<pre class="line-numbers" data-line="2-3,5"><code class="language-js"><script>
var x ;
x = 10 * 2;
document.write(x);
</script>
</code></pre>
プログラム言語の指定方法
prism.jsは、言語を指定してあげるとその言語に合わせてプロパティやメソッドなどの予約文字列を色分けして表示してくれます。
言語の指定は、<code>タグ内で「class="language-言語を表す文字列"」という感じで指定すればよいです。
例えばCSSのサンプルコードを表示する場合は、「<code class="language-css">」といった感じです。
#side h3:before {
background-color: #C2E8F6; /* 線色 */
border-radius: 5px; /* 線幅の半分 */
content: "";
display: inline-block;
height: 40px; /* 線の長さ */
margin-right: 15px; /* 線右の余白 */
vertical-align: middle;
width: 10px; /* 線幅 */
}
実際のhtmlは以下の通り。
<pre class="line-numbers"><code class="language-css">#side h3:before {
background-color: #C2E8F6; /* 線色 */
border-radius: 5px; /* 線幅の半分 */
content: "";
display: inline-block;
height: 40px; /* 線の長さ */
margin-right: 15px; /* 線右の余白 */
vertical-align: middle;
width: 10px; /* 線幅 */
}
</code></pre>
各言語を表す文字列
「language-」の後に指定する各言語を表す文字列の一覧表を以下に記載します。
記載しているのは私が主に使用する言語だけなので、実際にはもっとたくさんあります。
| 言語種類 | 「language-」指定時の文字列 |
| B | |
| Bash | bash, shell |
| BASIC | basic |
| Batch | batch |
| C | |
| CSS | css |
| E | |
| Excel Formula | excel-formula, xlsx, xls |
| J | |
| Java | java |
| JavaScript | javascript, js |
| M | |
| Markup | markup, html, xml, svg, mathml, ssml, atom, rss |
| P | |
| PHP | php |
| PowerQuery | powerquery, pq, mscript |
| PowerShell | powershell |
| Python | python, py |
| S | |
| SQL | sql |
| V | |
| VB.Net | vbnet |
| Visual Basic | visual-basic, vb, vba |
この表に記載されていない言語の指定文字列は、prism.jsの公式ページを参照してください。
ショートコードに登録して便利に使う
AddQuickタグプラグインなどを利用して予め使用するprism.jsの書式を登録しておくと、ボタン一発で記事内に挿入しくれるのでとても便利です。
例えば、コードを記事に載せるときはだいたい行番号つけて言語はJavaScriptなんだよなぁって場合は、prism.jsの書式を定型文やショートコードに登録しておけばよいです。
私が使用しているWordPressのテーマ「ルクセリタス(Luxeritas)」は、テーマの機能として「定型文」の登録ができます。
定型文に登録しているとこんな感じでprism.jsのよく使う書式を一発で呼び出すことができます。
まずエディタを[テキスト]モードにして、ツールバーから[定型文]をクリック。
こんなふうに予め登録しておいた定型文の一覧が出てくるので使用したい定型文をクリック。
prism.jsのタグが挿入される。
便利でしょ？
定型文の機能がない場合は、ショートコードという機能を使って同じようなことができます。
ショートコードの登録は、AddQuicktagとかTinyMCE Templateなどのプラグインを使うと簡単に安全にショートコードの登録、利用ができます。
プラグインの詳細についてはこの記事には書きませんが、たくさんの人が記事にしているのでそれを参考にしてみてください。
コメント