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がハイライトされます。