【Prism.js】サイト埋め込みのソースコードを割と楽に色付けする方法

ソースコード色付け
作成日 2025年11月15日 最終更新日 2025年11月15日

今回は、Prism.jsを用いてソースコードを色付けする方法を紹介したいと思います


この方法を使えば、色付けも出来て,余分な空白も無し、何より開発側でのソースコードが見やすくなります


サインインが必要なプラグインも使いません


Prism.jsとは

Prism.jsとは、<head>内にリンクを貼るだけでコードのハイライトができる素晴らしいライブラリです。


公式サイト： https://prismjs.com/


8種類のテーマがあって、自分のサイトに合ったデザインを選択して使用できます。


Default

Dark

Funky

Okaidia

Twilight

Coy

Solarized Light

Tomorrow Night

ちなみに本ブログで使ってるのは、okaidiaです

使い方

htmlの<head>の中に以下を記述します。

    1行目はテーマを指定しています。変更したい場合は、"/prism-okaidia.min.css"の、"okaidia"の部分を他のテーマ名に変更します


    2行目はPrism.jsの核となる必須のファイル


    5行目のプラグインは、余計なスペースを消すやつ。これを書くと<code>のすぐ右にコードを書かなくても良くなる


    6行目は、autoloaderのプラグインで、これがあると、各言語に必要なファイルを自動で読み込んでくれる。公式推奨のプラグイン

あとはコードを下記のように記述するだけでokです。

class="language-c"の部分は、その言語に合わせて変更します。


c++なら、「language-cpp」,pythonなら「language-py」のように、その言語の拡張子を指定します。


使用可能な言語と使用のための名称は、 Prism.js公式サイトのSupported Languages のページから確認できます。


上記の記述後、以下のようにハイライトされます

ちなみに「<」は&lt;に、「>」は&gt;にそれぞれエスケープ処理しなければなりません。

そういう場合は、 https://webtools.dounokouno.com/htmlescape/ さんのエスケープ処理ツールを使います。超便利です


便利なプラグイン

その他便利なプラグインを紹介します。

プラグイン一覧は、 Prism.jsの公式サイト から確認できます。


また、CDNのためのurlは cdnjs.com から確認できます。


Copy to Clipboard

コピーボタンを追加できます。本ブログのは自作のやつなので見た目は違います。

Line Numbers

行番号を追加します。

まとめ

Prism.jsを使うことで、割と楽にコードのハイライトができました。


CDNを使う以外にも、Prism.jsのソースファイルをダウンロードして読み込むという方法がありますが、動作速度的にあまり変わらないと感じたので、特に理由がなければ楽で柔軟なCDNを使った方がいいと思います。