FC2ブログでSyntaxHighlighter オニオンソード!!

FC2ブログでSyntaxHighlighter

2008/04/05 Sat [Edit]

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

ソースコードを綺麗に表示しているページ多いですよね。
コメントとかキーワードの色を変えてあったり、行番号がついていたり。
自分のブログでもできないかなぁと思って、ちょっと調べてみました。
あなたのソースコードを彩る、Syntax Highlighterまとめ - Blog.37to.net
結構前から色々あったんですね。。
知りませんでした^^;

ってことで、これ↓にしてみました。
syntaxhighlighter - Google Code
javascriptとCSSで実装されているようです。

以下、導入メモ

2009/11/11追記
以下の例は、追記部分で使用する場合に限るので注意してください。
「３．テンプレートの修正の（２）javascript追加」の部分ですね。
本文なんかで使用したい場合は、body閉じタグの上など適切な場所に追加してやってください。

１．syntaxhighlighterをダウンロード→解凍

http://code.google.com/p/syntaxhighlighter/downloads/list
からSyntaxHighlighter_1.5.1.rarをDLして解凍。

２．javascriptとCSSファイルをアップロード

解凍したフォルダ「Scripts」のjavascriptと「Styles」のcssファイルをアップロードします。

FC2 BLOG 管理画面の「ツール」→「ファイルアップロード」→「ファイル管理画面」からアップロード。
アップロードされたURLは、ファイル一覧で表示リンクから分かります。
　例）SyntaxHighlighter.css
　http://blog-imgs-21.fc2.com/g/r/e/greenonions/SyntaxHighlighter.css

３．テンプレート修正

（１）CSSリンク追加
　<head></head>の中に以下を追加

<link href="http://blog-imgs-21.fc2.com/g/r/e/greenonions/SyntaxHighlighter.css" type="text/css" rel="stylesheet" />

（２）javascript追加
　<%topentry_more>の下に以下を追加

<script type="text/javascript" src="http://blog-imgs-21.fc2.com/g/r/e/greenonions/shCore.js"></script>
<script type="text/javascript" src="http://blog-imgs-21.fc2.com/g/r/e/greenonions/shBrushPhp.js"></script>
<script type="text/javascript" src="http://blog-imgs-21.fc2.com/g/r/e/greenonions/shBrushXml.js"></script>
<script type="text/javascript" src="http://blog-imgs-21.fc2.com/g/r/e/greenonions/shBrushJava.js"></script>
<script type="text/javascript" src="http://blog-imgs-21.fc2.com/g/r/e/greenonions/shBrushSql.js"></script>
<script type="text/javascript" src="http://blog-imgs-21.fc2.com/g/r/e/greenonions/shBrushCpp.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>

必要に応じてjsファイルの指定を追加。

４．ソースの記述方法

表示したいソースは<textarea>内に書きます。

<textarea name="code" class="php" cols="60" rows="5" id="code">PHPのソースコード</textarea>

ソースの種類によってclassの指定を変えます。
参考：Languages - syntaxhighlighter - Google Code

Language	Aliases
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`