直近でメンテナンスされていないため、Internet Explorer 以降のWebブラウザでの動作に不安定さがあります。
SyntaxHighlighter を利用してWebページでソースコードをカラーリング表示します。
SyntaxHighlighter のサイト(http://alexgorbatchev.com/SyntaxHighlighter/)にアクセスします。
右側の[download]リンクをクリックします。下図の画面が表示されます。[Click here to download]リンクをクリックするとSyntaxHighlighter のファイル一式をZIP形式でダウンロードできます。~
ZIPファイルがダウンロードできました。
ZIPファイルを展開します。下図の内容が展開されます。
展開されたファイルを設置します。今回は、アプリケーションルートの下に"syntaxhighlighter"ディレクトリを作成し、その中に配置しました。
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCSharp.js"></script>
<link href="syntaxhighlighter/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="syntaxhighlighter/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
</head>
<body>
コードは下記です。
<pre class="brush:csharp">
using System;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
namespace ArrayDemo
{
public partial class FormMain : Form
{
public FormMain()
{
InitializeComponent();
}
private void button1_Click(object sender, EventArgs e)
{
int[] array = new int[5];
array[0] = 10;
array[1] = 5;
array[2] = 8;
array[3] = 2;
array[4] = 4;
for (int i=0; i < array.Length; i++) {
textBox1.Text += "value["+i.ToString()+"] " + Convert.ToString(array[i])+"\r\n";
}
}
}
}
</pre>
コードは以上です。<br/>
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
</body>
</html>
ヘッダ内の下記のコードにより、SyntaxHighlighterのJavaScriptのコードを読み込みます。今回はC#のコードをカラーリングするため"shBrushCsharp.js"ファイルを読み込みます。スタイルはデフォルトのものを利用するため、"shCore.css"と"shThemeDefault.css"を読み込みます。
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCSharp.js"></script>
<link href="syntaxhighlighter/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="syntaxhighlighter/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
ソースコードは、Preタグで囲みます。classに"brush:csharp"を指定することで、C#のコードとしてカラーリングします。
<pre class="brush:csharp">
using System;
using System.Collections;
(中略...)
}
</pre>
SyntaxHighlighter.all()メソッドを呼び出し、コードのカラーリングをします。all()メソッドを呼び出すことで、JavaScriptでカラーリングする処理を開始します。
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
</pre>
上記のHTMLファイルをWebブラウザで表示すると下図の表示結果となります。
