はじめに
バッチファイルやSQL文などのソースコードをそのまま記事に掲載するとわかりにくいので、当ブログではシンタックスハイライトが使用できる「Prism.js」を使用しています。
基本的な書き方や具体的な書き方などをご紹介します。
「Prism.js」の導入方法は下記をご参照ください。
-
-
シンタックスハイライト「Prism.js」の導入方法
続きを見る
Prism.jsの使い方
シンタックスハイライトしたいソースコードをタグで囲むだけでOKです。
codeタグのclassには「language-xxxxx」の形式でシンタックスハイライトする言語名を指定します。
<pre>
<code class="language-言語名">
表示したいソースコード
</code>
</pre>CSSのソースコードを表示する場合は下記のように記述します。
<pre><code class="language-css">p { color: red }</code></pre>シンタックスハイライトするとこのようになります。
p { color: red }下記のリンクから言語の指定文字列やサンプルを確認することができます。
-
-
Prism : Examples
prismjs.com
HTML言語をハイライトする
今回の紹介記事のようにHTML言語のソースコードを掲載したい場合は、codeタグのclassに[language-markup]と記載します。
<pre class="line-numbers">
<code class="language-markup">
表示したいソース
</code>
</pre>行番号を表示する
preタグのclassに[line-numbers]を追記すると行番号が表示されます。
既に他のclassを使用している場合は、半角スペース区切りで複数のclassを指定可能です。
<pre class="line-numbers">
<code class="language-言語名">
表示したいソース
</code>
</pre>開始する行番号を指定する
行番号を表示する際にpreタグに追加した[line-numbers]の後ろに[data-start="開始する行番号"]を追記すると開始番号を指定することができます。
<pre class="line-numbers" data-start="7">
<code class="language-言語名">
表示したいソース
</code>
</pre>指定行をハイライトする
preタグのclassに[data-line]を追記するとハイライト表示されます。
<pre class="line-numbers" data-line="1,3-4">
<code class="language-言語名">
表示したいソース
</code>
</pre>"1,3-4"：1行目、3～4行目をハイライト
コマンドライン表示する
preタグのclassに[command-line]を追加するとコマンドラインとして表示されます。
<pre class="command-line">
<code class="language-言語名">
表示したいソース
</code>
</pre>シンタックスハイライトするとこのようになります。
pwd
/home/sysuser行番号でコマンド出力結果を指定する
このままでは出力結果もコマンドとして表示されてしまうので出力結果部分を行番号で指定してコマンド表示から除外します。
preタグに[data-ouput]属性を追加して出力結果の行番号を指定します。
<pre class="command-line" data-output="2,4-7"><code class="language-bash">pwd
/home/sysuser
ls -l
total 17376
drwxrwxr-x 3 sysuser sysuser 4096 Jan 7 08:58 backup
-rw-rw-r-- 1 sysuser sysuser 17782444 Dec 9 14:00 latest-ja.tar.gz
drwxr-xr-x 5 sysuser sysuser 4096 Dec 21 14:03 wordpress</code></pre>上記の例をシンタックスハイライトするとこのようになります。
pwd
/home/sysuser
ls -l
total 17376
drwxrwxr-x 3 sysuser sysuser 4096 Jan 7 08:58 backup
-rw-rw-r-- 1 sysuser sysuser 17782444 Dec 9 14:00 latest-ja.tar.gz
drwxr-xr-x 5 sysuser sysuser 4096 Dec 21 14:03 wordpressdata-output="2,4-7"：2行目、4～7行目を出力結果として表示
指定文字列でコマンド出力結果を指定する
行番号でコマンド出力装置を指定する方法では、コマンドを変更したり出力結果が変わって行が変わってしまうと行番号を都度変更しないといけません。
そこであらかじめ出力結果として表示する行の先頭に指定の文字列を設定してフィルターで判定することもできます。
フィルターする指定文字列はpreタグに[data-filter-output]属性を追加します。
<pre class="command-line" data-filter-output="(output)"><code class="language-bash">pwd
(output)/home/sysuser
ls -l
(output)total 17376
(output)drwxrwxr-x 3 sysuser sysuser 4096 Jan 7 08:58 backup
(output)-rw-rw-r-- 1 sysuser sysuser 17782444 Dec 9 14:00 latest-ja.tar.gz
(output)drwxr-xr-x 5 sysuser sysuser 4096 Dec 21 14:03 wordpress</code></pre>指定文字列はシンタックスハイライトされる際に削除されるので下記のように(output)は削除されて表示されます。
pwd
(output)/home/sysuser
ls -l
(output)total 17376
(output)drwxrwxr-x 3 sysuser sysuser 4096 Jan 7 08:58 backup
(output)-rw-rw-r-- 1 sysuser sysuser 17782444 Dec 9 14:00 latest-ja.tar.gz
(output)drwxr-xr-x 5 sysuser sysuser 4096 Dec 21 14:03 wordpressホスト名を指定する
コマンドライン表示する際に特に指定していしていない場合は"[user@localhost] $"と表示されます。
ホスト名、ユーザー名、プロンプトを指定することができるのでpreタグに追加します。
ホスト名を指定する場合はpreタグに[data-host]属性を追加します。
<pre class="command-line" data-host="ホスト名"><code class="language-bash"></code></pre>シンタックスハイライトで表示するとこのようになります。
pwd
(output)/home/sysuserユーザー名を指定する
ユーザー名を指定する場合はpreタグに[data-user]属性を追加します。
<pre class="command-line" data-user="ユーザー名"><code class="language-bash"></code></pre>シンタックスハイライトで表示するとこのようになります。
pwd
(output)/home/sysuserまた、ユーザー名を[root]とするとコマンドプロンプトが"#"に変化します。
pwd
(output)/home/sysuserプロンプトを指定する
プロンプトを指定する場合はpreタグに[data-prompt]属性を追加します。
<pre class="command-line" data-prompt="プロンプト"><code class="language-bash"></code></pre>シンタックスハイライトで表示するとこのようになります。
pwd
(output)/home/sysuserソースコード掲載時の注意点
HTMLやCSSなどのソースコードはそのまま掲載すると記事を表示する際にタグとして認識されるため実体参照変換を実施してください。
「<」は「<」、「>」を「>」に変換します。
手動で変更するのは手間なので下記のサイトを利用して変換すると便利です。
-
-
HTML実体参照変換
www.netyasun.com
-
-
AFINGER5で行番号がずれてしまうのを修正する方法
続きを見る
