2016年04月05日

「highlight.js」で、ブログ内にソースコードを表示する

スポンサーリンク

ブログ内にソースコードを表示する方法です。

ソースを枠で囲んであげれば良いのですが、記事とは別物として表示したいところ。
横に長いコードは、記事にしてしまうと途中で折り返されてしまうので、見づらくなる欠点もあります。
というか、そもそもソースコードをそのまま記事に書くと正しく表示されません。

そこで、ツールを使用させていただきます。

有名どころでは、「SyntaxHighlighter」があります。
調べたところ、ちょっと重いのと導入が面倒そうです。

もっと、簡単で軽いのが無いかな―と探したところ「highlight.js」というのが見つかりました。
これを、さくらブログ内で動くようにします。


さくらブログの【デザイン】→【HTML】→HTMLを今まで弄った事のない方は、【デフォルトHTML】というものしか表示されていません。
【デフォルトHTML】は、ソースコードの改造が出来ませんので、自分用にHTMLを追加します。

右端の「HTMLの追加」をクリック。
出てきたHTMLコードの上にあるHTML名欄に好きな名前をつけて、下の【保存】ボタンを押します。

これで、HTMLに「デフォルトHTML」と、「追加した名前のHTML」の2つが表示されるようになったと思います。
適用チェックを、追加した名前のHTMLに付けてください。

これで、HTML改造の準備完了です。

さくらブログに「highlight.js」を組み込む

追加したHTMLをクリックすると、HTMLが表示されます。
ソースコードがいっぱい書いてありますが、気にしないでください。

ソースを上から見て行くと<head>という文字が見つかると思います。
これは、ヘッダーと呼ばれる部分で、<head>で始まり、</head>で終わります。

今回は、この中に「highlight.js」を組み込みます。
以下のコードを追加してください。
<!-- ▼ソースコード表示highlight.js ▼-->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/zenburn.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- ▲ソースコード表示highlight.js ▲-->

</head>のすぐ上あたりにコピペすれば良いと思います。

これで組み込みは、完了です。

「highlight.js」の使い方

使う場合は、次のような形にします。

<pre><code>ブログに表示したいソースコード</code></pre>

上記のように<pre>タグと<code>タグで表示したいソースコードを囲むだけですが、ソースコードをそのまま記載すると上手く表示されません。
そこで、ソースコードをHTMLエスケープ(HTML上で正しく表示される形に変換)してあげます。

幾つかHTMLエスケープをしてくれるサイトをご紹介します。

こちらは、このツール以外でも色々な技術が解説されていて、勉強になります。

こちらは、少し古いですが自動で<pre><code>〜</code></pre>を追加してくれます。

こちらは改行を自動で付けてくれます。
私はこちらを良く使わせていただいています。

上記などで変換したものを記事内に設置します。
上記以外にも「HTMLエスケープ ツール」などで検索すれば、自動変換してくれる親切なサイトがいっぱい出てきます。

記事に設置するには、記事を書く画面の右上を「リッチテキスト」ではなく「通常テキスト」状態にします。
すると、記事の上のツールボタン群に【< >】こんな形の「ソースコード」というボタンが出てきます。
そのボタンを押して、記事のソースコードを表示します。

記事内の貼り付けたい場所に、先ほどHTMLエスケープツールで変換したものを貼り付けます。
貼り付けたものの上に<pre><code>を、</pre></code>を下に追記して、変換したソースコードを<pre><code>タグで囲んで【OK】します。

プレビューして問題が無ければ[保存]します。



以下は、設定の参考にさせていただいたサイトです。

皆様、この場を借りて感謝です!

スポンサーリンク
posted by ノービス at 18:14 | Comment(0) | さくらブログ 便利ツール
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: