Prismの導入

2021/01/04

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>
        </>
    );
}

たった３行追加するだけ。
注意すべき点は公式の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