ブログをリニューアル予定。過去記事は削除するかもです。

【ソースコードを装飾】シンタックスハイライトとは(設定方法を解説)

【ソースコードを装飾】シンタックスハイライトとは(設定方法を解説)

プログラミングのソースコードを色付けして表示させたいな。

読みやすい記事は、みんな綺麗にデザインされている気がする。

僕も自分のブログでソースコードを綺麗に見せたい。

 

こんな人向けの記事。

結論から言って、プログラミング言語のソースコードを色付けして表示するならシンタックスハイライトを設定しておくだけで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を読み込む
  • ダウンロード:ファイルをダウンロード、自分のサーバーにアップして読み込む

 

それぞれのメリットは次の通りです。

 

CDNのメリット
  • コピペで実装可能
  • 動作が軽い
  • 装飾を変更しやすい

 

 

ダウンロードのメリット
  • 実装可能な言語が多い
  • サーバーに負荷がかかる
  • マイナー言語もハイライト可能

 

 

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のサイトへアクセスします。下記のリンクからどうぞ。

» highlight.js

 

手順①:最新バージョンをクリックする

サイトにアクセスしたら[Get version ○.△.□をクリックします。ちなみに、○.△.□の部分には最新のバージョンが記載されています。

本記事を書いている時点での最新バージョンは、11.0.1です。

【hightlight.js】CDNでの実装方法_Get versionをクリック

 

手順②:ソースコードを<head>にコピペ

最新バージョンのソースコードが表示されるので、これをコピーして、自分のブログまたはウェブサイトの<head>内に貼り付けます。

jsdelivrとunpkgの2つがありますが、どちらでもOKです。

【hightlight.js】CDNでの実装方法_ソースコードをコピペ

 

手順③:JavaScriptコードをコピペ

今貼り付けたコードのすぐ下に、下記のコードを追記します。

これも特に何も考えず、そのままコピペでOKです。

 

JavaScript
<script>hljs.initHighlightingOnLoad();</script>

 

以上で終了です。簡単でしたね。

 

ハイライトのデザインを変更したい

highlight.jsには、あらかじめたくさんのデザインテーマが用意されています。

実装したハイライトのデザインを変更したい場合は、デモページから好きなデザインを選ぶことが可能です。

デモページのサンプル

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>にクラス名を指定して、どんなプログラミング言語の装飾を実装したいのかを明記すれば解決します。

 

cssのハイライトを実装したい
<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なので、この機会にぜひどうぞ。

おわり。