React Next で
markdown-it と prism が使いたい。

markdown-it に markdown-it-prism を追加します。CSS は CDN からダウンロードします。

概要

CSS in JS のやり方を模索していたのですが、CSS を追加する方法がわかりませんでした。結局 <Head> の中に <link> を書き込んで逃げました。以下のようなステップを踏みました。

Head タグ

Head タグを import して、JSX に記述します。

CSS への CDN リンク

CSS への CDN リンクを HEAD タグに書き込みダウンロードします。

markdown-it-prism

markdown-it-prism を import して、markdown-it に設定します。

コード

getStaticPaths と getStaticProps を使い静的なページを生成します。 /posts ディレクトリの配下に Markdown ファイルを保存しているものとします。

$ npm install -S markdown-it-prism

/*
    /pages/[slug].js
 */
import MarkdownIt from 'markdown-it'
import markdownItPrism from 'markdown-it-prism'
import Head from 'next/head'

export default ({ innerHtml }) => (<>
  
  {/*
    Step 1. Head タグ
    Step 2. CSS への CDN リンク 
    */}
  <Head>
    <title>{ タイトル }</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/themes/prism-tomorrow.min.css" rel="stylesheet"/>
  </Head>
  <main className="main">
    <div dangerouslySetInnerHTML={{ __html: innerHtml }}></div>
  </main>
</>)

export async function getStaticPaths () {
  const fileNames = fs.readdirSync('./posts')
  const paths = fileNames.map(fileName => ({
    params: {
      slug: fileName
    }
  }))
  return {
    paths,
    fallback: false
  }
}

export async function getStaticProps ({params: {slug}}) => {
  const markdownIt = new MarkdownIt()

  /* Step 3. markdown-it-prism */
  markdownIt.use(markdownItPrism, {})
  const markdownFile = fs.readFileSync(path.join("./posts/", slug + ".md")).toString()
  const innerHtml = markdownIt.render(markdownFile)
  return { props: { innerHtml } }
}

React Next で markdown-it と prism が使いたい。

概要

コード

React Next で
markdown-it と prism が使いたい。