[JavaScript] google-code-prettify を利用した Webページでのソースコードのカラーリング

このページのタグ:[JavaScript] [コードハイライト]
google-code-prettify を利用して、Webページでソースコードをカラーリング表示する手順を紹介します。

google-code-prettify の入手

google-code-prettify はgitHub(https://github.com/google/code-prettify)でソースコードを入手できます。google-code-prettify はCDNによる配布もしているため、今回はソースコードはダウンロードせず、CDNから直接利用する方法を利用します。

利用方法

以下の手順で利用します。

ヘッダに下記コードを記述します。CDNからgoogle-code-prettify のJavaScriptを読み込むScriptタグです。

  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

ソースコードをpreタグで囲みます。preタグのクラスは "prettyprint" とします。


<pre class="prettyprint">
(ソースコード)
</pre>


以上でコードがカラーリングされて表示されます。なお、文法は自動認識されます。現在のところ、C(C++, C#などのC言語系), Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefilesをサポートしています。

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
</head>
<body>
コードは下記です。<br/>
  <pre class="prettyprint">
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>
  コードは以上です。
</body>
</html>

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の表示結果となります。ソースコードがカラーリング表示されます。

補足:CDNを利用しない場合

CDNを利用しない場合は、GitHubからソースコードをダウンロードしサーバーに配置します。
今回は、"code-prettify-master"ディレクトリを作成し、その中にソースコードを配置します。


下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="code-prettify-master/loader/run_prettify.js"></script>
</head>
<body>
    コードは下記です。<br />
    <pre class="prettyprint">
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>
    コードは以上です。

</body>
</html>
登録日 :2016-05-21    最終更新日 :2016-10-11
このページのタグ:[JavaScript] [コードハイライト]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)