JavascriptPrismのインストールと使い方

2023.02.13

babel

CDN

npm

prism.js

syntaxHighlight

ソースコード

Prismをnpmパッケージでインストールし、初期設定方法と使い方を解説していきたいと思います。

Prismとは

まず初めに Prism(Prism.js)についての紹介をしたいと思います。
Prism.jsとはWebサイトでソースコードを表示する際に、
ソースコードに色付けをするシンタックスハイライトを行うためのライブラリになります。

本サイトのソースコードのシンタックスハイライトは、
Prism.jsを使用して下記のようにソースコードを表示しています。
※ シンタックスハイライトの上部に記述言語名、コピー機能、フォントサイズアップ・ダウン機能が表示されているものがありますが、Prism.jsの機能ではなく新たに実装したものになります。

//- JSのソースコードをシンタックスハイライトで表示
const txt = (() => {
  return 'このソースコードは即時関数で本テキストを返す処理を行っています。'
})();

Prism.jsを使うにあたって

今回はNPMパッケージをインストールし、
Prism.jsのソースコードを自サイトのJSファイルにバンドル（統合）して、
htmlの記述をシンタックスハイライトに変換する方法を紹介します。

Prism.js 公式サイトでは
・CDN(Content Delivery Network)を使用する
・サイト内で必要な機能のJSファイルをジェネレータを使い作成し使用する
・NPMパッケージは使うが、ソースコードをjsファイル内に記述する
３通りの方法でPrism.jsのインストール→使用方法を説明しています。
使い方は人それぞれなので、自分に合った方法で使用すればいいと思います。

Prism.jsをインストールする

NPMパッケージのPrism.jsをバンドルし、html記述をシンタックスハイライトにするには、
構築環境としてwebpack, Babelが必須になります。

コマンドをターミナルで実行し、必要なNPMパッケージをインストールします。
実行するコマンドはこちらです。

npm install prismjs babel-plugin-prismjs

prismjsが本体のコードになり、
babel-plugin-prismjsがプラグインを読み込むためのものになります。公式サイトのプラグインリストはこちら

Prism.jsを読み込む

Prism.jsを実際に使うために行うことが大きく分けて４STEPあります。

Step1 シンタックスハイライトで使用したい言語、プラグインを選び Babel で設定する
Step2 HTMLを記述する
Step3 使用するプラグインに合わせてCSSファイルを読み込む
Step4 JSファイル内でPrism.jsを設定する

実際にどうするのかを見ていきたいと思います。

Step1 シンタックスハイライトで使用したい言語、プラグインを選びBabelで設定する

Prism.jsはデフォルトでもいくつかの言語は表示することができます。
下記以外の言語を表示させたい際には Babel での登録が必要となります。
markup: markuphtmlxmlsvgmathmlssmlatomrss
CSS: css
C-like: click
Javascript: javascriptjs
サポートしている全言語については公式サイトの Supported languageを確認してください。

続いてプラグインですが、
公式サイトに掲載されている Plugins の名前をそのまま登録することはできず、
インストールされた prism ディレクトリ内（node_modules/prism/plugins）にあるディレクトリ名を使用して登録する必要があります。

Babel に設定するために、本サイトでは babel.config.js を使用しています。
記述方法は下記を参考にしているので、本サイトの設定はそのままに近い内容になっています。
babel-plugin-prismjsで紹介されているプラグインに関する記述内容は下記のようになります。NPMパッケージについてはこちら

{
  "plugins": [
    [
      "prismjs",
      {
        "languages": ["javascript", "css", "markup"],
        "plugins": ["line-numbers"],
        "theme": "twilight",
        "css": true
      }
    ]
  ]
}

"css": trueを設定した場合、
"theme": "テーマ名"を必ず設定しないといけません。
そして、CSSをJSファイル内にバンドル（統合）することになるため、
webpack へcss-loderを読み込ませる必要が出てきます。

本サイトではテーマに関するCSSはJSファイルにバンドルさせるのではなく、
SCSSファイルに import して、cssファイルの一部としてサイトに読み込ませています。

というのも、
プラグインに関するCSSは Babel の記述内でバンドル（統合）設定ができなく、
別にJS内で読み込ませる形になり、設定箇所が散見する形になるため、
テーマに関するCSS、プラグインに関するCSSはまとめてSCSSファイルへ import する形を取りました。

本サイトの Babel 設定内容

{
  "plugins": [
    [
      "prismjs",
      {
        "languages": ["javascript", "css", "markup", "scss", "pug", "php"],
        "plugins": ["line-numbers", "command-line"],
      }
    ]
  ]
}

