コードブロックを手軽にハイライトしたいならPrism.jsが最強

はじめに

HTML内で書いたコードをハイライトしたい、そんなときにオススメのライブラリがPrism.jsです。

その特徴はなんといってもカスタマイズ性が高いこと！

この記事では、Prism.jsの説明と導入方法について詳しく紹介します。

Prism.jsとは？

Prism.js: 公式サイト

Prism.jsとは、プログラムコードをハイライトしてくれるJavaScriptのライブラリです。

実際に使ってみるとこんな感じ。

  private function restoreMathBlocks(string $html)
  {
    $keys = array_keys($this->mathBlocks);
    usort($keys, function ($a, $b) {
      return strlen($b) - strlen($a);
    });
    foreach ($keys as $key) {
      $html = str_replace($key, $this->mathBlocks[$key], $html);
    }
    return $html;
  }

個人的に使っていて良いなと思う特徴は以下の通りです。

• 自分の好きなプラグイン・ハイライトする言語だけ選んで導入できる
• 容量が超絶軽い
• カラーが何種類かある（人によっては少ないと感じるかも）

一番便利だと思う部分は、プラグインの存在です。

コードをコピーするボタン、ある行だけハイライトで強調する、本来見えない空白がある場合は強調する、など全部で25種類ぐらいあります。

しかも、自分で選択した分だけ含めることができるので、無駄に容量が大きくなりません。

「どのプラグインにどれだけの容量なのか」まで公式サイトに明記されているので、軽量を求めている人にもピッタリです！

私がPrism.jsを使っている理由が、自由にプラグインを組み合わせることができるからです。

このブログはPHPを使って全て自作しており、WordPressなどを使っていません。

将来的には自分で機能を作ってカスタマイズしたいですが、いきなり全ての機能を理想通りに作ることは難しいです。

しかし、このPrism.jsなら自由にカスタマイズできます！

ついでに容量も軽くなります。

自分でカスタマイズして使いたい人にこそ、オススメしたいライブラリです！

Prism.jsのダウンロード方法

ここからは、Prism.jsをどうやって使うかを解説します。

といっても、とても簡単です。

1. ダウンロードページにいく

まず、公式サイトのダウンロードページに行きます。

Prism.js download

2. 自分の好きな機能を選択してカスタマイズする

ダウンロードページでは、自分の好きな機能を選ぶことができます。

入れたい要素をラジオボタンでポチポチ押しましょう。

主に以下の機能があります。

• 圧縮レベル（よくわかんないので縮小版で良いと思います）
• テーマ
• 言語
• プラグイン

選び終えたら、ページ下の「JSをダウンロード」ボタンを押してダウンロードできます。

3. プロジェクトに配置して読み込む

ダウンロードしたファイル「prism.js」をプロジェクト内に移動させます。

場所はどこでも構いません。

そして、footerなどで読み込めば終わりです！

<!-- Prism.jsの読み込み -->
<script src=<?= $config->get('urls')['views_home'] . "/prism.js" ?>></script>

おわりに

今回の記事では、Prism.jsを紹介しました。

プラグインがたくさんあってカスタマイズ性が豊富なので、この記事で興味が出た人は、ぜひ使ってみてください！