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;
}
相关推荐
牧羊狼的狼15 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手17 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲17 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell17 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮19 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel19 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip20 小时前
JavaScript事件流
前端·javascript
小菜全20 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C20 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG20 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js