Step2　HTMLを記述する

Prism.jsの基本的なhtml構成を下記のように公式サイトの Basic usageで説明しています。

 
   
    // 表示したいソースコードの記述

プラグイン（line-numbers）を設定したい場合
※ line-numbers に限らずプラグインの機能を付与するクラス名の指定箇所は、基本的にはpre要素もしくはcode要素につけることになっているようです。

// 下記のうちのどれか
//  ・body要素にクラス名をつける（全てのシンタックスハイライトに行番号が付与されてしまう）
//  ・pre要素の親もしくは祖先要素にクラス名をつける（クラス名が付与されている要素の中の全てのシンタックスハイライトに行番号が付与されてしまう）
//  ・pre要素にクラス名をつける（このpre要素にしか行番号は付与されない）
//  ・code要素にクラス名をつける（jsが実装された時にクラス名がpre要素に移動され行番号が付与される）

<body class="line-numbers">
  ...
  
    ...
     
       
        // 表示したいソースコードの記述 
      
     
  
  ...
</body>

Step3 使用するプラグインに合わせてCSSファイルを読み込む

Step1 で話した通りテーマ用のCSS、プラグイン用のCSSは一つのSCSSファイル内に読み込ませて、
読み込みを取りまとめたSCSSファイルを本体のSCSSファイルに読み込ませています。

// CSSファイルを取りまとめるSCSSファイル
// ファイル名: _prism.scss
@import "~prismjs/themes/prism-tomorrow.min.css";
@import "~prismjs/plugins/line-numbers/prism-line-numbers.min.css";
@import "~prismjs/plugins/command-line/prism-command-line.min.css";

// サイトの共通SCSSファイル
// ファイル名: common.scss
@import "./prism"

~prismjsという記述は、node_modules/prismjsと同等の意味になります。

テーマファイルの種類は全部で ８種類
本サイトでは TomorrowNight を採用しています。

Default：prism[.min].css
Dark：prism-dark[.min].css
Funky：prism-funky[.min].css
Okaidia：prism-okaidia[.min].css
Twilight：prism-twilight[.min].css
Coy：prism-coy[.min].css
SolarizedLight：prism-solarizedlight[.min].css
TomorrowNight：prism-tomorrow[.min].css

プラグインの種類は全部で ２６種類
本サイトで使用されているプラグインはline-numbersとcommand-lineです。
各プラグインに対応したディレクトリがあるので、その中のCSSファイルを読み込むことでスタイルを聞かせることができます。
/node_modules/prismjs/plugins/プラグイン名/prism-pluginName[.min].css

Step4 JSファイル内でPrism.jsを設定する

公式サイトの Usage with Webpack, Browserify, & Other Bundlersでも記載されている通り
Prism.jsをimportするだけで実行＆シンタックスハイライト化が完了します。
実行タイミングはDOMContentLoadedのタイミングで実行されますが、
実行タイミングをコントロールしたい場合は、manual フラグを設定することで任意のタイミングで実行ができるようになります。

// Prism.jsの読み込み
import Prism from 'prismjs';

// シンタックスハイライトbuildの自動実行をキャンセル
Prism.manual = true;

// 手動でのシンタックスハイライト化実行
Prism.highlightAll();

Prism.jsを使ってシンタックスハイライトを効かせてみる

実際にどのように記述するかを記載していきます。
Prism.jsのデフォルト機能（プラグインを含む）の内容で実装する内容は、
　・行番号を表示する
の１件です。
Babel の設定も必要なので、本サイトで使用しているPrism.jsに関する箇所の設定内容も記載します。
※ 記述言語表示、ファイル名表示の実装、copy,fontSizeUp,fontSizeDown機能追加についてはPrism.jsのデフォルト機能ではないので記述していません。

const plugins = [
  [
    "prismjs",
    {
      "languages": ["javascript", "css", "html", "markup", "scss", "pug", "php"],
      "plugins": ["line-numbers", "command-line"],
    }
  ]
];

module.exports = {
  presets, // ブラウザターゲットの設定記述を入れた変数
  plugins,
};

pre.c-code
  code(class='language-js line-numbers').
    // 表示したいソースコードの記述

import Prism from 'prismjs';

(() => {
  Prism.manual = true;
  Prism.highlightAll();
})();

これでシンタックスハイライトが当たったPrism.jsの実装が完了しました。
細かいカスタマイズ方法についてはPrism.js 公式サイトでくわしく記載されているので、そちらを参照してください。

Programing