[JavaScript] highlight.js を利用したWebページでのソースコードのカラーリング

このページのタグ:[JavaScript] [highlight.js] [コードハイライト]
highlight.js を利用して利用してWebページでソースコードをカラーリング表示します。

highlight.js のダウンロード

highlight.js をダウンロードします。https://highlightjs.org/にアクセスします。下図のページが表示されます。
画面右側の [Get Version ..,] のボタンをクリックします。


下図のダウンロード画面が表示されます。


利用したい言語のパッケージをチェックして選択します。


下にスクロールし、[Download]ボタンをクリックすると、highlight.js がダウンロードできます。


チェックしたオプションにより highlight.pack.js の内容が変わります。

ファイルの設置

今回はHTMLファイルを配置するディレクトリに "highlight"ディレクトリを作成し、その中に、highlight.pack.jsを配置します。

コードの記述

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <link rel="stylesheet" href="highlight/styles/default.css">
    <script src="highlight/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
    コードは下記です。<br />

<pre><code class="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";
      }
    }
  }
}
</code></pre>

    コードは以上です。<br />

</body>
</html>

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示され、コードがカラーリング表示されます。

補足:CDNを利用する場合

CDNを利用する場合は、ファイルのダウンロードはせず、highlight.js のCDNのURLを指定します。
ただし、CDNで取得できるhighlight.jsのファイルは最小構成であるため、highlight.js のカスタムパッケージは利用できません。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/default.min.css" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js"></script>
</head>
<body>
    コードは下記です。<br />

<pre><code class="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";
      }
    }
  }
}
</code></pre>

    コードは以上です。<br />

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