みなさんは WordPress 使っていますか？
実はこのサイトは WordPress を使っています。最近は管理が楽なので WordPress で構築してしまうことが多いですね。
やはり技術的なことを書いていくとコードを書くことが多くなってきます。コードが読みやすいと後から見返してもわかりやすいです。
コードをそのまま表示させるプラグインを漁っていたのですが、重たかったりして僕好みのものが見つからなかったんです。
ですので、僕は highlight.js を使うことにしました。
[q3-adsense01]
highlight.js とは
サイトに「Syntax highlighting for the Web」と書いてあるように、コードを綺麗に色分け・フォント分けして表示してくれます。
そして、スタイルもたくさんあり、僕の好きな「Solarized Dark」があると分かった時点で即決定です。
さらにプラグインより動作が軽いのでストレスがありません。
導入方法
まずは highlight.js のHPに入ります。
「Get Version 9.11.0」をクリックします。（9.11.0はバージョンです。新しくなれば数字は変わってきます）
そして次のページで、「CDNから読み込むだけで使えるよ！」みたいなことが書いてあります。
実はわざわざホームページに行かなくてもこのリンクを挿入するだけで使えるようになります。
もちろん、ページの下の方にあるダウンロードボタンからダウンロードして、自分のサイトにアップロードして使えば色々なコードを見やすくしてくれます。
でもリンクを挿入したほうが楽じゃないですか。
ということで今回はリンクを挿入することにしました。
リンクを貼る
それでは、このコードを <head> 内、もしくは </body> の直前に記述します。
そして、今回使用するコードはこちら。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/solarized-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>この記事を書いた時点の最新バージョンが9.11.0です。
そして、このコードを記述すると、Solarized Dark の配色でコードを表示してくれます。
（上のコードの配色は適応されています）
いかがでしょうか。
コードの記述方法
コードを貼り付けたい場合は、
<pre><code>...</code></pre>の中にコードを記述するだけです。
[q3-adsense01]
補足：XeoryBaseテーマについて
子テーマの設定
このブログでは、テーマに XeoryBase の子テーマを作って使っています。
修正する場合は、親テーマから子テーマへコピーします。
今回は、 header.php を修正しました。
デザインの修正
今回、ただ記述しただけでは下の画像のようになってしまいました。
スクロールバーが２重に出てしまいます。
これは、テーマのスタイルでは <pre></pre> に、 highlight.js のスタイルでは <code></code> にそれぞれスクロールを表示させているのが原因です。
もし、同じテーマを使っている場合は、 style.css にコードを追記することで解決できます。
/* highlight.js スクロールバー調整 */
.post-content pre {
padding: 0;
overflow: auto;
}これで違和感がなくなります。
最後に
色々なサイトを見ていると、コード番号が反映されていたり行ごとに色分けされていたり見やすいコードの表示がたくさんあります。
もし、気に入ったプラグインが見つかったらそちらに移行するかもしれません。
いまはこれが一番のお気に入りですので、ぜひ使ってみて下さい。
ありがとうございました。
[q3-adsense01]
コメント