最低限の機能の利用方法1) オリジナルのダウンロードダウンロードは こちらです現時点で、SyntaxHighlighter_1.5.1.rar を解凍すると、 
実際使用するのは Scripts のほうで、実行に必要の無い改行コードやスペースかが 取りさられており、ソースコードとして読む事が困難となっています。Uncompressed は、そのような加工処理をする前のオリジナルコードです 2) 改造版のダウンロードダウンロードは こちらです以下は、SyntaxHighlighter.css の相違点です 
shCore.lzh には、改造された SyntaxHighlighter.css と shCore.js が入っています。 shCore.js は、Uncompressed のソースコードを変更していますのでソースコードは可読です。 いろいろ変更してありますが、通常の使い方に支障はありません。 ( ※ ツールバーの表示が日本語化されています ) 3) 一般的なソースコードの表示手順( 改造前と共通 )そのページのヘッド部分を修正できる場合は、以下のよう貼り付けますが、 ブログ等で、ページ単位でしか書き換えられない場合は、そのページで一度だけ 読み込まれるような場所で、かつ、ソースコードを表示する部分より早く表示 される部分に書きます。 ※ css と shCore.js は必須ですが、他の js は必要な言語のみです 環境部分
<link rel="stylesheet" type="text/css" href="http://インストール先/SyntaxHighlighter.css" /> <script type="text/javascript" src="http://インストール先/shCore.js"></script> <script type="text/javascript" src="http://インストール先/shBrushJScript.js"></script> <script type="text/javascript" src="http://インストール先/shBrushXml.js"></script> <script type="text/javascript" src="http://インストール先/shBrushVb.js"></script> <script type="text/javascript" src="http://インストール先/shBrushPhp.js"></script> 次にソースコードですが、HTML では必ず、他の言語でもできるだけ < と > の変換を 行う事をおすすめします。しなくても正常に表示しますが、問題が出る場合があります。 例えば、JavaScript のスクリプトタグごと JavaScript を設置すると、実行されてしまいますので 注意が必要です。 基本的には以下のように、pre で設置する事を想定しています。textarea でも設置できるのですが、 プログ等の書き込みや、自作の WEB アプリでは、textarea ではうまくいかない可能性があります。 ( 入力自体が通常 textarea なので ) ソースコード設置
<pre name="code" class="js:firstline[1]"> ソースコード </pre> code は、SyntaxHighlighter が、ソースコードを変換処理を行う単位をグループ化する為の名前です。 全て code にしておけば、一回の処理で変換します。しかし、複数の名前がある場合は、その種類の 数だけ変換処理を実行する必要があります ( 別々に特別なオプションを実装したい場合は当然分けます ) ここでの js は、言語の種類です。ページの最初の一覧を参照して下さい。 また、この言語を変換する為の該当する .jsファイルをスクリプトタグで設置しておく必要があります firstline は、オプションで省略可能ですが、行番号の開始番号を指定するものなので、書いておきます。 最後にソースコードを変換する処理は、以下のようになります。 変換処理
<script type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = "http://インストール先/clipboard.swf";
dp.SyntaxHighlighter.HighlightAll("code");
</script>
dp.SyntaxHighlighter.ClipboardSwf の設定は一度だけです。
何度やっても問題はありませんが、1度すれは良いという事です。
dp.SyntaxHighlighter.HighlightAll("code"); で、code を名前として持つ pre が全て変換されます。
元のソースコードはそのままで、非表示になるだけで HTML 上には存在します。
変換されたコードが OL と LI で展開されるわけです。
4) オリジナルのオプション表示方法にいくつかのオプションがあります。普通あまり使う事の無いようなオプション ですが、pre に指定する方法と、実行時に指定する方法があります。 行番号を表示しない
<!-- nogutter で指定 --> <pre name="opt1" class="js:firstline[1]:nogutter">
// 実行時に指定
dp.SyntaxHighlighter.HighlightAll("opt2",false);
ツールバーを表示しない
<!-- nocontrols で指定 --> <pre name="opt1" class="js:firstline[1]:nocontrols">
// 実行時に指定
dp.SyntaxHighlighter.HighlightAll("opt3",null,false);
初期表示でたたんでおく
<!-- collapse で指定 --> <pre name="opt1" class="js:firstline[1]:collapse">
// 実行時に指定
dp.SyntaxHighlighter.HighlightAll("opt4",null,null,true);
カラム位置を表示する
※ 4番目のオプション引数は、firstline に対応しています 改造後の機能の使用方法と直接アクセスの方法【追加仕様1】ツールバーのコントロール毎の表示・非表示の設定コントロール全てを非表示にする機能はオリジナルが持っていますが、 クリップボードにコピーする機能だけ表示という機能がありません。 dp.SyntaxHighlighter.HighlightAll を実行前にフラグをセットして、 改造後では以下のようにしてコントロールします
ViewSource_check=false;
PrintSource_check=false;
About_check=false;
dp.SyntaxHighlighter.HighlightAll("code2");
必ずクリップボード機能は表示されますので、必要無い場合はオリジナル のオプションで全て非表示にします。それ以外ものは、フラグを true に すると表示されます 【追加仕様2】ダウンロードリンク・コントロール(ツールバー)コントロール部分にダウンロード用のリンクを設置できるようにしました。 pre で url を設定し、フラグで表示・非表示を設定します
<pre name="code3" class="js:firstline[1]" title="http://winofsql.jp/download/shCore.lzh">
ViewSource_check=false;
PrintSource_check=false;
About_check=false;
Download_check=true;
dp.SyntaxHighlighter.HighlightAll("code3");
</pre>
【追加仕様3】ユーザカスタマイズ・コントロール(ツールバー)dp.sh.Toolbar.Commands.User.label にセットした内容が HTML としてそのまま反映されます
User_check=true;
dp.sh.Toolbar.Commands.User.label =
'<span onClick="alert(document.getElementsByTagName("HEAD")[0].innerHTML)">'
+'ヘッダ内容の表示</span>';
dp.SyntaxHighlighter.HighlightAll("code4");
【追加仕様4】name で指定したキーワードをそのソースコードの class として追加その結果以下のような事が可能になります ( ソース毎にスタイルが指定できます )
<style type="text/css">
.code5 LI {
font-weight: bold;
font-size: 24px;
line-height: 30px !important;
}
</style>
【追加仕様5】ユーザ指定キーワードデフォルトで、言語毎にキーワードが指定され、CSS により強調されます。 しかし、当然ユーザ関数等、自分が指定したいキーワードもあります。 その指定方法です。
// その言語のコメント内はヒットしない indexOf
if (window.navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
alert("IE");
}
else if (window.navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
alert("Firefox");
}
else if (window.navigator.userAgent.toLowerCase().indexOf("opera") > -1) {
alert("Opera");
}
else if (window.navigator.userAgent.toLowerCase().indexOf("netscape") > -1) {
alert("Netscape");
}
else {
alert("Unknown");
}
<style type="text/css">
.dp-highlighter .my_css_class1 {
color:red; !important;
}
.dp-highlighter .my_css_class2 {
color:blue; !important;
font-weight:bold;
}
</style>
mykeyword = 'userAgent|indexOf!my_css_class1!,toLowerCase!my_css_class2!'
dp.SyntaxHighlighter.HighlightAll("code6",null,null,null,null,null,mykeyword);
userAgent と indexOf は、my_css_class1 が適用され、toLowerCase は、my_css_class2 が適用されます。| は複数のキーワードを指定したい時の or を意味します。 ! は、キーワードの繰り返し!クラス名!リンク先URL という指定方法の区切りで、 複数指定する場合は、, で並べます。 関数をどこかにリンクしたい場合は以下のようになります
mykeyword = 'userAgent|indexOf!my_css_class1!,toLowerCase!my_css_class2!http://msdn.microsoft.com/ja-jp/library/cc427682.aspx'
dp.SyntaxHighlighter.HighlightAll("code6",null,null,null,null,null,mykeyword);
// その言語のコメント内はヒットしない indexOf
if (window.navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
alert("IE");
}
else if (window.navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
alert("Firefox");
}
else if (window.navigator.userAgent.toLowerCase().indexOf("opera") > -1) {
alert("Opera");
}
else if (window.navigator.userAgent.toLowerCase().indexOf("netscape") > -1) {
alert("Netscape");
}
else {
alert("Unknown");
}
コメント部分の文字列や "" の中の文字列にリンクを適用したい場合pre を id 付きの div で囲い、以下のようにします
// コメント内の日本語にリンクを作成します。
// 以下の "" の中にリンクを作成したい場合も同じです
if (window.navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
alert("IE");
}
else if (window.navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
alert("Firefox");
}
else if (window.navigator.userAgent.toLowerCase().indexOf("opera") > -1) {
alert("Opera");
}
else if (window.navigator.userAgent.toLowerCase().indexOf("netscape") > -1) {
alert("Netscape");
}
else {
alert("Unknown");
}
target = document.getElementById("withMyLink");
str = target.getElementsByTagName("OL")[0].innerHTML;
str = str.replace(/日本語/g," <A target=_blank href=\"http://ja.wikipedia.org/wiki/%E6%97%A5%E6%9C%AC%E8%AA%9E\">$&</A> ");
str = str.replace(/Firefox/ig,"<A target=_blank href=\"http://mozilla.jp/firefox/\">$&</A>");
target.getElementsByTagName("OL")[0].innerHTML = str;
|
