• 最低限の機能の利用方法
  
  
  • 1) オリジナルのダウンロード
    
  • 2) 改造版のダウンロード
  • 3) 一般的なソースコードの表示手順( 改造前と共通 )
  • 4) オリジナルのオプション
  
  
• 改造後の機能の使用方法と直接アクセスの方法
  
  
  • 【追加仕様1】ツールバーのコントロール毎の表示・非表示の設定
  • 【追加仕様2】ダウンロードリンク・コントロール(ツールバー)
  • 【追加仕様3】ユーザカスタマイズ・コントロール(ツールバー)
  • 【追加仕様4】name で指定したキーワードをそのソースコードの class として追加
  • 【追加仕様5】ユーザ指定キーワード
  • コメント部分の文字列や "" の中の文字列にリンクを適用したい場合

最低限の機能の利用方法

1) オリジナルのダウンロード

• dp.SyntaxHighlighter
  • Scripts
    • clipboard.swf
    • shBrushCpp.js
    • shBrushCSharp.js
    • shBrushCss.js
    • shBrushDelphi.js
    • shBrushJava.js
    • shBrushJScript.js
    • shBrushPhp.js
    • shBrushPython.js
    • shBrushRuby.js
    • shBrushSql.js
    • shBrushVb.js
    • shBrushXml.js
    • shCore.js
  • Styles
    • SyntaxHighlighter.css
  • Uncompressed
    • shBrushCpp.js
    • shBrushCSharp.js
    • shBrushCss.js
    • shBrushDelphi.js
    • shBrushJava.js
    • shBrushJScript.js
    • shBrushPhp.js
    • shBrushPython.js
    • shBrushRuby.js
    • shBrushSql.js
    • shBrushVb.js
    • shBrushXml.js
    • shCore.js

実際使用するのは Scripts のほうで、実行に必要の無い改行コードやスペースかが
取りさられており、ソースコードとして読む事が困難となっています。Uncompressed
は、そのような加工処理をする前のオリジナルコードです

2) 改造版のダウンロード

shCore.lzh には、改造された SyntaxHighlighter.css と shCore.js が入っています。
shCore.js は、Uncompressed のソースコードを変更していますのでソースコードは可読です。
いろいろ変更してありますが、通常の使い方に支障はありません。
( ※ ツールバーの表示が日本語化されています )

3) 一般的なソースコードの表示手順( 改造前と共通 )

そのページのヘッド部分を修正できる場合は、以下のよう貼り付けますが、
ブログ等で、ページ単位でしか書き換えられない場合は、そのページで一度だけ
読み込まれるような場所で、かつ、ソースコードを表示する部分より早く表示
される部分に書きます。

※ css と shCore.js は必須ですが、他の js は必要な言語のみです

次にソースコードですが、HTML では必ず、他の言語でもできるだけ < と > の変換を
行う事をおすすめします。しなくても正常に表示しますが、問題が出る場合があります。
例えば、JavaScript のスクリプトタグごと JavaScript を設置すると、実行されてしまいますので
注意が必要です。

基本的には以下のように、pre で設置する事を想定しています。textarea でも設置できるのですが、
プログ等の書き込みや、自作の WEB アプリでは、textarea ではうまくいかない可能性があります。
( 入力自体が通常 textarea なので )

code は、SyntaxHighlighter が、ソースコードを変換処理を行う単位をグループ化する為の名前です。
全て code にしておけば、一回の処理で変換します。しかし、複数の名前がある場合は、その種類の
数だけ変換処理を実行する必要があります
( 別々に特別なオプションを実装したい場合は当然分けます )

ここでの js は、言語の種類です。ページの最初の一覧を参照して下さい。
また、この言語を変換する為の該当する .jsファイルをスクリプトタグで設置しておく必要があります

firstline は、オプションで省略可能ですが、行番号の開始番号を指定するものなので、書いておきます。


最後にソースコードを変換する処理は、以下のようになります。

dp.SyntaxHighlighter.ClipboardSwf の設定は一度だけです。
何度やっても問題はありませんが、1度すれは良いという事です。

dp.SyntaxHighlighter.HighlightAll("code"); で、code を名前として持つ pre が全て変換されます。
元のソースコードはそのままで、非表示になるだけで HTML 上には存在します。
変換されたコードが OL と LI で展開されるわけです。

4) オリジナルのオプション

表示方法にいくつかのオプションがあります。普通あまり使う事の無いようなオプション
ですが、pre に指定する方法と、実行時に指定する方法があります。

※ 4番目のオプション引数は、firstline に対応しています

改造後の機能の使用方法と直接アクセスの方法

【追加仕様1】ツールバーのコントロール毎の表示・非表示の設定

コントロール全てを非表示にする機能はオリジナルが持っていますが、
クリップボードにコピーする機能だけ表示という機能がありません。

dp.SyntaxHighlighter.HighlightAll を実行前にフラグをセットして、
改造後では以下のようにしてコントロールします

必ずクリップボード機能は表示されますので、必要無い場合はオリジナル
のオプションで全て非表示にします。それ以外ものは、フラグを true に
すると表示されます

【追加仕様2】ダウンロードリンク・コントロール(ツールバー)

コントロール部分にダウンロード用のリンクを設置できるようにしました。
pre で url を設定し、フラグで表示・非表示を設定します

【追加仕様3】ユーザカスタマイズ・コントロール(ツールバー)

dp.sh.Toolbar.Commands.User.label にセットした内容が HTML としてそのまま反映されます

User_check=true;

dp.sh.Toolbar.Commands.User.label = 
'<span onClick="alert(document.getElementsByTagName(&#34;HEAD&#34;)[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");
}

userAgent と indexOf は、my_css_class1 が適用され、toLowerCase は、my_css_class2
が適用されます。| は複数のキーワードを指定したい時の or を意味します。
! は、キーワードの繰り返し!クラス名!リンク先URL という指定方法の区切りで、
複数指定する場合は、, で並べます。

関数をどこかにリンクしたい場合は以下のようになります

// その言語のコメント内はヒットしない 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");
}