SyntaxHighlighterのカスタマイズ方法（オプションの利用）
SyntaxHighlighter（シンタックスハイライト）には、様々な設定（オプション）が用意されています。よく使われるのは、行番号の開始番号の指定や特定行のハイライト機能です。
■開始行番号を指定する方法
<h1>開始行番号を指定したサンプル</h1> <label>ID：<input type="text" name="name" value=""></label> <input type="button" value="送信"> <p style="font-size:11px;">入力したID(数字)の名前が表示されます</p> <p>名前：<span></span></p> <div class="con">test</div>
特に指定しなければ、1から順に行番号が振られます。任意の開始番号を指定することによりその番号から開始できます。
<pre class=”brush: javascript; first-line: 22;”>
指定の仕方は、pre要素のclass属性値に、上記のように「first-line:」という文字列を追記すればその行から開始されます。
■特定の行をハイライト表示する方法
特定の行をハイライト表示するには、複数行のソースを載せた上で、
指定した行をこのように記述すればハイライト表示されます。
<pre class=”brush: php; highlight:[3,13];”>
「highlight:」という文字列を追記し、ハイライトしたい行番号をカンマ区切りで記述します。
連続していない複数の行をハイライトすることもできます。
<?php
// 定の行をハイライト表示サンプル
$name = $_POST["name"];
$tel = $_POST["tel"];
$age = $_POST["age"];
$sex = $_POST["sex"];
$doui = $_POST["doui"];
$hidden = $_POST["hidden"];
if($doui == null){
$data["message"] = "同意してください。";
}else{
$data["message"] = "登録しました。";
}
header('Content-Type: application/json; charset=utf-8');
echo json_encode($data);
SyntaxHighlighterの配色（テーマ）を変える
SyntaxHighlighter（シンタックスハイライト）には、複数の配色（テーマ）が用意されています。現地点での最新版であるVer 3.0.83では、デフォルトテーマを含めて8種類の配色があります。読み込ませるCSSファイルを変えることで配色を変更できます。
例として、Eclipseのデザインにする時は、
・shCore.css と shThemeEclipse.css を読み込む
・shCoreEclipse.css だけを読み込む
のどちらかの方法でCSSを指定すれば変更されます。
<link type=”text/css” rel=”stylesheet” href=”./syntaxhighlighter/styles/shCoreEclipse.css”>
また、自分で配色（テーマ）を作ることもできます。
既存のCSSファイルを元にしてオリジナルのテーマに変えることができます。
その際は、共通CSSである「shCore.css」ファイルはそのまま読み込み、
自分の望みの配色に近い既存のテーマファイルコピーして名前を変更して、
編集していけば比較簡単に作れると思います。
<link type="text/css" rel="stylesheet" href="./syntaxhighlighter/styles/shCore.css"><!-- 共通コアのCSSファイル --> <link type="text/css" rel="stylesheet" href="./syntaxhighlighter/styles/shThemeAAA.css"><!-- テーマのCSSファイル -->
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ソースコードを綺麗に表示することが出来る「SyntaxHighlighter」導入について Part1
ソースコードを綺麗に表示することが出来る「SyntaxHighlighter」導入について Part2
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
