ソースコードをシンプルきれいにハイライト!highlight.jsを使ってみた

ソースコードをシンプルきれいにハイライト!highlight.jsを使ってみた
Javascript

WEB技術ブログを書くなら、コードを綺麗に表示させなければなりません。ツールを検討した結果、私は”highlight.js”に決めました。シンプルで軽量、言語もテーマもとっても豊富!な、highlight.jsを解説したいと思います!

なぜhighlight.js?プラグインは使わないの?

WPで人気のあるソースコートのハイライターといえば、SyntaxHighlighterプラグインですよね。実は最初、こっちを検討してました。きめ細かい表示だし、日本語の管理画面で細かな調整ができるし、至れり尽くせりのナイスツールだったんですが。。 もっとシンプルで軽いのがいいな、と。私には、そんなに高機能なツールでなくてもよさそうですし。まだ、今後プラグインが増えていく未来を考えると、無くても行けるプラグインは無暗に増やしたくない(^^;)というわけで、highlight.jsに鞍替えいたしました。

highlight.jsのメリット

とにかく軽量!

使用するファイルは実質jsとcss、それぞれ1ファイルのみ。しかも、必要な言語を選択してからダウンロードするので、余計なファイルを読み込む必要はありません。SyntaxHighlighterを使っているとCSSが適用されるまで結構間があいて、ハダカのコードが見えたりしますよね。highlight.jsなら大丈夫です。

豊富な言語とテーマ

2015年2月現在、ハイライトしてくれる言語は112種類、スタイルテーマは49種類もあります。多すぎる?後述しますが、とっても選びやすいUIになってますから心配いりません。

シンプルで美しい見た目

基本的には行番号やコピペボタンなどのパネルはありませんし、一行ごとに見やすく色分けもされておりません。好みがわかれるところかとは思いますが、スッキリしたデザインが好きな私にはこっちのほうがいいです。

簡単にカスタマイズできる!

構造がシンプルな分、cssのカスタマイズもしやすいかと思います。また、jQueryを使えば読み込みタイミングを変えたり、囲みタグを変更するのもらくちんです。

highlight.jsを実装しよう

それでは、実装方法を見ていきましょう。

ファイルをダウンロード

05_highlight.js

公式サイトより、「get version〇.〇」ボタンをクリック。 次に使用する言語を選択し、Downloadをクリックします。。もし将来的に使いたい言語が増えたら、戻ってきてダウンロードしなおせばOK。

06_Getting highlight.js

必要ファイルをアップロードし、にファイルへのリンクとファンクションを記述

必要なファイルはたったの2つ。 ・highlight/highlight.pack.js ・highlight/styles/お好きなスタイルcss 使用するcssファイルは、公式サイトでデモを見ながら決めましょう。こんなかんじで、使いたい言語とスタイルをかけ合わせながら選ぶことができます。

07_highlight.js demo

スタイルを決めたらファイルをアップロードし、該当ページに読み込みます。 そして、その下に<script>hljs.initHighlightingOnLoad();</script>を記入します。ぶちねこどっとうぇぶの場合は、こんなかんじ。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/ir_black.css">
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

あとは、ハイライトしたいところを<pre><code>~</code></pre>で囲めばOKです!使用言語を自動で判断し、適切に色づけしてくれます。

デモをはこんな感じだよ

黒地にぱきっとした色合いが気に入ったので、IR_Blackを採用しました。

HTML

<head><title>ぶちねこどっとうぇぶ</title></head>
<body>
<p>ねこはいつでもまるくなる</p>

CSS

#header{
	padding: 4px 0;
	background-color: #ecf0d6;
	border-top: 4px #2a7a6e solid;
}

Javascript

jQuery(function(){
$(".sp-menu-icon").click(function(){
    $("#gnav").slideToggle();
  });
});

PHP

<?php $contents = $_POST['contents'];
print('<p>内容:</p>'); ?>

カスタマイズ

hljs.initHighlightingOnLoadは、jQueryで読み込むこともできます。これなら読み込むタイミングも操れますね。

$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

<pre><code>以外の、好きなタグで囲むこともできます。jQueryで以下のように、タグを指定してください。

$('div.code').each(function(i, block) {
  hljs.highlightBlock(block);
});

その他、便利なファンクションは公式ドキュメントをお読みください。

デメリットと注意点

“<“、”>”はエスケープ必須

“<“、”>”は、&lt;、&gt;で置き換えないと、コードの一部として認識されてしまいます。テキストエディタで一発置き換えするとはいえ、これはちょっとめんどくさいかも。

違う言語で続けて書くときは囲みなおす

2種類以上の言語にスタイリングしたいときは、別の<pre><code>ブロックに表記する必要があります。ひとくくりにしてしまうと、最初の言語しか認識・スタイリングしてくれないようです。

こんな感じでちょっと使いづらいところもありますが、そんなに頻繁にコードを出さないブログならこれで十分かと。是非おためしください(^^

  • このエントリーをはてなブックマークに追加