Prismの導入

Flamelinkはコードスニペットを挿入すると、PrismのCSSを吐き出すようなのでPrismを導入した。
const Blog = (params: any) => {
    return (
        <>
            <Head>
                //PrismのCSSを指定
                <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
            </Head>
            <Layout>
              <pre>
                <code class="language-javascript">
                  hoge = 'hello world';
                </code>
              </pre>
            </Layout>
            //Prismのスクリプトを指定
            <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-core.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/autoloader/prism-autoloader.min.js"></script>
        </>
    );
}
たった3行追加するだけ。
注意すべき点は公式のCDNのホストの記述が実在しないホストになっているから公式のサンプルをコピペしたらダメだと言うこと。
好きなCDN使ってねと言わんばかりにリンクが貼ってある。

Prism公式:https://prismjs.com/

と思ったらリロードしないと動かない。
useEffect内でPrism.highlightAll()を実行しないとダメらしい。
 
npmでPrismのインストール
npm i prismjs -S
npm i --save-dev @types/prismjs
続いてコードの修正
import { useEffect } from 'react'
import Prism from 'prismjs'

const Blog = (params: any) => {
    useEffect(() => {
        Prism.highlightAll();
    }, [])
    const post = params.post;
    return (
        <Layout>
          <pre>
            <code class="language-javascript">
              hoge = 'hello world';
            </code>
          </pre>
        </Layout>
    );
}


続いてCSSのインポート
_app.tsx

import 'prismjs/themes/prism-tomorrow.css'

function App({ Component, pageProps }: AppProps) {
    return (
        <Component {...pageProps} />
    )
}

export default App


参考:https://frendly.dev/posts/using-prism-js-in-next-js