Powershellのコードをブログに載せようと、有名なプラグインである「Crayon Syntax Highlighter」を利用しようと思いました。
が、色々調べるうちに、Crayon Syntax Highlighterは高機能であるが故に重い、という情報がたくさん出ているため、軽いと評判のhighlight.jsを利用することにしました。
ところがそう簡単にいかなかった・・
試行錯誤の末、利用できる状態にこぎつけたので、情報を記録しておきます。
目次
highlight.jsの構成方法
コードの準備
今回はCDNを利用した形式とします。header.phpにコードを埋め込む形式のため、まずはコードを準備する必要があります。
以下の手順に従ってコードを準備して下さい。
１．以下のURLで最新のcdnjsのコードを入手します。色々なブログで利用方法が記載されていますが、バージョンが古いものが多いので、ここから引っ張ってくれば安心です。
２．以下のURLで好みのスタイルを見つけます。
PowershellのサンプルはLanguage categoriesの[misc]にありました。
Stylesの項目をクリックすると右側のコード部分の表示が変わるので、好みのスタイルを探してください。今回はPowershellのコンソールっぽい[Far]でいきたいと思います。
３．以下のURLでスタイルの名前を見つけます。
今回は[Far]のため[far.css]ですね。
４．貼り付け用のコードを準備します。コピーした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の子テーマで実施する場合の手順です。各テーマにより構成が異なるので注意してください。
１．ダッシュボードの外観-テーマの編集をクリックします。
２．画面右側で編集するテーマを[Simplicity2 child]となっていることを確認し、header-insert.phpを選択します。表示された画面の一番下に、先ほどのコードをコピーしてファイルの更新をします。
以上でhighlight.jsの利用準備が整いました。
highlight.jsの動作確認
ではPowershellのコードをハイライトしてみます。
投稿画面で編集モードをテキストにし、<pre><code> ～～～ </code></pre>内にPowershellのコードを書いてプレビューしてみます。
・・・・
・・・
・・・・・・・・・・・・・・・・・・・・・・・・・
ん？？思ってたのと違う・・
全然ハイライトされてないし、枠が2重になってるし・・・
解決方法
Powershellのコードをハイライトさせるには
usageにこっそり書かれていました。
要はCommonセクションにない言語はハイライトされません、ということです。確かにPowershellはOtherセクションに分類されていました。
Otherセクションの言語は手動で対応する必要があります。
以下のURLから対応する言語の.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コードを表示できるようになりました。