シンタックスハイライター(Prism)の使い方
■サイト内でソースコードを見やすくするシンタックスハイライター(Prism)の使い方を解説する
①「https://prismjs.com/」にアクセスし、ダウンロードボタンを押下
②「Themes」・「Languages」・「Plugins」で必要なものを選び「JS」と「CSS」をダウンロード
■おすすめのPlugins
・Line Highlight
⇒任意の行を強調(<pre data-line=”3″>)
・Line Numbers
⇒行数表示(<pre class=”line-numbers”>)
・Normalize Whitespace
⇒preタグやcodeタグの後に改行してからソースを記述してもインデントが揃い、行数表示も1行目からになる
・単純にハイライトするだけ
codeタグに「class=”language-言語名」を記述する
<pre>
<code class="language-言語名">
〇〇
</code>
</pre>
※言語名は「php」や「c」等
HTML の場合は「language-markup」と指定する
(「language-html」でも良いかも。。。)
・行番号を表示
preタグに「class=”line-numbers”」を記述する
<pre class="line-numbers">
<code class="language-言語名">
〇〇
</code>
</pre>
・指定した行の色を変える
preタグに「data-line=”行番号”」を記述する
3行目、7~10行目、18~20行目の色を変更する場合
<pre class="line-numbers" data-line="3,7-10,18-20">
<code class="language-言語名">
〇〇
</code>
</pre>
<注意点>
codeタグ内(〇〇の部分)は下記のとおり変換して記述すること
< ⇒ &lt; ※「less-than」の略
> ⇒ &gt; ※「greater-than」の略