杂七杂八(一) —— React展示markdown格式字符串

React展示MarkDown格式字符串

1.展示MarkDown格式字符串方法一 —— marked方法

1.1 下载marked包

用于将markdown格式的字符串转换成HTML格式的标签数据 (element)

npm i marked
npm i @types/marked --save-dev

1.2 下载highlight.js包

用于高亮代码块

npm i highlight.js

1.3 实例

• 导入相关包

  // markdown样式
  import {marked} from 'marked' // 导入markdown转换器
  import hljs from 'highlight.js' // 导入markdown代码块高亮包
  import "highlight.js/styles/atom-one-light.css" // 代码块具体的高亮样式
  

• 创建存放要展示的markdown数据的容器 (div标签)

  <div id="Note-Container"></div>
  

• 将markdown格式字符串数据转化成HTML格式标签放到div容器里

  function Get_Note(){
      let a = "# markdown\n```typescript\n// markdown样式\nimport {marked} from 'marked' // 导入markdown转换器\nimport hljs from 'highlight.js' // 导入markdown代码块高亮包\n```"
      return marked(a)
  }
  
  React.useEffect(() => {
      let markdown_element: any = document.getElementById("Note-Container")
      markdown_element.innerHTML = Get_Note()
      hljs.highlightAll() // 高亮代码块
  }, [])
  

• 效果如下：

上面我们学会了如何在React里面将MarkDown格式的字符串展示出来，但是我们会发现，marked是不能展示出latex公式的。为了解决这个问题，我们可以使用katex包。

2. React展示Latex公式方法 —— Katex

2.1 下载相关包 —— react-katex和katex

npm install react-katex
npm install katex

2.2 实例：

• 导入相关包：

  import "katex/dist/katex.min.css"
  const {InlineMath} = require("react-katex")
  

• 前端展示：

  <InlineMath math="f(x)=sign(w\cdot x + b)"></InlineMath>
  // 或
  <InlineMath>f(x)=sign(w\cdot x + b)</InlineMath>
  

• 展示效果如下：

上面我们已经学会了如何展示MarkDown格式的字符串以及展示其中的Latex数学公式。

但是我们在具体使用的时候会发现，我们一般是借助js的innerHTML方法将marked()返回的字符串数据引入到前端的。

当我们将<InlineMath>标签替换到marked()返回的字符串中用于展示Latex数学公式时，我们会发现，因为innerHTML是展示静态资源的方法，上面的做法会导致我们的<InlineMath>标签无法发挥作用。

样例：

function xxx(){
    React.useEffect(() => {
        let a: any = document.getElementById("test-latex")
        a.innerHTML = marked("## hello \n <InlineMath>f(x)=sign(w\cdot x + b)</InlineMath>")
    }, [])
    
    return(
        <div id="test-latex"></div>
    )
}

• 效果：

• 后台的具体HTML代码信息：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MnYitbpi-1669439894591)(D:\2_计算机课外知识学习\3_前端小知识\3_images\5.png)]

那么对于这种问题我们该如何解决呢？

这里我们可以借助md-editor-rt包来解决。

3. React版MarkDown编辑器 —— md-editor-rt

md-editor-rt

md-editor-rt：React版本的MarkDown编辑器，集成了MarkDown的编辑和展示的相关功能，同时还可以展示Latex数学公式。

3.1 下载md-editor-rt

yarn add md-editor-rt

3.2 实例

• 导入相关包

  import MdEditor from "md-editor-rt"
  import "md-editor-rt/lib/style.css"
  

• 在前端展示

  <MdEditor 
      style={{float: 'left', width: Theme.width, height: Theme.height}}
      modelValue={"## Hello \n $f(x)=sign(w\\cdot x + b)$"} // 要展示的markdown字符串
      previewOnly={true} // 只展示预览框部分
  ></MdEditor>
  

• 展示效果：

**注：**使用md-editor-rt展示Latex时，要用$符号囊括Latex数学公式的代码。其次，要保证$里面只有Latex代码，不要有其它的符号如\n。最后，在诸如\cdot等Latex符号前要加一个\，否则\code的\会被当做转义符处理。

Latex数学公式的代码。其次，要保证$里面只有Latex代码，不要有其它的符号如\n。最后，在诸如\cdot等Latex符号前要加一个\，否则\code的\会被当做转义符处理。