javascriptってまじですごいな。
なんちゃってで、かなりきれいなHPが作れる。
htmlを書いてて、ソースコードを紹介したいと思うことは多々あると思います。そこでSyntaxHighlighterというものを使うとその要望に答えてくれるます。
SyntaxHighlighterのHP
http://alexgorbatchev.com/SyntaxHighlighter/download/
っていうのを使うといいね。
使用方法は、
zipファイルを適当なディレクトリに解凍して「scripts」と「styles」のディレクトリをindex.htmlの階層にアップロードします。
こんな感じ。.
├── css
│ └── mystyle.css
├── images
│ ├── doctor-tux.png
│ ├── follow-me.jpg
│ ├── me.jpg
│ ├── me_2.jpg
│ ├── tux.ico
│ ├── tux.jpg
│ └── twitter.jpg
├── index.html
├── perl
├── scripts
│ ├── shAutoloader.js
│ ├── shBrushAS3.js
│ ├── shBrushAppleScript.js
│ ├── shBrushBash.js
│ ├── shBrushCSharp.js
│ ├── shBrushColdFusion.js
│ ├── shBrushCpp.js
│ ├── shBrushCss.js
│ ├── shBrushDelphi.js
│ ├── shBrushDiff.js
│ ├── shBrushErlang.js
│ ├── shBrushGroovy.js
│ ├── shBrushJScript.js
│ ├── shBrushJava.js
│ ├── shBrushJavaFX.js
│ ├── shBrushPerl.js
│ ├── shBrushPhp.js
│ ├── shBrushPlain.js
│ ├── shBrushPowerShell.js
│ ├── shBrushPython.js
│ ├── shBrushRuby.js
│ ├── shBrushSass.js
│ ├── shBrushScala.js
│ ├── shBrushSql.js
│ ├── shBrushVb.js
│ ├── shBrushXml.js
│ ├── shCore.js
│ └── shLegacy.js
├── shell
│ └── index.html
├── styles
│ ├── shCore.css
│ ├── shCoreDefault.css
│ ├── shCoreDjango.css
│ ├── shCoreEclipse.css
│ ├── shCoreEmacs.css
│ ├── shCoreFadeToGrey.css
│ ├── shCoreMDUltra.css
│ ├── shCoreMidnight.css
│ ├── shCoreRDark.css
│ ├── shThemeDefault.css
│ ├── shThemeDjango.css
│ ├── shThemeEclipse.css
│ ├── shThemeEmacs.css
│ ├── shThemeFadeToGrey.css
│ ├── shThemeMDUltra.css
│ ├── shThemeMidnight.css
│ └── shThemeRDark.css
└── template
├── index.html
└── mystyle.css
つぎに、index.htmlのヘッダーの中に、「styles」のディレクトリにあるスタイルシートと、「scripts」のディウレクトリにあるjavascriptを組み込む。
以下のように<body> </body>の間に記述すればよい。
<body>
<script type="text/javascript" src="./scripts/shCore.js"></script>
<script type="text/javascript" src="./scripts/shBrushPerl.js "></script>
<link type="text/css" rel="stylesheet" href="./styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="./styles/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = './scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
</body>
ちなみに今回は、perlのスクリプトをハイライトするためのコードを書いた。
あとは、以下のように<pre class="brush:言語名"> </pre>の間に挟み込むようにしてソースコードを記述すればよい(^^)
<pre class="brush: perl">
#!/usr/bin/perl
print "Hello, world!!\n";
exit;
</pre>
