SyntaxHighlighterでの表示を色々カスタマイズしてみる
- 投稿日：2021/10/22 ｜最終更新：2021/10/27
- JavaScript/jQuery
- SyntaxHighlighter
当サイトでも利用しているコードを色分けして表示するSyntaxHighlighterでソースを表示する際のカスタマイズを紹介します。
指定の行のみハイライト（背景色を変更）して表示する
HTMLコード例
<pre class="brush: html; highlight:[3,6]">
<div class="sample">
<p>この行をハイライトします</p>
</div>
<div class="sample">
<p>この行をハイライトします</p>
</div>
</pre>
preのclassにhighlight:[ハイライトしたい行を半角数字で半角コンマ区切り]にすると指定行をハイライトできます。
左上にタイトルを表示する
HTMLコード例
<pre class="brush: html;" title="タイトル属性でタイトルを追加">
<div class="sample">
<p>タイトルを表示します</p>
</div>
</pre>
preのtitleにタイトルを挿入すると左上にタイトルを表示できます。
行番号の開始時の数を変更する
<pre class="brush: html; first-line:10">
<div class="sample">
<p>行番号の開始時の数を10に変更する</p>
</div>
</pre>
preのclassにfirst-line:[開始したい行番号を半角数字]にすると指定行から行番号を開始します。
行番号を非表示にする
<pre class="brush: html; gutter:false">
<div class="sample">
<p>行番号が非表示になります。</p>
</div>
</pre>
preのclassにgutter:falseにすると行番号が非表示になります。
HTMLと他言語の両方を色分けして表示する
<pre class="brush: css; html-script:true">
<style>
body{
background: #f7f7f7;
}
</style>
<div class="sample">
<p>HTML以外の言語もハイライトします。</p>
</div>
</pre>
preのclassにbrushにHTML以外の言語を指定し、html-script:true;にすると指定した言語とhtmlがハイライトされます。
まとめ
Syntaxhighlighterを利用するとコードを綺麗に表示できます。
オプションを設定してより見やすく表示できるようになるので、ぜひ活用していきましょう。
