[React] Next.jsでブログ(会社HP)をつくるぞ！③markdownパーサーをzennに移行しよう

next.jsを使用して会社のHPを作成しています。

前回、next.jsのサンプルであるblog-starterの構成を紹介しました。

今回は、特にエンジニアの方は既存のマークダウンファイルのパーサーはいまいちだと思うので、zennのマークダウンファイルのパーサーを使用するように変更していきます。

前回までの記事はこちら。

zennのマークダウンファイルのパーサーについて

こちらを詳しくはみていただければと思うのですが、かなり便利なパーサーになっています。

特にエンジニア的には、コードブロックのシンタックスハイライトはマストですよね。

zennのマークダウンファイルのパーサーを利用する

さて、現状のblog-starterでは、remarkというパーサーを利用しています。

パースには、lib/markdownToHtml.tsを利用しています。

現状はこうなっていると思います。

lib/markdownToHtml.ts

import { remark } from 'remark'
import html from 'remark-html'

export default async function markdownToHtml(markdown: string) {
  const result = await remark().use(html).process(markdown)
  return result.toString()
}

これを、zennのパーサーを利用するように変更していきます。

lib/markdownToHtml.ts

import markdownHtml from 'zenn-markdown-html';
export default async function markdownToHtml(markdown: string) {
  return markdownHtml(markdown);
}

package.jsonにも、zenn-markdown-htmlを追加しておきます。

package.json

{
  "dependencies": {
    "zenn-content-css": "^0.1.131",
    "zenn-embed-elements": "^0.1.131",
    "zenn-markdown-html": "^0.1.131"
  }
}

zenn-content-css, zenn-embed-elementsは、他のファイルで必要になります。
これらは以下のように使用します。

pages/posts/[slug].tsx

import 'zenn-content-css'

export default function Post({ post }: Props) {
  useEffect(()=> {
    import("zenn-embed-elements") // zennの埋め込み要素を読み込む
  },[])

  return (
    <Layout>
      <Head>
        <title>{post.title}</title>
      </Head>
      <article>
        <h1>{post.title}</h1>
        <article
          className="znc w-full lg:w-2/3 break-words pt-8" // zenn-content-cssを追加し、zncを追加
          dangerouslySetInnerHTML={{ __html: post.content }}
        />
      </article>
    </Layout>
  )
}

これで、zennのマークダウンファイルのパーサーを利用することができました。

参考

zenn-editor

今回はこのあたりで。

次回は、postに付随するyaml情報をいじって、tagや関連記事を表示させるようにしていきます！

[React] Next.jsでブログ(会社HP)をつくるぞ！③markdownパーサーをzennに移行しよう

zennのマークダウンファイルのパーサーについて

zennのマークダウンファイルのパーサーを利用する

参考

Related Posts

[React] Next.jsでブログ(会社HP)をつくるぞ！①テンプレートを選んで、ローカルで起動しよう

[React] Next.jsでブログ(会社HP)をつくるぞ！②blog-starterサンプル内の構成を理解しよう

[React] Next.jsでブログ(会社HP)をつくるぞ！④postに付随するyaml情報を好きな形式に変更しよう