react使用markdown进行展示

有一些文档非常长，但是又要挨个设置样式，直接用

组件库 - marked

注意文档要放在public下才能读取。但非常方便

import { marked, Renderer } from "marked".....const [html, setHtml] = useState<any>("")const renderer: Renderer = new marked.Renderer()const getMarkdownFile = () => {const path = "/PrivacyPolicy.md"if (!path) {return}fetch(path).then(function (response) {return response.text()}).then(function (data) {setHtml(marked(data, { renderer }))})}useEffect(() => {getMarkdownFile()}, [])......<div id="markdown"><div dangerouslySetInnerHTML={{ __html: html }} />
</div>

然后css不用全局，用id即可

最后是我的markdwon样式

#markdown {overflow: scroll;color: rgba(255, 255, 255, 0.80);padding: 0 20px;font-family: "PingFang SC";font-size: 14px;font-style: normal;font-weight: 400;line-height: 200%;
}
#markdown .effectiveDate {color:rgba(255, 255, 255, 0.50); ;
}#markdown strong {color: white;
}#markdown p {margin: 20px 0;
}
#markdown .no-wrap{margin: 20px 0;
}
#markdown h5 {padding: 20px 0 10px 0;
}
#markdown h5 strong{color: #998D76;
}
#markdown h1 strong{color: #998D76;/* position: relative; *//* top: 15px; */
}
#markdown a {color: #83574E;
}#markdown li p {margin-bottom: 0px;padding: 0px;
}#markdown ul {list-style: disc;padding-left: 24px;
}#markdown li {list-style: disc;
}#markdown ol {padding-left: 20px;
}
#markdown ol li {list-style: auto;
}