読みやすい記事は、みんな綺麗にデザインされている気がする。
僕も自分のブログでソースコードを綺麗に見せたい。
こんな人向けの記事。
結論から言って、プログラミング言語のソースコードを色付けして表示するならシンタックスハイライトを設定しておくだけでOKです。
本記事では、highlight.jsを使ったシンタックスハイライトの設定方法を解説します。
たった3行のコードを追記するだけで、誰でも簡単にハイライトされたソースコードを表示させることができるので、この機会に設定しましょう。
スポンサードサーチ
本記事のもくじ
【コードを装飾する】シンタックスハイライトとは
シンタックスハイライト（syntax highlight）とは、プログラミングのソースコードの一部を装飾して読みやすくする機能です。
タグ名や属性値を同色に揃えることで、読者にとっては読みやすく、コードを書く側には編集しやすくなります。
シンタックスハイライトなし
シンタックスハイライトあり
シンタックスハイライトをした方がいい理由
単純に“読みやすくなるから”ですね。
シンプルに言って、色付けされていないソースコードは読みにくいです。
コードが長くなればなるほど読みにくさは増すので、ブログでソースコードを解説する人は絶体にやっておいた方が良いと思います。
スポンサードサーチ
【シンタックスハイライト】基本情報と使い方
シンタックスハイライトは、highlight.jsのライブラリを読み込む、またはファイルを自分のサーバーにアップロードすることで実装可能です。
ここからは、highlight.jsの使い方を解説するので、シンタックスハイライトを実装したい人は参考にしていただければ幸いです。
hightlight.jsとは
highlight.jsとは、シンタックスハイライトを実装するJavaScriptライブラリです。
必要なプログラミング言語を選択して、要らないコードは削ることができるので動作が早いのが特徴。
jQueryを必要とせず、言語の自動判別をしてくれるので、一度設定してしまえば、あとは普通に<pre><code>を使って、ソースコードを書くだけで勝手にハイライトしてくれます。
» 参考記事：【ソースコードを載せるためのHTMLタグ】codeタグで綺麗なコードを表示しよう
こんな人も、とりあえず使ってみれば、わかると思います。
設定方法は驚くほど簡単です。
【hightlight.jsの基本情報】メリット・対応可能な言語
highlight.jsでシンタックスハイライトを実装する方法は下記の2通り。
- CDN：ネットワーク経由でJavaScriptを読み込む
- ダウンロード：ファイルをダウンロード、自分のサーバーにアップして読み込む
それぞれのメリットは次の通りです。
- コピペで実装可能
- 動作が軽い
- 装飾を変更しやすい
- 実装可能な言語が多い
- サーバーに負荷がかかる
- マイナー言語もハイライト可能
HTMLやCSSのソースコードをハイライトする目的なら、ダウンロードするメリットはあまりないので、CDNでOKかなと思いますね。
逆に、マイナー言語をブログで紹介したい人は、CDNだと非対応の言語もあるので、自分に必要な言語をダウンロードして設定しましょう。
CDNで対応可能な言語（A-Z順）
- Bash
- C, C#, C++, CSS
- Diff
- Go
- HTML, XML
- Jason, Java, JavaScript
- Kotlin
- Less, Lua
- Makefile, Markdown
- Objective-C
- PHP, PHP Templete, Perl, Plain Text, Python, Python REPL
- R, Ruby, Rust
- SCSS, SQL, Shell Session, Swift
- TOML（INI）, TypeScript
- Visual Basic.NET
- YAML
これ以外のプログラミング言語を必要な人って、かなり専門的なブログを書いている可能性が高いです。
ほとんどの人が、HTML、CSS、JS、PHPメインなんじゃないかなと思うので、わざわざファイルをダウンロードして、自分のサーバーにアップする必要なしです。
ということで、本記事では一般向けにCDNの導入方法を解説していきます。
【hightlight.js】CDNでの実装方法
まずは、highlight.jsのサイトへアクセスします。下記のリンクからどうぞ。
手順①：最新バージョンをクリックする
サイトにアクセスしたら[Get version ○.△.□をクリックします。ちなみに、○.△.□の部分には最新のバージョンが記載されています。
本記事を書いている時点での最新バージョンは、11.0.1です。
手順②：ソースコードを<head>にコピペ
最新バージョンのソースコードが表示されるので、これをコピーして、自分のブログまたはウェブサイトの<head>内に貼り付けます。
jsdelivrとunpkgの2つがありますが、どちらでもOKです。
手順③：JavaScriptコードをコピペ
今貼り付けたコードのすぐ下に、下記のコードを追記します。
これも特に何も考えず、そのままコピペでOKです。
<script>hljs.initHighlightingOnLoad();</script>
以上で終了です。簡単でしたね。
ハイライトのデザインを変更したい
highlight.jsには、あらかじめたくさんのデザインテーマが用意されています。
実装したハイライトのデザインを変更したい場合は、デモページから好きなデザインを選ぶことが可能です。
デモページのサンプル
コピペしたコードを書き換える
デモページで気に入ったデザインを見つけたら、先ほどコピペしたコードの一部を書き換えるだけで、そのハイライトデザインを実装することができます。
書き換える箇所は下記の通りです。
jsdelivrをコピペした人
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.0.1/build/styles/★ここに実装したいテーマを貼り付け★.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.0.1/build/highlight.min.js"></script>unpkgをコピペした人
<link rel="stylesheet" href="//unpkg.com/@highlightjs/cdn-assets@11.0.1/styles/★ここに実装したいテーマを貼り付け★.min.css">
<script src="//unpkg.com/@highlightjs/cdn-assets@11.0.1/highlight.min.js"></script>
上記の「★ここに実装したいテーマを貼り付け★」部分が、初期値ではdefaultに設定されているので、ここを書き換えます。
テーマ書き換えの注意点
デザインのテーマを書き換えるときは、①小文字、②スペースはハイフン（-）で埋めるようにしてください。
- 「Monokai Sublime」→ monokai-sublime
- 「An Old Hope」→ an-old-hope
こんな感じ。他のテーマも同様にすればOKです。
思い通りにハイライトされない場合の対処法
highlight.jsでは、ときどき、思い通りにハイライトが入らない場合があります。
そんなときは、<code>にクラス名を指定して、どんなプログラミング言語の装飾を実装したいのかを明記すれば解決します。
<pre>
<code class="css">
p {
color: #FFC778;
font-weight: bold;
font-style: italic;
}
</code>
</pre>
こんな感じですね。
HTMLコードならclass="html"、JavaScriptならclass="js"になります。
スポンサードサーチ
まとめ：シンタックスハイライトでコードに彩りを
ということで、本記事のまとめです。
ブログでプログラミング言語を解説するなら、ソースコードの表記はシンタックスハイライトで装飾しておくのがおすすめです。
highlight.jsなら、たった3行のコードを追記するだけでソースコードを自動的に装飾してくれます。
シンタックスハイライトを設定しておけば、ブログを書くときに<pre> <code>で囲うだけでOKなので、この機会にぜひどうぞ。
おわり。
