实时转换marked生成的结构中的latex为公式-mathjax v2

原创已于 2025-02-27 15:46:48 修改 · 269 阅读
CC 4.0 BY-SA版权
文章标签：
#marked #mathjax #latex实时转换公式 #diff-dom #prism
于 2024-12-04 17:57:01 首次发布
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实时转换marked生成的结构中的latex为公式,prism进行代码块处理</title>
		<link rel="stylesheet" href="prism.css" />
		<style>
			code {
			    font-size: 0.875em;
			    color: #d63384;
			    word-wrap: break-word;
			}
		</style>
		<script src="marked.js"></script>
		<script src="prism.js"></script>
		<script src="diffDOM.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
		<script type="text/x-mathjax-config">
		    if(MathJax){
		        MathJax.Hub.Config({
		            jax: ["input/TeX","output/HTML-CSS", "output/PreviewHTML"],  //输出格式配置：latex 解析为 DOM结构
		            tex2jax: {
		                inlineMath: [['$$','$$'], ['$','$']],
		                ignoreClass:"question-parent"
		            },
		            "HTML-CSS": {
		                showMathMenu: false,            // 隐藏右键菜单展示
		                linebreaks: {
		                    automatic: true,  //超长公式换行处理（默认是false不换行）
		                    width: "80%"      //设置换行的点，默认是遇到等号=换行
		                }
		            }
		        });
		        MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementsByClassName('diff')])
		    }
		</script>
		<script type="text/javascript">
		  let isMathjaxConfig = false; //用于标识是否配置
		  let num = 0
		  const initMathjaxConfig = () => {
		    if (!window.MathJax) {
		      return;
		    }
		    window.MathJax.Hub.Config({
		      jax: ["input/TeX","output/HTML-CSS", "output/PreviewHTML"],  //输出格式配置：latex 解析为 DOM结构
		      tex2jax: {
		        inlineMath: [['$$','$$'], ['$','$']],
		        ignoreClass:"question-parent"
		      },
		      "HTML-CSS": {
		        showMathMenu: false,            // 隐藏右键菜单展示
		        linebreaks: {
		          automatic: true,  //超长公式换行处理（默认是false不换行）
		          width: "80%"      //设置换行的点，默认是遇到等号=换行
		        }
		      }
		    });
		    isMathjaxConfig = true; //配置完成，改为true
		  };
		
		  const MathQueue = function(el) {
		    if (!window.MathJax) {
		      return;
		    }
		    window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, el])
		  };
		</script>
		<script src="jquery.js"></script>
		<style>
			body {
				background-color: #f1f1f1;
			}
			.diff {
				background: #ffffff;
				width: 800px;
				height: auto;
				padding: 10px 20px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="diff"></div>
	</body>
</html>
<script type="text/javascript">
	let domdiff = new diffDOM()
	let str =  "常用的数学公式涵盖了不同的数学领域，以下是一些基本且常用的公式：\n\n1. **代数公式**\n   - 二次方程求根公式：对于二次方程 $ax^2 + bx + c = 0$，\n     $$ x = \\frac{{-b \\pm \\sqrt{{b^2 - 4ac}}}}{{2a}} $$\n\n2. **几何公式**\n   - 圆的面积和周长\n     - 面积：$A = \\pi r^2$\n     - 周长：$C = 2\\pi r$\n\n   - 长方形面积和周长\n     - 面积：$A = lw$\n     - 周长：$P = 2(l + w)$\n\n3. **微积分公式**\n   - 导数定义：\n     $$ f'(x) = \\lim_{{h \\to 0}} \\frac{{f(x+h) - f(x)}}{h} $$\n   \n   - 积分基本形式：\n     $$ \\int x^n \\, dx = \\frac{x^{n+1}}{n+1} + C, \\, (n \\neq -1) $$\n\n4. **概率和统计公式**\n   - 概率加法公式：对于两个事件 $A$ 和 $B$，\n     $$ P(A \\cup B) = P(A) + P(B) - P(A \\cap B) $$\n\n   - 均值（期望值）：\n     $$ \\mu = \\frac{1}{N} \\sum_{i=}^{N} x_i $$ \n\n5. **三角学公式**\n   - 勾股定理：\n     $$ a^2 + b^2 = c^2 $$\n   \n   - 三角函数常用恒等式：\n     - $\\sin^2 \\theta + \\cos^2 \\theta = 1$\n     - $\\tan \\theta = \\frac{\\sin \\theta}{\\cos \\theta}$\n\n6. **数列与级数公式**\n   - 等差数列的第$n$项：\n     $$ a_n = a_1 + (n-1)d $$\n\n   - 等比数列的第$n$项：\n     $$ a_n = a_1 \\cdot r^{n-1} $$\n\n7. **矩阵运算基本公式**\n   - 矩阵乘法：\n     如果 $A$ 为 $m \\times n$ 矩阵，$B$ 为 $n \\times p$ 矩阵，则乘积 $C = AB$ 是 $m \\times p$ 矩阵，其中\n     $$ c_{ij} = \\sum_{k=1}^n a_{ik}b_{kj} $$\n\n这些公式只是开始，还有许多其他的公式应用于不同的数学和科学领域。在使用jQuery时，如果你想清空某个元素的文本内容及其所有子元素的内容，你可以使用 `.empty()` 方法。这会删除所有子元素和文本节点。\n\n假设你有如下的 HTML 结构：\n\n```html\n<div id=\"parent\">\n    Some text\n    <p>Child paragraph</p>\n</div>\n```\n\n要清空 `#parent` 元素以及其所有子元素的内容，可以使用以下的 jQuery 代码：\n\n```javascript\n$('#parent').empty();\n```\n\n这行代码会移除 `#parent` 元素内部的所有内容，包括文本和任何子节点，让 `#parent` 变成一个空的 `<div>`。"

	let length = 0
	let strNew = ""
	let timer = setInterval(() => {
		length +=10
		if (length > str.length) {
			clearTimeout(timer);
			length = str.length
		}
		printHtml(length)
	}, 1)
	
	function printHtml(length){
		// 所有下划线需要转义 否则marked会将它转换成em标签 导致公式渲染失败
		strNew = replaceUnderscoreInDollarString(str.substring(0, length))
		let box = $(`<div class="diff">${replaceUnderscoreInDollarString1(marked.marked(strNew))}</div>`)
		dealCodeCopy(box)
		if (!isMathjaxConfig) { //判断是否初始配置，若无则配置。
		  initMathjaxConfig();
		}
		MathQueue(box.get(0));
		MathJax.Hub.Queue(function() {
			const diff = domdiff.diff(
				$('.diff').get(0),  // 更新后的DOM节点
				box.get(0), // 原始DOM节点
			)
			domdiff.apply($('.diff').get(0), diff)
		})
	}

	/**
	 * 处理代码块
	 */
	function dealCodeCopy(el) {
		const pre = el.find('pre')
		if (pre) {
			pre.addClass('line-numbers no-whitespace-normalization')
			$.each(pre.find('code'), (i, v) => {
				try {
					Prism.highlightElement(v)
				} catch (e) {
					console.error(e.message)
				}
			})
		}
	}
    function replaceUnderscoreInDollarString(input) {
			// 使用正则表达式匹配被$符号包裹的字符串
		return input.replace(/\$([^$]+)\$/g, function(match, p1) {
			// p1是被$包裹的内容，需要将下划线替换为你想要的字符，例如替换为空格
			return '$' + p1.replace(/\\_/g, '&#95;').replace(/\_/g, '&#95;').replace(/_/g, '&#95;').replace(/\\int/g,
					'\\int ').replace(/\hline/g, '\hline\n') + '$';
		});
	}
	/**
	 * 将公式内的占位符替换为_
	 */
	function replaceUnderscoreInDollarString1(input) {
		// 使用正则表达式匹配被$符号包裹的字符串
		return input.replace(/\$([^$]+)\$/g, function(match, p1) {
			// p1是被$包裹的内容，需要将下划线替换为你想要的字符，例如替换为空格
			return '$' + p1.replace(/&#95;/g, '_') + '$';
		});
	}
</script>