【3行のコードだけ】手軽にシンタックスハイライトを導入できる「highlight.js」の使い方

シンタックスハイライト

テック系でブログを運営している人は、記事内にコードを記述するとき、何か味気ない感じがした経験はあると思う(プログラムの事を書く人)。

そんなとき、シンタックスハイライトを導入すれば、見栄えが良くなることをご存知だろうか。

*構文強調(英: syntax highlighting)とは、テキストエディタの機能であり、テキスト中の一部分をその分類ごとに異なる色やフォントで表示するものである。この機能により、プログラミング言語やマークアップ言語といった構造化された言語において、その構造や構文上のエラーが視覚的に区別しやすくなるため、ソースコードの記述が容易となる。(ウィキペディア

この記事では、一瞬でシンタックスハイライトをブログ(ウェブサイト)へ導入できる、「highlight.js」の使い方を解説している。CDNを介したコードを利用すれば、ヘッダーにコピーアンドペーストするだけで導入できてしまうため、非常に便利で簡単。

少しでもプログラムのことを記事で書く人は、導入を強くオススメしたい。

highlight.jsへアクセス

このURLからhighlight.jsへアクセスし、『Get version x.x.x』をクリックする。

highlight.js

この記事をコピーアンドペーストしてもらっても良いのだが、どうせなら最新版を利用した方が良いので、公式サイトへ訪れよう。

highlight.jsを取得

Get version x.x.x」をクリックし、指定されているhighlight.jsの「<link>」と「<script>」をコピーする。

highlight.js

導入方法を確認

Usage』をクリックすると、導入方法を確認できる。必要なのは、この3行だけだ。

highlight.js

導入

導入は、「<head></head>」内に指定のコードを入れるだけ。↓

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

確認

これまで、何の味気もなかったコードブロック↓

highlight.js

highlight.js導入後のコードブロック↓

highlight.js

該当の記事はこちら↓

使用方法

使用方法は至って簡単。公式サイトでも書かれているように、コードを以下のタグで囲めば良い。

  • <pre><code>...</code></pre>

言語を指定したい場合は、classに言語名を追加してあげれば良い。

  • <pre><code class="python">...</code></pre>
  • <pre><code class="html">...</code></pre>
  • <pre><code class="css">...</code></pre>

WordPressでブログを運営している場合、プログラムのコードを『整形済み』でブロックの埋め込んだら、コードが記述されたブロックにある『』をクリックし、『HTMLとして編集』を選択する。

流れを整理しよう。

  1. 整形済み
  2. HTMLとして編集

<pre class="wp-block-preformatted">』となっている部分を、『<pre><code>...</code><pre>』というように変更してあげれば良い。

スタイルの変更

デフォルトのスタイルを変更したい場合、 highlight.jsがいくつかテーマを用意している。

このスタイルを採用するためには、CDN経由でなくウェブサイトが稼働しているサーバーかクラウドのオブジェクトストレージ経由でhighlight.jsを配信する必要がある。

WordPressとGoogle Cloud Storage(GCS)の記事はこちら↓

Get version x.x.x」をクリックした際、CDNの下部にあった「Custom package」から使用するプログラミング言語にチェックを入れ、ダウンロードする。

highlight.js
基本的なプログラミング言語はデフォルトでチェックされている。
highlight.js
必要なプログラミング言語を任意でチェックする。

ダウンロードすると、以下のようなファイルとフォルダが入っている。もちろん、このURLにあるGithubのリポジトリから、「クローン」あるいは「Zipをダウンロード」してもらっても良い。

highlight.js

スタイルを変更する際は、↓のデモを見て気に入ったものへ変更すれば良い。

highlight.js
Stylesをクリックしていくと、各言語でどのように表示されるかが確認できる。

各スタイルは、「styles」フォルダに格納されている。

highlight.js
上述したStylesの名前が、.cssファイルで記述されている。

筆者のブログは、カスタムスタイルのシンタックスハイライトを導入したコードが、以下のように表示された。適応したスタイルは、パッと見て気に入ったので『tomorrow-night-bright』としてみた。

highlight.js

上記のコードがある記事はこちら↓

適用方法

上述した、CDN経由で読み込まれていた↓のコードを


<link rel="stylesheet" 
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/default.min.css">

以下のようなPathに変更してあげるだけ。


<link rel="stylesheet" href="/css/styles/tomorrow-night-bright.css">

ダウンロードするフォルダと、適用させるスタイルは各々異なるはず。したがって、適切なものに変更して頂ければ良い。

デフォルトでは無味乾燥であったスタイルはテキストエディタのようなスタイルに変更されるのでテンションが少しあがるはずだ!

基本的に、Wordpressはプラグインを導入しないに限る。プラグインが増えるほど、脆弱性と管理コストが増すからだ。サクッと解決できるものは、「○○ without plugin」で検索する癖をつけていきたい。

You May Also Like