https://github.com/rexxars/react-markdown
yarn add react-markdown
import ReactMarkdown from "react-markdown"
let markdown='# P01:課程介紹和環境搭建\n' +
'[ **M** ] arkdown + E [ **ditor** ] = **Mditor** \n' +
'> Mditor 是一個簡潔、易於集成、方便擴展、期望舒服的編寫 markdown 的編輯器,僅此而已... \n\n' +
'**這是加粗的文字**\n\n' +
'*這是傾斜的文字*`\n\n' +
'***這是斜體加粗的文字***\n\n' +
'~~這是加刪除線的文字~~ \n\n'+
'\`console.log(111)\` \n\n'+
'# p02:來個Hello World 初始Vue3.0\n' +
'> aaaaaaaaa\n' +
'>> bbbbbbbbb\n' +
'>>> cccccccccc\n'+
'***\n\n\n' +
'# p03:Vue3.0基礎知識講解\n' +
'> aaaaaaaaa\n' +
'>> bbbbbbbbb\n' +
'>>> cccccccccc\n\n'+
'# p04:Vue3.0基礎知識講解\n' +
'> aaaaaaaaa\n' +
'>> bbbbbbbbb\n' +
'>>> cccccccccc\n\n'+
'#5 p05:Vue3.0基礎知識講解\n' +
'> aaaaaaaaa\n' +
'>> bbbbbbbbb\n' +
'>>> cccccccccc\n\n'+
'# p06:Vue3.0基礎知識講解\n' +
'> aaaaaaaaa\n' +
'>> bbbbbbbbb\n' +
'>>> cccccccccc\n\n'+
'# p07:Vue3.0基礎知識講解\n' +
'> aaaaaaaaa\n' +
'>> bbbbbbbbb\n' +
'>>> cccccccccc\n\n'+
'```var a=11; ```'
<div className="detailed-content">
markdown解析內容
<ReactMarkdown
source={markdown}
escapeHtml={false}//html標籤不解析保留文本
/>
</div>