Sabakura Blog

行番号の指定

SyntaxHighlighterでは、1行目の行番号を自由に指定することができます。
たとえばチュートリアル記事などの場合、「○○行目にコードを追加してください」といった手順を書くことがあると思います。このような際にSyntaxHighlighterでも行番号を合わせておくと、より分かりやすくなります。

行番号の指定は、CSSのclass名によって行います。
具体的には、preタグにclassを指定する際に「firstline」という属性および開始行番号を追加設定してます。

見本は以下の通りです。

<pre class="brush:html first-line:37">

上記のように設定すると、以下のように開始行番号が37行目になります。

<h2>記事タイトル</h2>
<h3>見出し1</h3>
<p>ここに記事本文。</p>
<p>ここに記事本文。</p>

ハイライトの指定

SyntaxHighlighterでは他にも便利な機能として、特定の行をハイライトして目立たせる機能があります。

これも行番号と同様に、「highlight」という属性をclassに指定することで行います。あわせて、[]内にハイライトしたい行番号をカンマ区切りで入力します。
なお、「first-line」で開始時の行番号を指定している場合には、ハイライトする行の番号もこれに合わせてください。

見本は以下の通りです。

<pre class="brush:html first-line:37 highlight:[38, 40]">

上記のように設定すると、以下のように38行目と40行目がハイライトされます。

<h2>記事タイトル</h2>
<h3>見出し1</h3>
<p>ここに記事本文。</p>
<p>ここに記事本文。</p>