✍️

Next14 + Typescript でマークダウンコンポーネントを作る @ts-stack/markdown

2024/08/24に公開

Next.js

概要

@next/mdxだとテーブルが描画できなかったりエラーでうまくいかなかった + mdxは使わないので
@ts-stack/markdownを使いました

コード

npm install @ts-stack/markdown

import { Marked, Renderer } from '@ts-stack/markdown';

Marked.setOptions ({
    renderer: new Renderer,
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false
  });

type HAMArkDownProps = {
    markdown: string | null
}

const MArkDownComponent: React.FC<HAMArkDownProps> = ({markdown}) => {
    return markdown ? <div dangerouslySetInnerHTML={{__html: Marked.parse(markdown)}} /> : null
}

export default MArkDownComponent

あとはstyleを当てるだけ

余談

mdx使わないなら@ts-stack/markdownの方が軽い

概要

コード

余談

Discussion