ソースを読みやすく!「SyntaxHighlighter」の導入

「SyntaxHighlighter（シンタックスハイライター）」とは

HTML、CSS、JavaScriptなど様々な言語のソースコードをweb上でキレイに見せるためのツールのことです。CSSとJavaScriptで出来ています。
記述されたソースコードを一括コピーすることが出来るのも便利なところです。
また対応言語が豊富で、PHP、C++、C#、Java、Perl、Rubyなどにも対応しているようです。

導入手順

導入はとても簡単です。あまり複雑なことはやらず、このブログで使っている基本的な機能をメモしていこうと思います。

1）ファイルのダウンロード

ダウンロードページからファイルを取得
»http://alexgorbatchev.com/SyntaxHighlighter/download/

2）必要なファイルを読み込ませる

必要なcssファイル、jsファイル、スクリプトを開始する記述を導入したいページに読み込ませます。

• shCoreDefault.css
• shThemeDefault.css

• shCore.js  ※必須のjs
• shBrushXml.js  ※html用（XML、XHTMLにも対応）
• shBrushCss.js  ※css用
• shBrushJScript.js  ※js用

↓以上をまとめてこんな感じに記述しました

<link type="text/css" rel="stylesheet" href="/css/shCoreDefault.css" media="all">
<link type="text/css" rel="stylesheet" href="/css/shThemeDefault.css" media="all">
<script type="text/javascript" src="/js/shCore.js"></script>
<script type="text/javascript" src="/js/shBrushXml.js"></script>
<script type="text/javascript" src="/js/shBrushCss.js"></script>
<script type="text/javascript" src="/js/shBrushJScript.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>

jsファイルは言語ごとにファイルが用意されているようなので、必要なファイルだけ読み込んでおくのがよいかと思います。
ここまで出来れば準備OKです！

ソースコードの書き方  ～基礎編～

必要ファイルを読み込んだらあとは書くだけです、この時pre要素を使用します。
ぶっちゃけ基礎編まで実装出来れば十分です。

記述方法  例）htmlの場合

<pre class="brush: html;">　<!--cssの場合はbrush: css;、jsの場合はbrush: javascriptと書く-->
<p>これはhtmlを記述する場合の例です</p>
</pre>

• pre要素にはclass「brush: 言語名;」をつけます、ここは言語によって変更してください。
• ソース記述する際は「＜」や「＞」などの記号を特殊文字に変換しなくてはならないので、以下のサイトなどを使って特殊文字に変換したものを記述してください。
  »http://tech-unlimited.com/escape.html

ちなみにソースコード上でダブルクリックをすると、一括コピーできるのです！わあ便利！

ソースコードの書き方  ～応用編～

基礎まで出来たら十分ですが、以下もよく使われる機能です。解説を入れる時に伝わり易いかと思いますのでぜひ使ってみてください。

行をハイライトする

ハイライトさせたいときはpre要素のclassに「highlight:行数;」を追加します。

<pre class="brush: html;highlight:2">
<p>これは特定の1行をハイライトしている場合の例です</p>
</pre>

<pre class="brush: css;highlight:[3,7,8]">
#contents {
	width:690px;
}
#contents h1 {
	padding:4px 5px;
	color:#FFF;
	background-color:#18273D;
}
</pre>

開始行数を指定して記述する

何も指定しない場合、行数は1から始まります。途中の行から記述したい場合はpre要素のclassに「first-line:行数;」を追加します。

<pre class="brush: javascript;first-line:15;">
$(function(){
    $("p").css("color","red");
});
</pre>

カスタマイズしてみよう

このブログでいじっている部分だけさらっとメモしておきました！
ちなみにデフォルトの色合い（標準テーマ）はこんな感じです。

■cssをいじって色を変えてみる

以下を変更したら変わったので参考までに。
ハイライトしてある行のカラーコードをお好きな色やサイトに合わせた色に変えてみてください。

.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #e0e0e0 !important;
}
.syntaxhighlighter .line.highlighted.number {
  color: black !important;
}
.syntaxhighlighter table caption {
  color: black !important;
}
.syntaxhighlighter .gutter {
  color: #afafaf !important;
}
.syntaxhighlighter .gutter .line {
  border-right: 3px solid #6ce26c !important;
}
.syntaxhighlighter .gutter .line.highlighted {
  background-color: #6ce26c !important;
  color: white !important;
}
.syntaxhighlighter.printing .line .content {
  border: none !important;
}
.syntaxhighlighter.collapsed {
  overflow: visible !important;
}
.syntaxhighlighter.collapsed .toolbar {
  color: blue !important;
  background: white !important;
  border: 1px solid #6ce26c !important;
}
.syntaxhighlighter.collapsed .toolbar a {
  color: blue !important;
}
.syntaxhighlighter.collapsed .toolbar a:hover {
  color: red !important;
}
.syntaxhighlighter .toolbar {
  color: white !important;
  background: #6ce26c !important;
  border: none !important;
}

■右上にでてる「？」を消す

pre要素のclassに「toolbar:false」を追加します。以下のサンプルも消してみました。

<pre class="brush: html; toolbar:false">
</pre>

ちなみにこのツールバー、ver2.1系まで何個かアイコンが出てきていたのですが、3系から廃止になってしまったそう…。
その代わりにver3系からダブルクリックでソースがコピー出来るようになったようです。

以上、シンタックスハイライターさんの導入方法でした！
機能はまだまだありそうですが、これだけでも十分活用出来ると思いますので、ぜひ導入してみてください。