Next.jsでprism-themesを適用する

はじめに

こんにちは、@zsp2088devです。
本技術ブログのコードブロックには、Prism.jsを使用しています。
ただPrism.jsのデフォルトのテーマには自分好みのテーマががなかったので、prism-themesを使用してNordテーマを適用しています。

本記事では、prism-themesの適用方法について紹介します。

インストール

$ yarn add prism-themes

prism-themesを適用する

Prism,jsを使用している箇所で、prismjs-themes配下のcssをimportします。これでデフォルト以外のテーマを指定できるようになります。

import { useEffect } from 'react'
import Prism from 'prismjs'

// prism-themesを追加
import 'prism-themes/themes/prism-nord.min.css'

type Props = {
  article: Article
}

export default function ArticleBody({ article }: Props) {
  useEffect(() => {
    Prism.highlightAll()
  })

  return <div dangerouslySetInnerHTML={{ __html: article.body }} />
}

おわりに

本記事ではNext.jsでprism-themesを適用する方法について紹介しました。
「Next.js + Prismjs」のように検索をすると、.babelrc.jsにデフォルトテーマを指定する方法が多く見つかり、解決するのに時間がかかってしまいました。

この記事が誰かのためになれば嬉しいです！