サンプルコード付:
ソースコードをサイト内で表示する方法

ソースコードをサイトできれいに表示したい方に向けて、既存のライブラリを利用して簡単に表示する方法を紹介します。

本稿の構成として、まずはサイト内表示の基本的な部分をお伝えし、その後表示するための具体的な方法とサンプルコードを紹介します。

ソースコードを表示させるための前提知識

preタグ、codeタグ

ソースコードを表示する際、preタグとcodeタグで囲むのが一般的です。

preタグは改行や半角スペースをそのままサイトに反映させることができるタグです。
HTMLでは改行のためにbrタグを使用しますが、その必要がなくなります。

codeタグはソースコードを示すタグです。ブラウザによっては等幅で表示されソースコードに向いた表示になります。

ではpreタグとcodeタグで囲うことで綺麗にソースコードを表示できるかといえば、答えはNOです。
以下のように全然ソースコードっぽくなりません。

See the Pen by TANAKA HIROKI (@michaerel_0611) on CodePen.

HTMLのエスケープ処理

まず、HTMLなどのタグを使用するマークアップ言語では、エスケープ処理が必要です。
エスケープ処理をしないとソースコードではなくHTMLの記述とみなされてしまうためです。

下記に該当するものはエスケープ処理が必要です。

See the Pen by TANAKA HIROKI (@michaerel_0611) on CodePen.

エスケープ処理することで以下のようにソースコードを表示できます。

See the Pen blog_source-code-2 by TANAKA HIROKI (@michaerel_0611) on CodePen.

ハイライト処理

ソースコードは表示できたものの、よくサイトで見かけるソースコードのようなスタイルではないため、「ソースコードっぽくない」「求めていた表示ではない」という方は多いでしょう。

ソースコードのような見た目にするにはソースコードの記載内容に応じた「ハイライト処理」や「スタイルの設定」が必要です。

これだけ聞くと難しく手間がかかるように思えるかもしれませんが、すでにライブラリが容易されているので簡単に実現できます。こちらはこの後詳しく説明します。

Javascriptのライブラリを使用してソースコードを綺麗にする

ソースコードのハイライト処理を行うライブラリは「Google Code Prettify」や「Prism.js」や「Highlight.js」あたりが有名です。

有名なライブラリのほうがインターネットで情報を調べやすいので、有名なライブラリの中で自分に合ったものを利用するのがオススメです。本記事では「Google Code Prettify」「Prism.js」「Highlight.js」の導入方法や使い方まで1つずつしっかり紹介します。

Google Code Prettify

今回紹介するライブラリの中で一番シンプルなライブラリです。

導入

以下のようにCode Prettifyを読み込めば、HTML内で使用できるようになります。

See the Pen blog_source-code-3 by TANAKA HIROKI (@michaerel_0611) on CodePen.

サンプルコード

上記のように読み込んだらPreタグ内にソースコードを記述するだけです。
preタグにはclass属性にprettyprintを付与します。
※ ソースコードの整形はライブラリで行ってくれるのでcodeタグで囲む必要はありません。

また、言語の指定はclass属性にlang-htmlなどのように指定することもできます。
ただし、通常は自動的に言語が認識されるので特に指定する必要はありません。

さらに、行数を表示したい場合はclass属性にlinenumsを記述すればよいです。
ただし、テーマによっては標準は5行刻みで行数が表示されるので、1行刻みで表示するにはCSSを記載する必要があります。（下記サンプルソースコードのCSSを参照ください。）

See the Pen Code-prettify-default by TANAKA HIROKI (@michaerel_0611) on CodePen.

テーマの変更

テーマは読み込みのscriptタグのsrc属性にある「skin=default」の部分で指定することができます。気に入ったテーマを指定してみてください。
※ テーマの一覧はこちら

テーマ	記述
Default	skin=default
Desert	skin=desert
Sunburst	skin=sunburst
Sons-Of-Obsidian	skin=sons-of-obsidian
Doxy	skin=doxy

Prism.js

Prism.jsはReactやDrupalなどで使用される非常に有名なライブラリです。
Prism.jsはネット上に記事が豊富であり、公式サイトにも多くの情報が載っているため情報収集が容易です。
また、多機能な点も魅力です。

導入

