プラグイン不要でソースコードを綺麗でシンプルに表示する方法

前回は「【WPプラグイン】ソースコード埋め込みテーブルの表示方法」についておすすめプラグインをご紹介したのですが、今回はライブラリタイプのプラグイン不要でブログの記事内に綺麗なソースコードを表示する方法をご紹介します。

ライブラリタイプのプラグインは設定に少し手間が要りますが、僕のようなHTMLが分からない初心者でも簡単に設置できますよ♪

以下を参考に導入してみてください^^

今回の内容

1 プラグイン不要でソースコードを表示する２つの方法
- 1.1 highlight.js
- 1.2 Gist
2 「hilight.js」を使用してソースコードをブログに埋め込みたい！
- 2.1 hilight.jsをサイトヘッダーに設置するだけで完了！？
3 貼り付けコードについて
4 「highlight.js」プラグイン＆表示整形の方法
5 まとめ

プラグイン不要でソースコードを表示する２つの方法

hilight.js
Gist

highlight.js

プラグインのタイプよりもサイトの負荷が少なくて表示速度も速いことでおすすめのプラグインがhighlight.jsです。

こちらはライブラリタイプとなっているため、設定に少し手間がかかるようですが基本はコピペで設定できます。

shufulifeのちゅうんこさんが解説されています↓

[blogcard url=”https://39life.net/highlightjs/”][/blogcard]

Gist

プラグインを使わない方法を紹介しているのが以下のデザイナーさんのサイト。

[blogcard url=”http://rinare.com/wordpress-source-code-syntax-highlight-gist/”][/blogcard]

ちょうど僕が前回ピックアップしたプラグインの比較も分かりやすく紹介されています^^

プラグインを使いたくないというアナタは是非参考にしてみてください。

色々な目から鱗のカスタマイズ情報がてんこ盛りですよ♪

「hilight.js」を使用してソースコードをブログに埋め込みたい！

で、上記のサイト＋αを参考に色々調べた結果、僕はhilight.jsでソースコードを埋め込み表示することに決定しました！

何やらhilight.jsは前回紹介した主要プラグインとの互換性もあるようなので、いざ気に入らなかったり別なものを試したいという時にすぐに変更できる点にメリットを感じました。

と、いうことで試してみました！以下が導入手順と設定方法です。

hilight.jsをサイトヘッダーに設置するだけで完了！？

まずはじめにhilight.jsで配布されている以下のソースコードをサイトのhead部分に埋め込みます。

今回、僕は分りやすいように</head>の直前に貼り付けを行いました^^

head部分というのはサイトのヘッダー部分にあたる<head>〜</head>の間です。

<head>〜</head>の次は<body>〜</body>となっているので間違わないようにコピペしてください。

ソースコードをhead内に貼り付けるだけで、以下の画像のように表示されていたソースコードが、

以下のようにハイライトされました！簡単！

実は必要な作業はhead内への埋め込み作業だけなのです。

本当にそれだけでした。笑

実際に設置してみると手順も表示されるテーブルもシンプルで綺麗で僕は満足しています^^

最終的にはこんな感じに整形できました！

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>
<script>// <![CDATA[
$(document).ready(function() { $('pre').each(function(i, block) { hljs.highlightBlock(block); }); });
// ]]></script>

折り返しされていた文字列も横スクロールに変換できて、非常にシンプル！

十分すぎる。余は満足じゃ^^

貼り付けコードについて

僕が埋め込みを行った今日現在では「highlight.js/9.2.0」となっており、定期的にバージョンアップを行っているようなので最新版のCDNコードは公式サイトで確認するようにしてください。

[blogcard url=”https://highlightjs.org/download/”][/blogcard]

そこで「cdnjs」のコードをコピーしてheadタグ内に貼り付けるだけです♪

ピンクはバージョン、オレンジはちゅんこさんのサイトを参考

実際に貼り付けると、前述したように以下のように整形されて表示されます^^

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>
<script>// <![CDATA[
$(document).ready(function() { $('pre').each(function(i, block) { hljs.highlightBlock(block); }); });
// ]]></script>

（↑のコードをそのままお使いください。）