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
: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
的\
会被当做转义符处理。