iPentec.com / Doc / JavaScript / SyntaxHighliter3 / コードハイライト

SyntaxHighlighter を利用したWebページでのソースコードのカラーリング - JavaScript

SyntaxHighlighter を利用してWebページでソースコードをカラーリング表示します。

ワンポイントメモ

直近でメンテナンスされていないため、Internet Explorer 以降のWebブラウザでの動作に不安定さがあります。

SyntaxHighlighter のダウンロード

SyntaxHighlighter のサイト(http://alexgorbatchev.com/SyntaxHighlighter/)にアクセスします。

右側の[download]リンクをクリックします。下図の画面が表示されます。[Click here to download]リンクをクリックするとSyntaxHighlighter のファイル一式をZIP形式でダウンロードできます。~

ZIPファイルがダウンロードできました。

導入と実装

ZIPファイルを展開します。下図の内容が展開されます。

展開されたファイルを設置します。今回は、アプリケーションルートの下に"syntaxhighlighter"ディレクトリを作成し、その中に配置しました。

HTMLファイルの作成

下記の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ブラウザで表示すると下図の表示結果となります。

著者

ジョニー

iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。

目次

SyntaxHighlighter を利用したWebページでのソースコードのカラーリング - JavaScript

SyntaxHighlighter のダウンロード

導入と実装

HTMLファイルの作成

解説

実行結果

関連するページ