プログラミング逆引き辞典

~ 多言語対応のプログラミングレシピ ~

シンタックスハイライター(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」の略