SyntaxHighlighter 2.0 のすすめ

■ 関連する記事


以下は、SyntaxHighlighter 2.0 の設定部分のソースコードを SyntaxHighlighter 2.0
で表示しています。

ツールバー部分が flash となって、Flash10 のクリップボードへコピーできなく
なった問題を回避し、設定の幅が広く使いやすくなっています。

使い始めの特徴として、前(1.5)バージョンのリソースを引き継げるように、
shLegacy.js というライブラリが用意されています。
新しいバージョンでは、全てのページを一気に適用するメソッドが一つになって
シンプルな統合が行われていますが、( HighlightAll はなくなっている )
shLegacy.js を組み込むと、HighlightAll を使う事ができます


	config : {
		/** Path to the copy to clipboard SWF file. */
		clipboardSwf : null,

		/** Width of an item in the toolbar. */
		toolbarItemWidth : 16,

		/** Height of an item in the toolbar. */
		toolbarItemHeight : 16,
		
		/** Blogger mode flag. */
		bloggerMode : false,
		
		/** Name of the tag that SyntaxHighlighter will automatically look for. */
		tagName : 'pre',
		
		strings : {
			expandSource : 'expand source',
			viewSource : 'view source',
			copyToClipboard : 'copy to clipboard',
			copyToClipboardConfirmation : 'The code is in your clipboard now',
			print : 'print',
			help : '?',
			alert: 'SyntaxHighlighter\n\n',
			noBrush : 'Can\'t find brush for: ',
			brushNotHtmlScript : 'Brush wasn\'t configured for html-script option: ',
			
			// this is populated by the build script
			aboutDialog : 'HTMLの記述'
		},

		/** If true, output will show HTML produces instead. */
		debug : false
	},
こちらのコードは、実装のための部分ですが、フォントやサイズが日本人向けでは
なかったので、チューニングしています。幅も指定しないと 100% となり伸び縮みします。
好みで使い分ければ良いと思います。

今回、css を選択する事によってテーマを変更できるのですが、デザインに黒系が多く、
やはりどうも日本人向けではありません。ソースコードの提示はやはり shThemeDefault.css
で、幅固定のほうが美しく思えます
<script type="text/javascript" src="http://winofsql.jp/sh/2.0.296/shCore.js"></script>
<script type="text/javascript" src="http://winofsql.jp/sh/2.0.296/shLegacy.js"></script>
<script type="text/javascript" src="http://winofsql.jp/sh/2.0.296/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet" href="http://winofsql.jp/sh/2.0.296/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://winofsql.jp/sh/2.0.296/shThemeDefault.css"/>
<style type="text/css" >
.syntaxhighlighter div,.syntaxhighlighter span,.syntaxhighlighter code {
	font-size:12px!important;
	font-family: "MS Pゴシック"!important;
}
.syntaxhighlighter {
	width:700px!important;
	padding:5px!important;
	background-color:#FFFFFF!important;
	border-style:solid!important;
	border-color:#808080!important;
	border-width:1px!important;
}
</style>
ドキュメントも充実しているので非常に良くなっていますが、IE6 でまともに表示されない
のがタマに傷です。まあ、これは Microsoft のサイトそのものにも言える事なので、
Firefox で見れば良いと思います。で、上記のソースコード内の URL がリンク化していますが、
これも新しい機能で、オプションでデフォルトで有効となっています
<pre name="code1" class="brush: js;">
ここにソースコード
</pre>

<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://winofsql.jp/sh/2.0.296/clipboard.swf';
SyntaxHighlighter.config.strings.copyToClipboardConfirmation =
 '\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\u3000\u3000\u3000';

dp.SyntaxHighlighter.HighlightAll("code1");
</script>
とりあえず今回はここまで。
次回はもう少し設定について詳しく説明したいと思います

あ、そうそう。WEB スペースを持って無い人の為に HOSTING もしています。
それも次回説明します。