highlight.jsでPowershellコードをハイライトする方法

Powershellのコードをブログに載せようと、有名なプラグインである「Crayon Syntax Highlighter」を利用しようと思いました。

が、色々調べるうちに、Crayon Syntax Highlighterは高機能であるが故に重い、という情報がたくさん出ているため、軽いと評判のhighlight.jsを利用することにしました。

ところがそう簡単にいかなかった・・

試行錯誤の末、利用できる状態にこぎつけたので、情報を記録しておきます。

スポンサーリンク

highlight.jsの構成方法

コードの準備

今回はCDNを利用した形式とします。header.phpにコードを埋め込む形式のため、まずはコードを準備する必要があります。

以下の手順に従ってコードを準備して下さい。

1.以下のURLで最新のcdnjsのコードを入手します。色々なブログで利用方法が記載されていますが、バージョンが古いものが多いので、ここから引っ張ってくれば安心です。

Getting highlight.js

2.以下のURLで好みのスタイルを見つけます。

highlight.js demo

PowershellのサンプルはLanguage categoriesの[misc]にありました。

Stylesの項目をクリックすると右側のコード部分の表示が変わるので、好みのスタイルを探してください。今回はPowershellのコンソールっぽい[Far]でいきたいと思います。

3.以下のURLでスタイルの名前を見つけます。

スタイル一覧

今回は[Far]のため[far.css]ですね。

4.貼り付け用のコードを準備します。コピーしたcdnjsコードのスタイル指定を変更します。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

赤字部分を選んだスタイルに変更します。今回は[far]になります。※スタイル名+.min.cssと記述する必要があります。赤字部分のみ変更する形です。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/far.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

最後にスクリプトをロードする記述を追加します。

<script>hljs.initHighlightingOnLoad();</script>

完成したコードがこちら↓

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/far.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

これをheader.phpに追加します。

Header.phpへの追加

Simplicity2の子テーマで実施する場合の手順です。各テーマにより構成が異なるので注意してください。

1.ダッシュボードの外観-テーマの編集をクリックします。

2.画面右側で編集するテーマを[Simplicity2 child]となっていることを確認し、header-insert.phpを選択します。表示された画面の一番下に、先ほどのコードをコピーしてファイルの更新をします。

以上でhighlight.jsの利用準備が整いました。

highlight.jsの動作確認

ではPowershellのコードをハイライトしてみます。

投稿画面で編集モードをテキストにし、<pre><code> ~~~  </code></pre>内にPowershellのコードを書いてプレビューしてみます。

・・・・

・・・

・・・・・・・・・・・・・・・・・・・・・・・・・

ん??思ってたのと違う・・

全然ハイライトされてないし、枠が2重になってるし・・・

解決方法

Powershellのコードをハイライトさせるには

usageにこっそり書かれていました。

How to use highlight.js

要はCommonセクションにない言語はハイライトされません、ということです。確かにPowershellはOtherセクションに分類されていました。

Otherセクションの言語は手動で対応する必要があります。

以下のURLから対応する言語の.jsファイルを探します。

.jsファイル一覧

Powershellはpowershell.jsでした。

usageに書かれているソースを変更します。

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script>

数字部分はheader-insert.phpに追加したコードと同じ数字に、goの部分は追加するjsファイルの名前に変更します。(.minは消さないでください。)

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/powershell.min.js"></script>

これをheader-insert.phpに追加してファイルの更新をします。

・・・・・・・

・・・・

無事ハイライトされました!あとは枠を消すだけですね。

2重になっている枠を消すには

これはsimplicity2の親テーマにあるstyle.cssで、preに対してスタイル設定がされているためでした。

親テーマのスタイルを変更すると、親テーマに更新があった場合に変更が元に戻ってしまうので、子テーマで上書きする形で対応します。

背景を透明に、枠線は無し、パディング0にします。overflowは親テーマで定義されているので無くても構いません。

pre { 
    background-color: transparent;
    border: none;
    padding: 0px;
    overflow: auto;
 }

表示してみると・・

2重だった枠線も消えていい具合に表示されました。

色々知識不足で時間が掛かりましたが、highlight.jsでPowershellコードを表示できるようになりました。