SyntaxHighlighterで行番号表示等のオプションを設定する方法

カスタマイズ
スポンサーリンク

どうも、kazuです。
「SyntaxHighlighter」はソースコードをきれいに表示するだけではなく、タイトルの設定や行番号の非表示、開始行番号の指定などのオプションを設定することができます。
今回は、「Blogger」でのオプション設定の方法をご紹介します。

スポンサーリンク

2種類の適用方法

全てのソースコードまたは特定のソースコードのどちらに適用するかはオプションコードの記述する場所によって違いますので、目的に応じて選択下さい。

全てのソースコードに適用

1. Blogger管理画面「テンプレート」→「HTMLの編集」を選択

2. ”SyntaxHighlighter.all();”のすぐ上にコードを貼り付ける
※この方法で記述すると、有無を言わさず全てのソースコードに設定が適用されます。

【記述例】
<script type=”text/javascript”>
SyntaxHighlighter.defaults[‘オプションの項目’] = 値;
SyntaxHighlighter.all();
</script>

 

特定のソースコードに適用

1. 投稿エディタで本文にコードを記述後、「HTML」を選択

2. ソースコードの前に「<pre ~」、後ろに「</pre>」を入力

※記述言語は例として「css」を選択してます

【記述例】
<pre class=”brush:css; オプションの項目:値 “>
●●●●●●●●●●(←ソースコード)
</pre>
※記述言語の後ろの「;」は半角スペースに置き換えても適用されます。

 

スポンサーリンク

デフォルトの表示

オプションを何も設定していな場合、下の図のように表示されます。

 

スポンサーリンク

タイトルを設定する 《title》

ソースコードの上部に「タイトル」を設定することができます。

【全てのソースコードに適用】
<script type=”text/javascript”>
SyntaxHighlighter.defaults[‘title’] = “ここにタイトルを入力”;
SyntaxHighlighter.all();
</script>

【特定のソースコードに適用】
<pre class=”brush:css; ” title=”ここにタイトルを入力”>
●●●●●●●●●●(←ソースコード)
</pre>
※ご注意
「title」はclass属性の外(記述言語の後ろのダブルクォーテーション「”」の後)に追記ください。

スポンサーリンク

ツールバーを非表示にする 《toolbar》

右上の「?」を非表示にすることができます。

【全てのソースコードに適用】
<script type=”text/javascript”>
SyntaxHighlighter.defaults[‘toolbar’] = false;
SyntaxHighlighter.all();
</script>

【特定のソースコードに適用】
<pre class=”brush:css; toolbar:false”>
●●●●●●●●●●(←ソースコード)
</pre>

スポンサーリンク

行番号を非表示にする 《gutter》

ソースコードの左側にある「行番号」を非表示にすることができます。

【全てのソースコードに適用】
<script type=”text/javascript”>
SyntaxHighlighter.defaults[‘gutter’] = false;
SyntaxHighlighter.all();
</script>

【特定のソースコードに適用】
<pre class=”brush:css; gutter:false”>
●●●●●●●●●●(←ソースコード)
</pre>

スポンサーリンク

開始番号(行番号)を指定する 《first-line》

行番号の開始番号を指定することができます。
(下の例では行番号が「15」から始まるように指定しています)

【全てのソースコードに適用】
<script type=”text/javascript”>
SyntaxHighlighter.defaults[‘first-line’] = 15;
SyntaxHighlighter.all();
</script>

【特定のソースコードに適用】
<pre class=”brush:css; first-line:15″>
●●●●●●●●●●(←ソースコード)
</pre>

スポンサーリンク

指定の行を強調する 《highlight》

指定の行を強調(ハイライト表示)することができます。
(下の例では「4」行目、複数行「4,6,7」行目を強調するように指定しています)

【全てのソースコードに適用】
※1行のみの場合
<script type=”text/javascript”>
SyntaxHighlighter.defaults[‘highlight’] = 4;
SyntaxHighlighter.all();
</script>

※複数行の場合
<script type=”text/javascript”>
SyntaxHighlighter.defaults[‘highlight’] = [4,6,7];
SyntaxHighlighter.all();
</script>

【特定のソースコードに適用】
※1行のみの場合
<pre class=”brush:css; highlight:4″>
●●●●●●●●●●(←ソースコード)
</pre>

※複数行の場合
<pre class=”brush:css; highlight:[4,6,7]”>
●●●●●●●●●●(←ソースコード)
</pre>

スポンサーリンク

ソースコードの折りたたむ・展開する 《collapse》

ソースコードを折りたたんで隠すことができます。

【全てのソースコードに適用】
<script type=”text/javascript”>
SyntaxHighlighter.defaults[‘collapse’] = true;
SyntaxHighlighter.all();
</script>

【特定のソースコードに適用】
<pre class=”brush:css; collapse:true”>
●●●●●●●●●●(←ソースコード)
</pre>

折りたたんだ状態の「メッセージ」を変更

何もしていない場合は「expand source」が表示されますが、その部分を変更することができます。

【全てのソースコードに適用】
<script type=”text/javascript”>
SyntaxHighlighter.config.strings.expandSource = “ここをクリックするとコード表示”;
SyntaxHighlighter.all();
</script>

【特定のソースコードに適用】
<pre class=”brush:css; collapse:true” title=”ここをクリックするとコード表示”>
●●●●●●●●●●(←ソースコード)
</pre>

スポンサーリンク

〜番外編~

ソースコードの背景色を変更する

表示されたソースコードの背景色を変更することができます。
ここでは、奇数行・偶数行を同じ色で表示する方法と異なる色で表示する方法をご紹介します。
1. Blogger管理画面「テンプレート」→「カスタマイズ」を選択

2.「上級者向け」→「CSSの追加」を選択

3. 下のコードを記述欄にコピー&ペースト→右上の「ブログに適用」を選択
※「line.alt1」は偶数行、「line.alt2」は奇数行です。お間違えなく!

奇数行・偶数行を同じ色で表示

↓貼り付けるコード
.syntaxhighlighter .line.alt1 {

background-color: #dcdcdc !important;
}
syntaxhighlighter .line.alt2 {
background-color: #dcdcdc !important;
}

奇数行・偶数行を異なる色で表示

↓貼り付けるコード
.syntaxhighlighter .line.alt1 {
background-color: #dcdcdc !important;
}
.syntaxhighlighter .line.alt2 {
background-color: #ffffff !important;
}

スポンサーリンク

さいごに

「SyntaxHighlighter」を使ってコードをきれいに表示するだけではなく、オプションの設定により、いろいろな場面・用途に応じて使い分けることができます。
ぜひ、試してみてください!!

最後まで読んでいただき、ありがとうございましたm(_ _)m
それではまた~!

コメント