賢威6.2

賢威6.2サイトでプログラミング言語をハイライトさせる方法:highlight.js

keni60-syntax-highlight-js-thumbnail

今回の記事では、賢威6.2サイトで highlight.js という動作が軽いと評判のシンタックスハイライターを使う方法を紹介したいと思います。

WordPressには Crayon Syntax Highlighter という人気プラグインもありますが、高機能な反面、読み込み速度が少し遅いのが玉にキズです。

highlights.js はWordPress専用プラグインではないので、少しややこしいところもあるかもしれませんが、読み込み速度を気にする方に特にオススメしたいカスタマイズです。

カスタマイズ後

カスタマイズ 1

↓ コードをハイライト(言語名は非表示)

highlight-js-after-css

カスタマイズ 2

↓ コードをハイライト+言語名を表示

highlight-js-after-2-php

[ad]

1. まずは本体をダウンロード

これが無いと始まらないので、まずは公式ページから highlight.js 本体をダウンロードします。

https://highlightjs.org/

highlight-js-top

highlight.js はCDN版とカスタムパッケージ版が用意されていますが、今回はカスタムパッケージ版を利用します。

下の画像のようにチェックボックスが並んでいるので、ここからサイトで使用したい言語を選択し、下の方にあるボタンからダウンロードして下さい。

highlight-js-download

ダウンロードすると色々なテーマのCSSファイルが入っていますが、ここでは Monokai Sublime を使ってみます。

highlight-js-folder

ちなみに下のページには全テーマのデモが用意されているので、この中からお好みのテーマを選ぶのが便利です。

https://highlightjs.org/static/demo/

highlight-js-demo

2. custom.js を作成

jsライブラリは本体ファイルをアップロードしただけでは動かないので、起動するための js ファイルを作ります。

ここでは custom.js という名前の js ファイルを作り、以下のコードを追加します。

jQuery(function( $ ){
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

参考:
https://highlightjs.org/usage/

3. 必要なファイルをアップロード

次に必要なファイルをアップロードします。

js フォルダには highlight.pack.js のファイルを、新規作成した css フォルダには monokai-sublime.css をアップロードします。

今回は賢威6.2の子テーマを作らずに直接編集したので、以下の様な構造になりました。

highlight-js-upload

4. functions.php から読み込み

アップロードまで出来たらお決まりの wp_enqueue_script() を使って functions.php から必要なファイルを読み込みます。

add_action('wp_enqueue_scripts', 'wcl_enqueue_highlight_js');
function wcl_enqueue_highlight_js() {

    wp_enqueue_style( 'highlight-js-css', get_stylesheet_directory_uri() . '/css/monokai-sublime.css' );
    wp_enqueue_script( 'highlight-js', get_stylesheet_directory_uri() . '/js/highlight.pack.js', array( 'jquery' ), '', true );
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery', 'highlight-js' ), '', true );

}

5. highlight.js を使ってみる

ここまでで highlight.js を動かせる状態になったので、投稿の編集画面から highlights.js を動かしてみましょう。

CSS をハイライトさせる場合は、ハイライトさせたいコードを

<pre><code class="css">
ハイライトさせたいコード
</code></pre>

で囲み、PHP をハイライトさせる場合は以下のように php というクラスを付けたタグで囲みます。

この要領で他の言語についても、 class="○○" の部分を htmljs に変えれば、その言語をハイライトしてくれるようになります。

<pre><code class="php">
ハイライトさせたいコード
</code></pre>

JavaScript のクラス名は js または javascriptHTML のクラス名は html のように、その言語の一般的な呼び方を入れれば大体うまく動くと思います。

もし気になるという場合は、公式サイトにもしっかりとしたクラス名のリファレンスが用意されているので、チェックしてみて下さい。

http://highlightjs.readthedocs.org/en/latest/css-classes-reference.html

実際にコードを入力してみると

wordpress-text-editor

コードがハイライトされるようになりました!

highlight-js-after

6. CSSでスタイリング

highlight.js を動かすことは出来ましたが、ここまでの状態では横スクロールができないので、CSSファイルを編集していきます。

以下のコードを 親テーマ(賢威7のテーマ)に入っている base.css や 子テーマの style.css など、お好みのCSSテーマに以下のコードを追加します。

pre, code {
    white-space: pre;
    overflow-x: scroll;
}
code.hljs {
    padding: 1em;
    margin: 1em 0 1.5em;
}

画像だと全く分からないと思いますが、横スクロール出来るようになりました。

highlight-js-after-css

CSSでスタイリング -2:言語名も表示

最後にハイライトする言語の名前をCSSで表示させてみたいと思います。

PHPは紫、CSSは青(CSS3)というように、それぞれのロゴの色を背景にして、細い白の境界線を付けてスタイリングしました。
(背景が黒になっているのは、monokai-sublime をテーマカラーとして選択したため)

ここで紹介している以外の言語についても同じ要領でスタイリングすることが出来るので、ぜひお好みで試してみてください。

pre, code {
    white-space: pre;
    overflow-x: scroll;
}
code.hljs {
    position: relative;
    padding: 20px;
    margin: 1em 0 1.5em;
    border-radius: 5px;
    word-wrap: normal;
}
code.php.hljs,
code.js.hljs,
code.javascript.hljs,
code.html.hljs,
code.css.hljs {
    padding-top: 50px;
}
.hljs:before {
    position: absolute;
    color: #fff;
    padding: 2px 10px;
    top: 0;
    left: 0;
    line-height: 30px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
.php.hljs:before {
    content: "PHP";
    background: #7E13F5;
}
.js.hljs:before,
.javascript.hljs:before {
    content: "JavaScript";
    background: #BFA600;
}
.html.hljs:before {
    content: "HTML";
    background: #e34f26;
}
.css.hljs:before {
    content: "CSS";
    background: #2A6CE6;
}

↓ 完成後(CSS)
highlight-js-after-2-css

↓ 完成後(JavaScript)
highlight-js-after-2-js

↓ 完成後(PHP)
highlight-js-after-2-php