ソースコードを美しく見せるJS「SyntaxHighlighter」をFC2ブログに入れてみた | 日刊ウェブログ式

ダウンロード

まずは「SyntaxHighlighter」をダウンロードします。

Download

解凍すると以下の構成になっているので、「Styles」フォルダの「SyntaxHighlighter.css」と「Scripts」フォルダから「shCore」（←必須）とあとは主要な4ファイル（shBrushXml,shBrushCss,shBrushJScript,shBrushPhp）をアップロードしておきます。

• Scripts(shCore,shBrushXml,shBrushCss,shBrushJScript,shBrushPhp)
• Styles(SyntaxHighlighter.css)
• Uncompressed

設定

以下のコードをhead内に記述。SyntaxHighlighter.cssをアップロードしたURLに書き換えてくださいね。

次にbodyタグの上あたりに以下のコードを記述。パスは必要に応じて変更してください。

これで設定完了です。

使用方法

使用する時は、textarea内に表示したいソースコードを記入します。

クラス名は、表示するコードのタイプに応じて適宜変更してください。

• 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 (sql)
• VB (vb, vb.net)
• XML/HTML (xml, html, xhtml, xslt)

【参考にした記事】

FC2ブログでSyntaxHighlighterを使って見る

ソースコードを綺麗に表示するJS「dp.SyntaxHighlighter」

関連記事

• プロフィールリンク集を作りたい時に役立つjQuery「Tim Van Damme」
• ポラロイド写真をオシャレに散りばめるjQuery「polaroid photo viewer」
• Flashいらずで何パターンもの画像スライドが楽しめるjQuery「COIN SLIDER」
• ソースコードを美しく見せるJS「SyntaxHighlighter」をFC2ブログに入れてみた
• マウスオーバーでゆっくり画像が切り替わるjQueryがイケてるかも
• 画像の読み込みを遅延させるjQuery「LazyLoad with jQuery」
• フッターのコピーライト年号をスクリプトで自動更新