2016071400

こんにちは、じょえずです。

Webページ上でソースコードを綺麗に表示するSyntaxHighlighter。

今回は知っておくと便利なカスタマイズ方法のいくつかを紹介していきます。

常に縦方向のスクロールバーが表示される問題

デフォルトだと下図のように常に縦方向にスクロールバーが表示されるようです

2016071407
それを解消するにはスタイルシートを少し修正します。shCoreDefault.cssの中のsyntaxhighlighterクラス本体の箇所にoverflow-yプロパティを下記の設定で追加します。

.syntaxhighlighter {
  overflow-y: hidden !important; /*縦スクロールバー消去*/
}

※IEで横方向のスクロールバーが出ると最終行が隠れるという問題が以前はあったようなのですが、現在は解消されているようです。

奇数行偶数行で色変える

こちらもスタイルシートを少し修正します。下記クラスのbackground-colorプロパティの色を変更します。デフォルトではwhiteとなっています。

※alt1が偶数行です。

.syntaxhighlighter .line.alt1 {
  background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}

タイトルをつける

こちらは実装する際のpreタグにタイトル属性を指定します

<pre class="brush:html" title="title属性でタイトルをつけます">
<p>
タイトルがあると便利
</p>
</pre>

こんな感じになります。

<p>
タイトルがあると便利
</p>

他言語のソースコードとHTMLを同時に表記する

HTML以外の言語を指定してから、半角スペースを空けて「html-script:true」と書けば、 両方とも色分けされます。(下記は、JavaScript と HTMLの例)

<pre class="brush:js html-script:true">
<p>たとえば、</p>
<script>
document.write('JavaScriptとHTMLを一緒に色分けして表示してます');
</script>
</pre>

行番号を表示させない

これは「gutter:false」を記述します。

<pre class="brush:html gutter:false">
<p>
gutter: false で行番号を非表示します。
</p>
</pre>

ソースコードをたたんでおき、クリックで表示させる

collapseをtrueにします。「expand source」というアンカーがでますので、それをクリックするとソースが現れます

<pre class="brush:html; collapse:true;">
<p>
「collapse: true;」でソースをたたみます。
</p>
</pre>

ソース内のリンクをはずす

ソース内にURLがあると、デフォルトでリンクを貼りますが、「auto-links:false」にすると、ソース内のリンクを無効にできます。

<pre class="brush:html">
http://joesbar.blog.jp/
</pre>
<pre class="brush:html auto-links:false">
http://joesbar.blog.jp/
</pre>

まとめ

全3回に渡って、Webページ上でソースコードを綺麗に表示するSyntaxHighlighterについて紹介してきました。

SyntaxHighlighterとはなにか、ダウンロード方法、使い方、テーマの切り替え、便利な使い方などなど、これだけ押さえておけば、あなたのサイトを玄人っぽく見せれるテクは網羅されていると思います。

じょえずブログも技術ブログらしく、今後もますますソースコードが踊っている記事を掲載していきます。それでは!