IT

ソースコードを綺麗に表示することが出来る「SyntaxHighlighter」導入について Part3

SyntaxHighlighterのカスタマイズ方法(オプションの利用)

前回までの記事はコチラ
Part1はこちら
Part2はこちら

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
==================================

お問い合わせフォーム

気になる方はコチラからお問い合わせ!

    必須お名前
    必須メールアドレス
    必須郵便番号
    必須ご住所
    必須電話番号
    ご相談内容
    必須メッセージ本文

    コメントを残す

    *