これまではソースコードのハイライトにはSyntaxHighlighter Evolvedを利用していました。
ただ最近になって動作が重いように感じていたのと、ハイライトのテーマが7種類しかなく個人的に好みのものがなかったため別のプラグインを探していました。
そこで見つけたのがhighlight.js
有名所のCrayon Syntax HighlighterやSyntaxHighlighter Evolvedに比べ
- 動作が早い
- テーマが多い (約50種類)
- 対応言語が多い (100種類以上)
などなど乗り換えには十分なメリットがありました。
導入
導入にあたっては以下のサイトを参照させてもらいました。
http://sakueji.com/highlight-js/
導入にはネットから読み込んでくる方式とソースをサーバーに保存しそれを読み込む2種類の方法がありますが、前者のほうが楽なので上のサイトのとおりにヘッダーに読み込むコードを追記。
利用
僕の場合はJetpackのMarkdownを利用しています。その場合は
```言語名
ソースコード
```たったこれだけ
HTMLで利用するには以下のようにpreタグとcodeタグで囲みます。
<pre><code>ソースコード</code></pre>
スタイルの変更
コードをハイライトできたのは良かったのですが、デフォルトだとChromeで見た際にフォントのサイズが大きかったのでサイズ変更。
style.cssに以下のコードを追加
.hljs {
font-size: 15px;
}
サイズは好みに合わせて調節してください。
コメント