JavaScript

ソースコードを綺麗に表示するライブラリhighlight.jsの使い方

読了時間: 約313
highlight.js

技術系のブログを運営していると、プログラムなどのソースコードを掲載したいときがあります。
その際に、ソースコードをシンタックスハイライトさせると綺麗で読みやすくなりますよね。

highlight.js」は、そのシンタックスハイライトを実現するJavaScriptライブラリです。
これを使うことで、簡単にソースコードを綺麗に表示させることができます。

WordPressであれば、SyntaxHighlighter系のプラグインを導入すれば同じような事ができるのですが…。
高機能なのも相まって、処理が重くなる傾向があります。
私も色々なものを試してみましたが、やはり表示の遅さが少々気になっていました。

必要最小限のシンタックスハイライト機能かつ高速表示をしたいなら、highlight.jsで十分事足ります。
現在、私のブログではhighlight.jsを導入していますが…。
「表示が遅い!」というほど気になったことは特にありませんね。
個人的には、非常に満足していますよ。

今回の記事では、このhighlight.jsの導入方法とその使い方について解説します。

highlight.jsの特徴

highlight.jsは、ソースコードのシンタックスハイライト機能を実現するJavaScriptライブラリです。
ソースコード中のキーワードを色分けして分かりやすく表示してくれます。

highlight.jsには、主に以下のような特徴があります。

・対応する言語が多い(176の言語)
・スタイルが豊富に用意されている(79のスタイル)
・導入が簡単にできる
・動作が軽快

highlight.jsの導入方法

highlight.jsの導入方法なのですが…。
これはCDNを利用すると、わざわざファイルのダウンロードやアップロードをする手間が省けるので非常に簡単です!
インターネットに常時接続できる環境であれば、CDNを利用することができます。

以下のコードをコピーして、あなたが利用しているブログのHTMLに追記します。
ここでは、スタイルにDefaultを使用していますが…。
このスタイルだと見た目がちょっと地味ですので、他のスタイルに変更すると良いです。
スタイルの種類は非常に豊富ですので、公式ページのデモを見て、気に入ったデザインのスタイルを設定しましょう。

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

・Android Studio

highlight.js

・Atom One Light

highlight.js

・Github Gist

highlight.js

・Xcode

highlight.js

ソースコードの表示方法

ソースコードを記事中に表示するには、pre・codeタグの中に表示させたいソースコードを埋め込みます。
すなわち、以下のような感じです。

<pre><code>
ソースコード
</code></pre>

codeタグのクラス属性に言語名を指定すると、その言語をハイライト対象にすることができます。
例えば、Java言語のハイライトをするには以下のように指定します。

<pre><code class="java">
Javaのソースコード
</code></pre>

基本的には、自動で言語を識別してくれますが…。
シンタックスハイライトがうまくいかない場合には、直接言語を指定してみましょう。

試しに、Javaのソースコードを表示させてみます。
最も単純なHelloWorldのプログラムです。
綺麗にシンタックスハイライトされているのが分かりますね。

public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }
}

まとめ

今回の記事では、ソースコードを綺麗にシンタックスハイライトする、JavaScriptライブラリ「highlight.js」の導入方法とソースコードの表示方法について解説してみました。
いかがでしょうか?
比較的簡単に導入できるというのが分かったのではないでしょうか?

「とにかく簡単にシンタックスハイライトをしたい!」
「動作が軽いものが良い!」
という方にとっては、highlight.jsはとてもおすすめですよ!
ぜひあなたもお試しくださいね。

書いた人: 鈴木俊吾(すずしん)
フリーランスのライター・ブロガー・プログラマ。

大学卒業後、公務員を目指していたが失敗。
その後、仕事をしようとするも全て不採用に。
そのうち、心を病んで統合失調症を発症。
入退院を繰り返す。

「仕事をもらえないなら自分で作ればいい」「自分の好きな仕事だけをやろう!」と思うようになり、フリーランスに転身。
現在は、ブログの更新やアプリ開発を主な仕事にしている。

趣味は音楽鑑賞・読書・カラオケ・オセロ。
特に好きな歌手は水樹奈々で、ファンクラブにも所属している。
最近ハマっている曲は「恋想花火」。

フィードを登録していただくと、ブログの更新を把握しやすくなります。
あなたからの登録をお待ちしています!

Feedly
RSS

Twitter: @suzushin7

コメントを残す

%d人のブロガーが「いいね」をつけました。