SyntaxHighlighter

ホームページやブログ記事に貼り付けたソースコードを見やすく整形するためのオープンソースです。C++、C#、CSS、Delphi、Java、Java Script、PHP、Python、Ruby、Sql、VB、XML、HTML に対応しています。

サイト:

http://code.google.com/p/syntaxhighlighter/

ライセンス:

GNU Lesser GPL

言語:

JavaScript, CSS

使い方
プロジェクトページからダウンロードしたファイルを解凍すると、Scripts、Styles、Uncompressedと３つのディレクトリが作成されますが、Uncompressedディレクトリは解析用なので必要ありません。ScriptsとStyles ディレクトリをWebサーバーにアップロードします。

最初にソースコードを張り付けるHTML ページのhead セクションに次のように記述します。

view plainprint?

1. <link type="text/css" rel="stylesheet" href="./Styles/SyntaxHighlighter.css"/>  
2. <script language="javascript" src="./Scripts/shCore.js"></script>  
3. <script language="javascript" src="./Scripts/shBrushCpp.js"></script>  
4. <script language="javascript" src="./Scripts/shBrushCSharp.js"></script>  
5. <script language="javascript" src="./Scripts/shBrushCss.js"></script>  
6. <script language="javascript" src="./Scripts/shBrushDelphi.js"></script>  
7. <script language="javascript" src="./Scripts/shBrushJava.js"></script>  
8. <script language="javascript" src="./Scripts/shBrushJScript.js"></script>  
9. <script language="javascript" src="./Scripts/shBrushPhp.js"></script>  
10. <script language="javascript" src="./Scripts/shBrushPython.js"></script>  
11. <script language="javascript" src="./Scripts/shBrushRuby.js"></script>  
12. <script language="javascript" src="./Scripts/shBrushSql.js"></script>  
13. <script language="javascript" src="./Scripts/shBrushVb.js"></script>  
14. <script language="javascript" src="./Scripts/shBrushXml.js"></script>  

<link type="text/css" rel="stylesheet" href="./Styles/SyntaxHighlighter.css"/>
<script language="javascript" src="./Scripts/shCore.js"></script>
<script language="javascript" src="./Scripts/shBrushCpp.js"></script>
<script language="javascript" src="./Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="./Scripts/shBrushCss.js"></script>
<script language="javascript" src="./Scripts/shBrushDelphi.js"></script>
<script language="javascript" src="./Scripts/shBrushJava.js"></script>
<script language="javascript" src="./Scripts/shBrushJScript.js"></script>
<script language="javascript" src="./Scripts/shBrushPhp.js"></script>
<script language="javascript" src="./Scripts/shBrushPython.js"></script>
<script language="javascript" src="./Scripts/shBrushRuby.js"></script>
<script language="javascript" src="./Scripts/shBrushSql.js"></script>
<script language="javascript" src="./Scripts/shBrushVb.js"></script>
<script language="javascript" src="./Scripts/shBrushXml.js"></script>

SyntaxHighlighter.css、shCore.jsは必須です。他のJavaScriptファイルは、整形するソースコードに必要なものだけで良いです。言語ごとに必要なファイルは、ファイル名から予測できると思うので割愛します。

そして、整形するソースコードを記述し、pre タグで囲みます。

view plainprint?

1. <pre class="c#" name="code">  
2. namespace ConsoleApplication1  
3. {  
4.     class Program  
5.     {  
6.         static void Main(string[] args)  
7.         {  
8.         }  
9.     }  
10. }  
11. </pre>  

<pre class="c#" name="code">
namespace ConsoleApplication1
{
    class Program
    {
        static void Main(string[] args)
        {
        }
    }
}
</pre>

name 属性にcodeを設定し、class 属性でソースコードの言語を指定します。

最後に、</body>の手前に、次の JavaScript コードを記述して完成です。

view plainprint?

1. <script language="javascript">  
2. dp.SyntaxHighlighter.ClipboardSwf = './Scripts/clipboard.swf';  
3. dp.SyntaxHighlighter.HighlightAll('code');  
4. </script>  
5.   
6. </body>  

<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = './Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

</body>

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