ソースを華麗に整える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」

関連記事

• 色を指定できるシンタックスハイライトjavascript「highlight.js」
• コードを色付けるシンタックスハイライトjavascript「SHJS」
• コードのシンタックスハイライトをリアルタイムで行うjavascript「CodePress」
• コードをプリティに整形するjavascript「code prettifier」
• コードをハイライト表示するjavascript「Chili」

• ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」
• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」