Nuxt 3でPrismJSとAutoloaderプラグインを設定する方法は次のとおりです。
前の記事「VueやNuxtで数学公式をレンダリングする方法は次のとおりです。」では、Nuxt.jsでローカルCDNを使用して数学公式をレンダリングする方法について説明しました。ローカルCDNを利用することで、多くのJavaScriptライブラリを簡単にロードすることができ、ページロードが遅くなる心配がありません。
PrismJSは軽量のコードハイライトJavaScriptライブラリです。通常の方法でPrismJSを設定する場合(「Nuxtを使用してコードブロックをハイライト表示する方法は次のとおりです。」を参照)、ハイライト表示したい言語ごとにほぼ1回ずつインポートする必要があります。たとえば、Typescriptをハイライト表示したい場合は、import "prismjs/components/prism-typescript"
を追加する必要があります。明らかにこれは面倒です。
しかし、PrismJSにはその機能を拡張する多くのプラグインがあります。Autoloaderプラグインは必要な言語を自動的にロードしてくれますので、ハイライト表示したい言語のファイル個別にインポートする必要がなくなります。Autoloaderプラグインをロードする最も簡単な方法はCDNを使用することです。本記事では、Nuxt 3でMathJaxをロードするのと同じ方法でPrismJSとそのautoloaderプラグインを設定する方法について説明します。
1. まず、GithubからPrismJSのソースコードをダウンロードします:
https://github.com/PrismJS/prism/archive/refs/tags/v1.29.0.zip
また、npmを使用してダウンロードすることも可能です:
npm install prismjs
2. 次に、それをNuxtプロジェクトのpublicディレクトリに移動します。ファイルのディレクトリ構造は以下のようになります:
Nuxt-app/
node_modules
pages
...
public/
prismjs
3. 最後に、nuxt.config.ts
ファイルを設定します:
export default defineNuxtConfig({
css: [
"prismjs/themes/prism-tomorrow.css"
],
app: {
head: {
link: [{ rel: "icon", type: "image/png", href: "/favicon.svg" }],
script: [
{
src: "/prismjs/components/prism-core.min.js",
tagPosition: "bodyClose",
},
{
src: "/prismjs/plugins/autoloader/prism-autoloader.min.js",
tagPosition: "bodyClose",
},
],
},
},
});
注意点として、script
タグはhead
の内ではなくbody
内に置かれるため、tagPosition: "bodyClose"
を追加する必要があります。これで、PrismJSは必要な言語を自動的にロードします。highlightAll()
関数を呼び出すだけで済みます。
まだコメントがありません。最初のコメントを投稿しましょう!