ホーム > カテゴリ > 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


プチモンテ ※この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は抒情詩、抒情的な楽曲が多い。楽曲制作は🔰2023年12月中旬 ～

オリジナル曲を始めました✨

背徳の遊牧民 feat. オペラさん (2025/9/1 新曲)