skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

ソースを華麗に整えるjavascript「SyntaxHighlighter」

｜ ｜ ｜ ｜ ｜ ｜ ｜

Web上でソースを書く時、<などを実体参照させなければならなく、手間がかかります。
SyntaxHighlighterはそんな煩わしさを排除してくれるjavascriptです。
さらに、コピー＆ペーストしやすいように行番号などを振っていない状態も表示できます。

使用方法
SyntaxHighlighterからファイル群一式をダウンロードします。
<link rel="stylesheet" href="http://yourdomain/SyntaxHighlighter.css" type="text/css">
<script src="http://yourdomain/shCore.js" type="text/javascript"></script>
<script language="javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = '/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>
head内に上記を埋め込み、ソースを以下のように記述します。
<pre name="code" class="言語">
ソース
</pre>
ソースで表示する言語に合わせて挿入するjavascriptと上記のclass名を変更します。
ソースを華麗に整えるjavascript「SyntaxHighlighter」サンプルでは、javascriptとhtmlを表示しているので、javascriptは以下のようにしていますす。
<script src="http://yourdomain/shBrushJScript.js" type="text/javascript"></script>
<script src="http://yourdomain/shBrushXml.js" type="text/javascript"></script>
class名
C++：cpp, c, c++
C# ：c#, c-sharp, csharp
CSS：css
Delphi：delphi, pascal
Java ：java
Java Script ：js, jscript, javascript
PHP ：php
Python：py, python
Ruby：rb, ruby, rails, ror
Sql ：sqlVB：vb, vb.net
XML/HTML ：xml, html, xhtml, xslt

記事作成：2007年10月03日

前の記事：超簡単な画像ズームエフェクトjavascript「zoomi」
次の記事：スライドショーを作成するjavascript「Slideshow」