ブログに掲載するソースコードのシンタックスハイライトを google-code-prettify から highlight.js に乗り換えた

スポンサードリンク

ブログに掲載するソースコードのシンタックスハイライトは google-code-prettify を使ってたんだけど、highlight.js に乗り換えました。 以前の記事はこちら → [ JavaScript ] google-code-prettify でソースコードをハイライト表示

highlight.js の特長

highlight.js には次のような特長があります。

  • シンタックスハイライトできる言語は 169 の言語に対応
  • カラーリングは 77 種類から選べる
  • 言語を自動的に判定してカラーリング
  • 複数言語(例えば、HTML と CSS)が混在していてもカラーリングできる

highlight.js の設置方法

highlight.js の設置は、次のように JavaScript と CSS ファイルを <head> タグの中で読み込むだけです。 ※ もちろん、JavaScript と CSS ファイルを自分のサーバーにアップロードして使うことも出来ます。

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

これだけで <pre><code></code></pre> のソースコードをキレイにシンタックスハイライト表示してくれるので便利です。

highlight.js のテーマ

highlight.js のテーマは、highlight.js demo で見ることが出来ます。

テーマを切り替えるには、読み込む CSS ファイルを変えます。 僕の場合は、Monokai Sublime にしたので次のようなコードに書き換えました。 ※ 読み込む CSS の末尾に「.min」を付けるのを忘れずに!

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/monokai-sublime.min.css">

読み込む CSS のファイル名が分からなかったら、highlight.js/src/styles at master · isagalaev/highlight.js · GitHub で確認できます。

ハイライトする言語を指定する

基本的に言語の判定は自動ですが、もし、期待通りのハイライト表示ができない場合は次のように code タグの class 属性で言語を指定することもできます。

<pre><code class="html">...</code></pre>

僕は面倒なので言語の指定はしませんが。。。

以上、簡単にシンタックスハイライトを導入できる highlight.js のご紹介でした。(^o^)

スポンサードリンク

この記事が気に入ったら、ぜひシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

Mac, iPhone, WordPress が好きなウェブディレクター。 香川県坂出市出身。香川県高松市在住。 1973 年生まれで三児の父。川添おやじの会会長。ネギと玉ねぎが嫌い。