plamo

Labo

SyntaxHighlighter2.0.320

スクリプトを載せていくにあたり、スクリプトコードをきれいに描画してくれるJavascript、"SyntaxHighlighter"を早速入れみることにする。

最新版は2.0.320で下記ページの「Click here」からダウンロードできます。
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download

ダウンロードしてzipファイルを解凍すると

・test.html
・scriptsフォルダ
・stylesフォルダ
・srcフォルダ
・LGPLv3.txt

が入っています。

test.htmlを開くと、head内に下記スクリプトが書かれており、主にデザイン成形のためのスタイルシートと、scriptフォルダ内の各プログラムコードごとに小分けにされているjavascriptファイルにリンクが貼られています。

ここでscriptフォルダ内を見るとver1.5には無かった、AS3用の「shBrushAS3.js」というファイルがちゃんと用意されているではないか！
早速HTML内にshBrushAS3.jsへのリンクを追加し、使わなさそうなプログラムコードへのリンクを省きます。さらに各スクリプトへのリンクはMTタグでブログURLの絶対パスを追加しました。

<script type="text/javascript" src="<$mt:BlogURL$>scripts/shCore.js"></script>

<script type="text/javascript" src="<$mt:BlogURL$>scripts/shBrushAS3.js"></script>

<script type="text/javascript" src="<$mt:BlogURL$>scripts/shBrushCss.js"></script>

<script type="text/javascript" src="<$mt:BlogURL$>scripts/shBrushJScript.js"></script>

<script type="text/javascript" src="<$mt:BlogURL$>scripts/shBrushPhp.js"></script>

<script type="text/javascript" src="<$mt:BlogURL$>scripts/shBrushPlain.js"></script>

<script type="text/javascript" src="<$mt:BlogURL$>scripts/shBrushXml.js"></script>

<link type="text/css" rel="stylesheet" href="<$mt:BlogURL$>styles/shCore.css"/>

<link type="text/css" rel="stylesheet" href="<$mt:BlogURL$>styles/shThemeDefault.css"/>

<script type="text/javascript">

SyntaxHighlighter.config.clipboardSwf = '<$mt:BlogURL$>scripts/clipboard.swf';

SyntaxHighlighter.all();

</script>

ここで問題が発生。MTタグの「<」と「>」がHTML上で文字コードになってしまった。
MT専用のプログラムコードへのリンクがあればいいのだがそれはさすがに無いようなので、とりあえず全ての特殊文字をコード変換してみるとうまく表示されました。

必要な外部リンクを読み込んだら、HTML body内の<pre>〜</pre>の中に、表示をさせたいコードを記述します。

<pre name="code" class="as3">
	function test():void{
		trace("チェック！");
	}

</pre>

class=""には自分が記述するプラグラムのフォーマット名を書きます。
例文ではFlashのスクリプトなので"as3"と入れました。
こうすることで書き込みたいコードのハイライト表示が出来るようになります。ちなみにclass=""に入れるスクリプト名（ストリング）は、各コード別のjsファイル内に書いてあります。
AS3は「shBrushAS3.js」に、

SyntaxHighlighter.brushes.AS3.aliases	= ['actionscript3', 'as3'];

となっているので、"actionscript3"、"as3"のどちらの文字列で指定しても、AS3フォーマットのハイライトになります。

最後にデザインフォーマットを変更します。styleフォルダ内の「shCore.css」でフォント周り、「shThemeDefault.css」で、デザインをカスタムします。

【shCore.css】

.syntaxhighlighter span
{
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	background: none !important;
	text-align: left !important;
	float: none !important;
	vertical-align: baseline !important;
	position: static !important;
	left: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	height: auto !important;
	width: auto !important;
	line-height: 1.2em !important;
	font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
	font-weight: normal !important;
	font-style: normal !important;
	font-size: 12px !important;
}

【shThemeDefault.css】

.syntaxhighlighter
{
	/*background-color: #E7E5DC !important;*/
	background-color: #f3f3f3 !important;
}

/* Highlighed line number */
.syntaxhighlighter .line.highlighted .number
{
	background-color: #6CE26C !important;
	color: black !important;
}

/* Highlighed line */
.syntaxhighlighter .line.highlighted.alt1 .content,
.syntaxhighlighter .line.highlighted.alt2 .content
{
	background-color: #6CE26C !important;
}

/* Gutter line numbers */
.syntaxhighlighter .line .number
{
	color: #5C5C5C !important;
}

/* Add border to the lines */
.syntaxhighlighter .line .content
{
	/*border-left: 3px solid #6CE26C !important;*/
	border-left: 2px solid #e5e5e5 !important;
	color: #000 !important;
}
......etc

ひとつ解決できないのが、ソースコードにロールオーバーした時に出るはずのクリップボードアイコンが出ないこと。
表示しているHTMLと同階層に「scripts/clipboard.swf」を入れると出るのだが、それでは汎用性がなくなる。
このアイコンはswfファイルなので、パスが怪しいのですが、HTMLヘッダ内の「clipboard.swf」へのパスは絶対パスにしているしいまいち原因が分かりません。
原因が分かり次第追記したいと思います。

09.06.22.PM07:44

http://plamo-tokyo.com/site/mt-tb.cgi/42

Labo

SyntaxHighlighter2.0.320

Labo [14]