highlight.jsの導入

highlight.jsを導入した際のメモ。

highlight.jsのインストール

highlight.jsのダウンロード

Getting highlight.jsのCustom packageで必要な言語を選択してダウンロードします。

highlight.jsのアップロード

ダウンロードしたhighlight.zipを展開し、highlight.pack.jsとstylesフォルダを同一ディレクトリにアップロードします。

スタイルの決定

highlight.js demoで使用するスタイルを決定します。

スタイルシートの読み込み

</head>の前にスタイルシートを読み込むコードを追記します。

    ...
    <link rel="stylesheet" href="アップロードしたディレクトリ/styles/決定したスタイル.css">
</head>

WordPressの場合はheader.php等に追記します。

親テーマのディレクトリにアップロードした場合

...
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/アップロードしたディレクトリ/styles/決定したスタイル.css">

子テーマのディレクトリにアップロードした場合

...
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/アップロードしたディレクトリ/styles/決定したスタイル.css">

highlight.jsの読み込み

</body>の前にhighlight.jsを読み込むコードを追記します。

    ...
    <script src="アップロードしたディレクトリ/highlight.pack.js"></script>
</body>

WordPressの場合はfooter.php等に追記します。

親テーマのディレクトリにアップロードした場合

...
<script src="<?php echo get_template_directory_uri(); ?>/アップロードしたディレクトリ/highlight.pack.js"></script>

子テーマのディレクトリにアップロードした場合

...
<script src="<?php echo get_stylesheet_directory_uri(); ?>/アップロードしたディレクトリ/highlight.pack.js"></script>

オプションの設定

highlight.jsを読み込むコードの後にhljs.configure()で設定します。

クラス名が使用済みで衝突する場合はclassPrefixで接頭辞を付加します。
TABを置換する文字列を変更する場合はtabReplaceで指定します。
ハイライトを適用するタグに<pre>を使用しない場合はuseBRをtrueにして改行を<br>に置換します。

    ...
    <script src="アップロードしたディレクトリ/highlight.pack.js"></script>
    <script>
        hljs.configure({
            classPrefix: '',    // クラス名の接頭辞
            tabReplace: '    ', // TABを置換する文字列
            useBR: false        // 改行を<br>に置換
        });
    </script>
</body>

WordPressの場合はfooter.php等に追記します。

親テーマのディレクトリにアップロードした場合

...
<script src="<?php echo get_template_directory_uri(); ?>/アップロードしたディレクトリ/highlight.pack.js"></script>
<script>
    hljs.configure({
        classPrefix: '',    // クラス名の接頭辞
        tabReplace: '    ', // TABを置換する文字列
        useBR: false        // 改行を<br>に置換
    });
</script>

子テーマのディレクトリにアップロードした場合

...
<script src="<?php echo get_stylesheet_directory_uri(); ?>/アップロードしたディレクトリ/highlight.pack.js"></script>
<script>
    hljs.configure({
        classPrefix: '',    // クラス名の接頭辞
        tabReplace: '    ', // TABを置換する文字列
        useBR: false        // 改行を<br>に置換
    });
</script>

highlight.jsの実行

highlight.jsを読み込むコードとオプション設定の後にhighlight.jsを実行するコードを追記します。

    ...
    <script src="アップロードしたディレクトリ/highlight.pack.js"></script>
    <script>
        hljs.configure({
            classPrefix: '',    // クラス名の接頭辞
            tabReplace: '    ', // TABを置換する文字列
            useBR: false        // 改行を<br>に置換
        });
        hljs.initHighlightingOnLoad();
    </script>
</body>

WordPressの場合はfooter.php等に追記します。

親テーマのディレクトリにアップロードした場合

...
<script src="<?php echo get_template_directory_uri(); ?>/アップロードしたディレクトリ/highlight.pack.js"></script>
<script>
    hljs.configure({
        classPrefix: '',    // クラス名の接頭辞
        tabReplace: '    ', // TABを置換する文字列
        useBR: false        // 改行を<br>に置換
    });
    hljs.initHighlightingOnLoad();
</script>

子テーマのディレクトリにアップロードした場合

...
<script src="<?php echo get_stylesheet_directory_uri(); ?>/アップロードしたディレクトリ/highlight.pack.js"></script>
<script>
    hljs.configure({
        classPrefix: '',    // クラス名の接頭辞
        tabReplace: '    ', // TABを置換する文字列
        useBR: false        // 改行を<br>に置換
    });
    hljs.initHighlightingOnLoad();
</script>

ハイライトを適用するタグを初期値の<pre><code>から変更する場合は実行するコードを変更します。

<pre>に変更する場合(要jQuery)

    ...
    <script src="アップロードしたディレクトリ/highlight.pack.js"></script>
    <script>
        hljs.configure({
            classPrefix: '',    // クラス名の接頭辞
            tabReplace: '    ', // TABを置換する文字列
            useBR: false        // 改行を<br>に置換
        });
        $(document).ready(function() {
            $('pre').each(function(i, block) {
                hljs.highlightBlock(block);
            });
        });
    </script>
</body>

コードの記述

ハイライトを適用するタグ

<pre><code>タグで囲まれた部分にハイライトが適用されます。

<pre><code>...</code></pre>

言語の指定

言語の自動判定が正しくない場合は<code>タグのクラスに指定します。

HTMLでハイライトする場合

<pre><code class="html">...</code></pre>

ハイライトしない場合

<pre><code class="nohighlight">...</code></pre>

言語とクラス名の対応はCSS classes referenceで確認出来ます。

HTML特殊文字のエスケープ

コードの記述にはHTML特殊文字のエスケープが必要です。

文字 説明 文字実体参照 数値文字参照
" quotation mark &quot; &#34;
& ampersand &amp; &#38;
' apostrophe &apos; &#39;
< less-than &lt; &#60;
> greater-than &gt; &#62;

手作業でエスケープするのは大変なのでGoogle Chromeの拡張機能(Mozilla Firefoxのアドオン)を使用します。

Google ChromeにはHasher – Chrome ウェブストア – Googleから拡張機能をインストールします。

Mozilla Firefoxにはhasher :: Add-ons for Firefoxからアドオンをインストールします。

ツールバーのアイコンをクリックしてウィンドウを表示し、EncodeをクリックしてInputのテキストエリアにコードをペーストします。

HTML special charsの下に表示された文字列をクリックすると、HTML特殊文字をエスケープしたコードがクリップボードにコピーされます。

Hasher

投稿者: isonishi

小規模ウェブサイトの制作を請け負うフリーランサーです。職種はフロントエンドエンジニアが近いと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です