ツールバー機能の強化

クリップボードにコピー以外必要無い場合、他のコマンドを非表示にするようにしました。
また、追加として「ダウンロード」と「ユーザ設定」を実装しました
「ユーザ設定」は、HTML を自由に設定するようになっています。
もともとの仕様ですが、&?; で表現される文字列は、変更しておかないと正しく表示されませんので
ソースコードの内容によっては、こちらで変換して下さい(送信1ボタン)

var ViewSource_check=false;	// それぞれのコントロールの表示・非表示用の変数追加です
var PrintSource_check=false;
var About_check=false;
var Download_check=false;
var User_check=false;

dp.sh.Toolbar.Commands = {

dp.sh.Toolbar.Commands = {
	ExpandSource: {
		label: '+ expand source',
		check: function(highlighter) { return highlighter.collapse; },
		func: function(sender, highlighter)
		{
			sender.parentNode.removeChild(sender);
			highlighter.div.className = highlighter.div.className.replace('collapsed', '');
		}
	},
	
	// opens a new windows and puts the original unformatted source code inside.
	ViewSource: {
		label: '&#12456;&#12487;&#12451;&#12479;&#34920;&#31034;',
		check: function(highlighter) { return ViewSource_check; },
		func: function(sender, highlighter)
		{
			var code = dp.sh.Utils.FixForBlogger(highlighter.originalCode).replace(/</g, '&lt;');
			var wnd = window.open('', '_blank', 'width=750, height=400, location=0, resizable=1, menubar=0, scrollbars=0');
			wnd.document.write('<textarea style="width:99%;height:99%">' + code + '</textarea>');
			wnd.document.close();
		}
	},
	
	// Copies the original source code in to the clipboard. Uses either IE only method or Flash object if ClipboardSwf is set
	CopyToClipboard: {
		label: '&#12463;&#12522;&#12483;&#12503;&#12508;&#12540;&#12489;',
		check: function() { return window.clipboardData != null || dp.sh.ClipboardSwf != null; },
		func: function(sender, highlighter)
		{
			var code = dp.sh.Utils.FixForBlogger(highlighter.originalCode)
				.replace(/&lt;/g,'<')
				.replace(/&gt;/g,'>')
				.replace(/&amp;/g,'&')
			;
			
			if(window.clipboardData)
			{
				window.clipboardData.setData('text', code);
			}
			else if(dp.sh.ClipboardSwf != null)
			{
				var flashcopier = highlighter.flashCopier;
				
				if(flashcopier == null)
				{
					flashcopier = document.createElement('div');
					highlighter.flashCopier = flashcopier;
					highlighter.div.appendChild(flashcopier);
				}
				
				flashcopier.innerHTML = '<embed src="' + dp.sh.ClipboardSwf + '" FlashVars="clipboard='+encodeURIComponent(code)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
			}
			var str = '%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AF%E3%82%AF%E3%83%AA%E3%83%83%E3%83%97%E3%83%9C%E3%83%BC%E3%83%89%E3%81%AB%E3%82%B3%E3%83%94%E3%83%BC%E3%81%95%E3%82%8C%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82';
			str = decodeURIComponent( str );
			alert(str);
		}
	},
	
	// creates an invisible iframe, puts the original source code inside and prints it
	PrintSource: {
		label: '&#21360;&#21047;',
		check: function(highlighter) { return PrintSource_check; },
		func: function(sender, highlighter)
		{
			var iframe = document.createElement('IFRAME');
			var doc = null;

			// this hides the iframe
			iframe.style.cssText = 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;';
			
			document.body.appendChild(iframe);
			doc = iframe.contentWindow.document;

			dp.sh.Utils.CopyStyles(doc, window.document);
			doc.write('<div class="' + highlighter.div.className.replace('collapsed', '') + ' printing">' + highlighter.div.innerHTML + '</div>');
			doc.close();

			iframe.contentWindow.focus();
			iframe.contentWindow.print();
			
			var str = decodeURIComponent('%E5%8D%B0%E5%88%B7%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E8%A1%A8%E7%A4%BA%E4%B8%AD');
			alert(str+'...          ');
			
			document.body.removeChild(iframe);
		}
	},
	
	About: {
		label: '?',
		check: function(highlighter) { return About_check; },
		func: function(highlighter)
		{
			var wnd	= window.open('', '_blank', 'dialog,width=300,height=150,scrollbars=0');
			var doc	= wnd.document;

			dp.sh.Utils.CopyStyles(doc, window.document);
			
			doc.write(dp.sh.Strings.AboutDialog.replace('{V}', dp.sh.Version));
			doc.close();
			wnd.focus();
		}
	},

	Download: {
		label: '&#12480;&#12454;&#12531;&#12525;&#12540;&#12489;',
		check: function(highlighter) { return Download_check; },
		func: function(sender, highlighter)
		{

		}
	},

	User: {
		label: '',
		check: function(highlighter) { return User_check; },
		func: function(sender, highlighter)
		{

		}
	}

};

日本語化

キャラクタセットに依存しないように、unicode による HTML数値文字列参照と
UTF-8 の urlencode を使用しています
HTML数値文字列参照は、直接表示される場所に指定しています

// opens a new windows and puts the original unformatted source code inside.
ViewSource: {
	label: '&#12456;&#12487;&#12451;&#12479;&#34920;&#31034;',

UTF-8は、decodeURIComponent でいったん内部コードに変換してから使用しています

var str = 'UTF-8でURLエンコードした日本語';
str = decodeURIComponent( str );
alert(str);

ツールコントロールの表示・非表示

クリップボードにコピー以外は、false を設定する事によって表示されません
HighlightAll で呼び出すグループ毎に同じ設定ができます。ですから、以前の設定は使用できますが、明示しておいたほうがいいでしょう

ViewSource_check=false;
PrintSource_check=false;
About_check=false;
Download_check=true;   
User_check=true;   

dp.SyntaxHighlighter.HighlightAll("toolbar");

ダウンロードコントロール

以下のように、title 属性に URL を書くと「ダウンロード」コントロールのリンク先になります。
但し、target は指定していないので、通常ページを指定するとページが書き換わります

<PRE name="toolbar" class="js:firstline[43]" title="http://winofsql.jp/download/shCore.lzh">

	ソースコード

</PRE>

ユーザーコントロール

dp.sh.Toolbar.Commands.User.label にセットした内容が HTML としてそのまま反映されます
( ここではリンクにしか利用していませんが、JavaScript を呼び出すようにしていろいろ実装できます )

<script type="text/javascript">

ViewSource_check=false;
PrintSource_check=false;
About_check=false;
Download_check=false;   
User_check=true;   

dp.sh.Toolbar.Commands.User.label = '<A href="http://winofsql.jp" target="_blank">SQLの窓</A>';

dp.SyntaxHighlighter.HighlightAll("toolbar");
</script>

ソースコード別スタイルの設定

name 属性をそのまま class に追加したので、ここのように個別に指定可能になっています

.toolbarSrc LI {
	font-weight: bold;
}

CSS の変更

変更しなくても問題ありませんが、IE6 は・・・・

/* IE のバグ対応 */
.dp-highlighter ol {
	font-size:0.9em;
}

/* IE のバグ対応、こうしないとマウスが乗った時に字が動く */
.dp-highlighter a,
.dp-highlighter a:hover
{
	background: none;
	border: none;
/*	padding: 0;
	margin: 0; */
}

/* 好み。ソースの外側に薄い罫線を引いています */
.dp-highlighter
{
	font-family: "Consolas", "Courier New", Courier, mono, serif;
	font-size: 12px;
	background-color: #E7E5DC;
	width: 99%;
	overflow: auto;
	margin: 18px 0 18px 0 !important;
	padding-top: 1px; /* adds a little border on top when controls are hidden */
	/* 以下追加 */
	border-style: solid;
	border-color: #A0A0A0;
	border-width: 1px;
}

仕様通りの基本的な実装手順

本家のサンプル間違ってますし・・・
まず、必要な言語用の js のみ記述します。全ての処理の最初に行えばいいので、head 内である必要はありません
( shCore.js は必ず必要です )

<script type="text/javascript" src="http:インストールした場所/shCore.js"></script>
<script type="text/javascript" src="http:インストールした場所/shBrushVb.js"></script>
<script type="text/javascript" src="http:インストールした場所/shBrushPhp.js"></script>
<script type="text/javascript" src="http:インストールした場所/shBrushCpp.js"></script>
<script type="text/javascript" src="http:インストールした場所/shBrushCSharp.js"></script>
<script type="text/javascript" src="http:インストールした場所/shBrushCss.js"></script>
<script type="text/javascript" src="http:インストールした場所/shBrushJScript.js"></script>
<script type="text/javascript" src="http:インストールした場所/shBrushSql.js"></script>
<script type="text/javascript" src="http:インストールした場所/shBrushXml.js"></script>
<script type="text/javascript" src="http:インストールした場所/shBrushDelphi.js"></script>
<script type="text/javascript" src="http:インストールした場所/shBrushJava.js"></script>
<script type="text/javascript" src="http:インストールした場所/shBrushPython.js"></script>
<script type="text/javascript" src="http:インストールした場所/shBrushRuby.js"></script>

最初だけ、swf の位置を設定します。これは、IE 以外のブラウザ用で IE には必要ありません
ツールバーの設定をします
pre または textarea 内にソースコードを置いて、HighlightAll で対象の name 属性を適用します
※ 表示エリアの幅は、外側に DIV を書いてそこに指定します。内部では 99% 指定になってますから
pre を書いた後に script タグで処理していくという感じです。
onLoad イベントは使わないほうがいいです。使うのならイベントを追加で対応しないと既にイベントが使われていると問題が出ます
で、他人様のスペース使う事を想定すれば、ソースコードと JavaScript を並べて書くのが現実的です。
また、この改造使うのならば、そうなってしまいますけれど。

<HTML>
<HEAD>
<META http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<TITLE>SyntaxHighlighter の改造 ( 日本語化、ツールバ機能の強化 )</TITLE>
<STYLE type="text/css">
h1 {
	font-size: 12px;
	line-height: 30px;
	border-style: solid;
	border-width: 1px;
	border-color: #9192A3;
	height: 30px;
	padding-left: 10px;
	background: url(http://winofsql.jp/image/h1.png) repeat-x 0px 0px;
}
LI {
	font-family: "ＭＳ Ｐゴシック";
	font-size: 12px;
}

.toolbarSrc LI {
	font-weight: bold;
}

</STYLE>
<LINK rel="stylesheet" type="text/css" href="http://winofsql.jp./styleva.css">

<!-- ここから -->
<link rel="stylesheet" type="text/css" href="http://winofsql.jp/sh/SyntaxHighlighter.css" />
<script type="text/javascript" src="http://winofsql.jp/sh/shCore.js"></script>
<script type="text/javascript" src="http://winofsql.jp/sh/shBrushJScript.js"></script>
</HEAD>

<!-- *******************************************************
 BODY
******************************************************** -->
<BODY>
<PRE name="toolbar" class="js:firstline[43]" title="http://winofsql.jp/download/shCore.lzh">
var ViewSource_check=false;	// それぞれのコントロールの表示・非表示用の変数追加です
var PrintSource_check=false;
var About_check=false;
var Download_check=false;
var User_check=false;

dp.sh.Toolbar.Commands = {
</PRE>

<script type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = "/sh/clipboard.swf";

ViewSource_check=true;
PrintSource_check=true;
About_check=true;
Download_check=true;   
User_check=true;   

dp.sh.Toolbar.Commands.User.label = '<A href="http://winofsql.jp" target="_blank">SQLの窓</A>';

dp.SyntaxHighlighter.HighlightAll("toolbar");
</script>
</BODY>
</HTML>

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

ツールバー機能の強化

日本語化

ツールコントロールの表示・非表示

ダウンロードコントロール

ユーザーコントロール

ソースコード別スタイルの設定

CSS の変更

仕様通りの基本的な実装手順

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