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専用のプログラムコードへのリンクがあればいいのだがそれはさすがに無いようなので、とりあえず全ての特殊文字をコード変換してみるとうまく表示されました。
<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
