react-markdown で 見出し要素 <h1> ~ <h6> を独自に編集したい。
具体的には Material UI の Typography にしたい。
javascript でも問題ないですが Typescript 前提で書いています。
関連内容
タグ指定方法
react-markdown は renderers でDOMの指定を変えることが出来ます。
|
1 |
<Markdown source={md} renderers={renderers} /> |
|
1 2 3 4 5 6 7 8 |
const renderers = { paragraph: Typography, listItem: ({ children }: any) => ( <li> <Typography>{children}</Typography> </li> ), }; |
じゃあ h1 ~ h6 の設定をすればいいと思いますが、それらは heading としてまとめられています。
そこでどうやって各タグの設定をするか。
renderers のソースを見てみると level でタグを指定しています。
つまり 1 ~ 6 の level を "h1" ~ "h6" にする。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
heading: ({ level, children, }: { level: 1 | 2 | 3 | 4 | 5 | 6; children: any; }) => { const v = `h${level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; return ( <Typography variant={v} gutterBottom> {children} </Typography> ); }, |
まぁこれは冗長なので、渡ってくる値を考えるとこれで十分です。
|
1 2 3 4 5 |
heading: ({ level, children }: any) => ( <Typography variant={`h${level}` as any} gutterBottom> {children} </Typography> ), |
同様にソースを見ていじればどのタグでも自由に変更できます。