通过marked.js和mathjax.js共同实现web端的带数学公式的markdown转换为html

lisenlingood

已于 2022-12-17 20:20:47 修改

阅读量915

点赞数 1

文章标签： javascript 前端 html

于 2022-12-17 20:13:30 首次发布

本文链接：https://blog.csdn.net/m0_62794055/article/details/128356701

版权

基本markdown

marked.js

marked.js是一种渲染markdown到html的第三方库，简单方便。基本上几句代码就可以完成渲染：

<!doctype html>
<html>
<head>
  <!--... -->
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
    <!--... -->
    <div id="markdown_area"></div>
    <!--... -->
</body>
<script>
// 1. 调用 parse 方法，将对应的 markdown 文本内容转译为 html 页面；
let markdown = "# HELLO MARKDOWN!\n\n## hello markdown\n"
// 别的方法如fetch(url).then((data)=>{return data.text()}).then((res)=>{let markdown = res})
let parsedHtml = marked.parse(markdown);
document.getElementById('markdown_area').innerHTML = parsedHtml;
</script>
</html>

效果如图

在这里插入图片描述

但是如果我们将带有数学公式的markdown内容交给marked.js解析时，会发现其只会原封不动地连带“$”一起当作文本内容，如图
在这里插入图片描述

为了避免发生这样的事情。我们可以使用另一个第三方库——mathJax.js

MathJax.js

<!doctype html>
<html>
<head>
  <!--... -->
  <script>
    MathJax = {
        // 仅仅为标志符，表示在这个符号中间的内容为公式内容，官方文档多了['(',')']
        tex: {inlineMath: [['$', '$']]}
    };
  </script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
    <!--... -->
    <div id="markdown_area"></div>
    <!--... -->
</body>
<script>
// 1. 调用 parse 方法，将对应的 markdown 文本内容转译为 html 页面；
let markdown = "# HELLO MARKDOWN!\n\n## hello markdown\n\n$$hello_{markdown}$$"
let parsedHtml = marked.parse(markdown);
document.getElementById('markdown_area').innerHTML = parsedHtml;
// 要放在markdownn解析渲染步骤之后
MathJax.typeset();
/* 异步获取markdown并且进行渲染的话
fetch(url)
.then((data)=>{return data.text()})
.then((res)=>{document.getElementById('markdown_area').innerHTML = marked.parse(res);})
.then(()=>{MathJax.typeset();})
*/
</script>
</html>

效果
在这里插入图片描述