React-Markdownで見出しタグを変更する


react-markdown で 見出し要素 <h1> ~ <h6> を独自に編集したい。

具体的には Material UITypography にしたい。

javascript でも問題ないですが Typescript 前提で書いています。

関連内容

タグ指定方法

react-markdownrenderers でDOMの指定を変えることが出来ます。

 

じゃあ h1 ~ h6 の設定をすればいいと思いますが、それらは heading としてまとめられています。

そこでどうやって各タグの設定をするか。

 

renderers のソースを見てみると level でタグを指定しています。

つまり 1 ~ 6level"h1" ~ "h6" にする。

 

まぁこれは冗長なので、渡ってくる値を考えるとこれで十分です。

 

同様にソースを見ていじればどのタグでも自由に変更できます。


コメントを残す

メールアドレスが公開されることはありません。