marked + mathjax 实现支持数学公式的 markdown 转 html

最新推荐文章于 2023-07-14 17:43:40 发布

墨城之左

最新推荐文章于 2023-07-14 17:43:40 发布

阅读量2.1k

点赞数 4

分类专栏：技术杂文文章标签： html javascript 前端 marked mathjax

本文链接：https://blog.csdn.net/antony1776/article/details/125800976

版权

技术杂文专栏收录该内容

57 篇文章 1 订阅

订阅专栏

1. marked 介绍

marked 是一个 JavaScript 编写的全功能 Markdown 解析和编译器。marked 的目的是快速的编译超大块的 Markdown 文本而不必担心结果会出乎意料或者花费很长时间。

marked 最初是为 Node.JS 编写，现在已完全兼容客户端浏览器。

Github 库
 在线 Demo
Document

在浏览器中使用：

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
</head>
<body>
  <div id="content"></div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
  	// 1. 调用 parse 方法，将对应的 markdown 文本内容转译为 html 页面；
  	let parsedHtml = marked.parse('# Marked in browser\n\nRendered by **marked**.');

    document.getElementById('content').innerHTML = parsedHtml;
  </script>
</body>
</html>

页面如下：
在这里插入图片描述

2. mathjax 介绍

mathjax 是一个开源的 web 数学公式渲染器，由 JS 编写而成，可用于渲染符合 LaTeX、MathML，AsciMath 等规则的数学表达式。

官网
 Github
document

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script>
    MathJax = {
        tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}
    };
  </script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
</head>
<body>
    <p>
        When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
        $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
    </p>
</body>
</html>

页面如下：
在这里插入图片描述

3. 动态编译并显示 markdown 页面

mathjax 的机制是在加载脚本时，扫描页面并渲染页面中包含的数学公式。

在 mathjax 脚本加载后，动态新增的页面，并不会被扫描并渲染，这个时候，需要调用 MathJax.typeset() 来执行渲染。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <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>
    <p>
        When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
        $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
    </p>
    <hr>
    <div id="content" ></div>
    <script>
      // 1. 调用 parse 方法，将对应的 markdown 文本内容转译为 html 页面；
  	let parsedHtml = marked.parse(`When $a \\ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
        $$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.$$`);
 
    document.getElementById('content').innerHTML = parsedHtml; // 新增页面

    // 2. 执行 mathjax 渲染
    MathJax.typeset();
    </script>

</body>
</html>