【Prism.js】シンタックスハイライトを追加して見やすいコードを記載してみよう

投稿日 2021/08/09

前回自分の記事にシンタックスハイライトを付けたくて、highlight.jsを導入してみました。

その時の記事はこちら↓

これを使用してシンタックスハイライトは追加することができたのですが、ダークモードで実装している私のサイトには色味が合わず、余計に見づらいものとなってしまいました。

ですので、今回はもっとメジャー？なPrism.jsを使用してみることにしました。

インストール

公式ドキュメントにはファイルのダウンロードやCDNでの使用が書かれていますが、私のサイトはNuxt.jsで作成されているので「Yarn」でインストールしてみます。

npmを使用している方は適宜読み替えてください。

yarn add prismjs

私のサイトはTypeScriptを使用しているので型定義ファイルもインストールしておきます。

TypeScriptを使用していない方は飛ばしてください。

yarn add -D @types/prismjs

使い方は簡単です。

以上なので普通のライブラリの使用方法と変わりありません。

JSのインポートは以下の感じ

import Prism from 'prismjs'

CSSは自分の環境に合わせてインポートもしくは読み込みをしていただければと思いますが、今回はJSファイルに一緒に読み込ませます。

import '~/node_modules/prismjs/themes/prism.css'

ファイルまでのパスやテーマファイルはご自身の環境に合わせて書き換えてください。

Nuxt.js環境へは上記の書き方とは少し違います。

不要な方は飛ばしてください。

~/plugins/ディレクトリにprism.jsを作成します。

作成したJSファイルにJSとCSSをインポートしていきます。

import Prism from 'prism.js'
import '~/node_modules/prismjs/themes/prism.css'
 
export default Prism

それからnuxt.config.jsに追記します。

export default {
  plugins: ['@/plugins/prism'],
}

これで読み込みが完了しました。

それでは呼び出しでシンタックスハイライトを適用させましょう。最も簡単な呼び出し方法はこちらです。

Prism.highlightAll()

これでコードに色が付きました。

こちらはmarkdownからHTMLへの変換を前提としているので、直接HTMLでcodeタグを書いている場合は色がつかないと思います。

markdownからHTMLの変換を試した記事はこちら↓

その場合はcodeタグにlanguage-[**]などの言語をクラス名として書いてあげる必要があります。

対応言語についてはこちらこちらにある通りにクラス名を付ければ適用されるようになります。

こちらでとてもきれいにコードが見れるようになりました。

このような感じでこのブログでは日々自分が学んだ技術やライブラリ等を投稿しています。興味を持たれた方はぜひ、他の記事もご覧になっていただけると幸いです。