ホーム > カテゴリ > HTML5・JavaScript >

highlight.jsの使い方

ソースコードを自動で判別してハイライト表示をしてくれるhighlight.js(Javascriptライブラリ)の使い方です。

1.ダウンロード

まずは公式サイトからライブラリをダウンロードします。
ダウンロードする時には使用する言語が選択できますので必要な言語パックにチェックを入れましょう。
https://highlightjs.org/

2.環境設定

ダウンロードしましたら、次は自分の環境にアップロードします。

3.使用方法

初期設定は8,9,22行目で必須項目となります。8,9行目でCSS/JSファイルの読み込み、22行目でハイライトの事項です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="./highlight/styles/default.css" type="text/css" />
<script type="text/javascript" src="./highlight/highlight.pack.js"></script>
</head>
<body>
<pre><code>
    // 数字チェック
    function isNumeric($str){
      if (preg_match("/^[0-9]+$/",$str)) {
        return TRUE;
      } else {
        return FALSE;
      }
    }
</code></pre>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>

ハイライトさせるにはpreタグの中にcodeタグが必要ですので忘れずに。

ハイライトさせる言語を指定する

基本的に言語を自動判別しますが不具合などで言語を指定したい場合は下記のようにすればOKです。

<pre><code class="php">
    // 数字チェック
    function isNumeric($str){
      if (preg_match("/^[0-9]+$/",$str)) {
        return TRUE;
      } else {
        return FALSE;
      }
    }
</code></pre>

注意事項

このブログではソースコードのハイライトは「Google-Code-Prettify」を使用しています。Google-Code-Prettifyの使用方法はこちらからどうぞ :-)





関連記事


前の記事：SyntaxHighlighterの使い方
次の記事：getElementByIdとgetElementsByNameのサンプル

公開日：2015年01月15日
記事NO：00115