以下のようにPrism.jsを読み込めば、HTML内で使用できるようになります。

See the Pen blog_source-code-4 by TANAKA HIROKI (@michaerel_0611) on CodePen.

そのほかにも、追加機能を導入することで様々なことができます。
追加機能の種類についてはこちらを参照してください。

オススメの追加機能を少しピックアップして導入方法を記載します。

拡張機能の導入

よく使う拡張機能として「行数表示」「特定行ハイライト」「エスケープ不要」機能があります。
特にエスケープ不要機能は非常に便利です。通常サイトでソースコードを記載する際には上記でも紹介したようにエスケープ処理が必要ですが、こちらの機能を使用することでエスケープ処理が不要になります。

それぞれの機能は以下のように読み込めば使用できるようになります。

See the Pen blog_source-code-5 by TANAKA HIROKI (@michaerel_0611) on CodePen.

サンプルコード

上記のように読み込んだらScriptタグ内にソースコードを記述します。
※ エスケープ不要機能を使用する場合はScriptタグ内に記載し、エスケープ不要機能を使用しない場合はPreタグ、Codeタグ内に記載します。

また、言語の指定はclass属性にlang-htmlなどのように指定することもできます。
ただし、通常は自動的に言語が認識されるので特に指定する必要はありません。

さらに、行数を表示したい場合はclass属性にline-numbersを記述すればよいです。

特定行のハイライトはdata-line属性で任意の行番号を指定します。

See the Pen Prism-Default-Unescape by TANAKA HIROKI (@michaerel_0611) on CodePen.

テーマの変更

テーマはprism.min.cssの部分で読み込むcssを変更することで変更できます。

テーマは公式サイトの以下（左画像）の部分をクリックすることでテーマのデザインを確認できます。
適用したいテーマはCDN提供サイトで最新を確認し、以下のように記述を変更します。

highlight.js

highlight.jsはテーマ数や対応言語数が非常に多いライブラリです。

導入

以下のようにhighlight.jsを読み込めば、HTML内で使用できるようになります。

See the Pen by TANAKA HIROKI (@michaerel_0611) on CodePen.

拡張機能の導入

拡張機能を作成し公開してくれている方がおり、「highlightjs-line-numbers.js」を読み込むことで行数を表示できます。拡張機能は以下のように読み込みます。

See the Pen blog_source-code-8 by TANAKA HIROKI (@michaerel_0611) on CodePen.

サンプルコード

上記のように読み込んだらpreタグ、codeタグ内にソースコードを記述します。
preタグにはclass属性にprettyprintを付与します。
※ ソースコードの整形はライブラリで行ってくれるのでcodeタグで囲む必要はありません。

また、言語の指定はclass属性にhtmlなどのように指定することもできます。
ただし、通常は自動的に言語が認識されるので特に指定する必要はありません。
※ サポートされる言語はこちら

See the Pen Highlight.js-Default by TANAKA HIROKI (@michaerel_0611) on CodePen.

テーマの変更

テーマはa11y-dark.min.cssの部分で読み込むcssを変更することで変更できます。

highlight.jsはテーマが非常に多いのでここでは紹介しません。テーマ一覧から好きなテーマを選び、CDN提供サイトでリンクを取得してください。
※ テーマの一覧はこちら
※ CDN提供サイトはこちら

どのライブラリがオススメか

機能で選ぶなら豊富な機能をもつPrism.js、こだわりのテーマカラーにしたいならテーマが豊富なhighlight.js、シンプルに使いたいならGoogle Code Prettifyでしょう。

個人的なオススメはPrism.jsです。こちらは上記で紹介したようにエスケープ不要で記述できるので、エスケープ処理の手間がありません。

また、ReactやVueで使うならhighlight.jsでしょう。Node.js用のモジュールの提供があります。

各テーマの色味を確認する

各テーマの色味を確認できるように以下のように一覧にまとめました。
気になるテーマをクリックすることで、コードハイライトのサンプルを確認できます。ぜひ活用してください。
※ highlight.jsはテーマ数が多すぎるのですべて載せていません。highlight.jsにしかないような特徴的なテーマを抽出しています。

また、上記のソースコードもこちらに置いています。ソースコード記載のサンプルとして参考にしてください。