feat: 添加数学公式的解析

This commit is contained in:
laishunchao 2025-04-15 11:49:19 +08:00
parent 580f442c57
commit 7607fb89a9
2 changed files with 28 additions and 19 deletions

View File

@ -16,6 +16,14 @@
rel="stylesheet" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/> />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/markdown-it-texmath@1.0.0/css/texmath.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css"
/>
<title>anki-md模板测试chrome等浏览器开发测试即可</title> <title>anki-md模板测试chrome等浏览器开发测试即可</title>
</head> </head>
<style> <style>
@ -44,10 +52,16 @@
</div> </div>
<!-- prettier-ignore --> <!-- prettier-ignore -->
<div class="md-content"> <div class="md-content">
这是一个行内公式 行内公式:$E=mc^2$
$E=mc^2$ ***
和一个块级公式 块级公式:
$$\\frac{d}{dx}(x^n) = nx^{n-1}$$ $$\frac{d}{dx}(x^n) = nx^{n-1}$$
***
矩阵:
$$\begin{pmatrix} a & b \\ c & d \end{pmatrix}$$
***
积分:
$$\int_{a}^{b} f(x) \, dx$$
*** ***
> 呵呵呵 > 呵呵呵
@ -85,14 +99,12 @@ console.log('hello world')
getScript( getScript(
"https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/11.4.0/highlight.min.js" "https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/11.4.0/highlight.min.js"
), ),
// 添加markdown-it-texmath插件
getScript( getScript(
"https://cdn.jsdelivr.net/npm/markdown-it-texmath/texmath.min.js" "https://cdn.jsdelivr.net/npm/markdown-it-texmath@1.0.0/texmath.min.js"
), ),
// 添加MathJax
getScript( getScript(
"https://cdn.bootcdn.net/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js" "https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js"
) ),
]; ];
// 加载资源并初始化 // 加载资源并初始化
@ -156,16 +168,11 @@ console.log('hello world')
return ""; // use external default escaping return ""; // use external default escaping
}, },
}); });
md.use(texmath, {
// 配置markdown-it-texmath插件 engine: katex,
if (window.texmath) { delimiters: "dollars",
md.use(window.texmath, { katexOptions: { macros: { "\\RR": "\\mathbb{R}" } },
engine: MathJax, });
delimiters: 'dollars',
katexOptions: { macros: {"\\RR": "\\mathbb{R}"} }
});
}
document.querySelectorAll(".md-content").forEach((div, index) => { document.querySelectorAll(".md-content").forEach((div, index) => {
console.log("查找到的容器元素", div); console.log("查找到的容器元素", div);
// 需要去除首尾空格 不然markdown-it会解析错误 // 需要去除首尾空格 不然markdown-it会解析错误

View File

@ -1,6 +1,8 @@
@import url('https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.8.1/github-markdown.min.css'); @import url('https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.8.1/github-markdown.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/base16/onedark.min.css'); @import url('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/base16/onedark.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css'); @import url('https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css');
@import url('https://cdn.jsdelivr.net/npm/markdown-it-texmath@1.0.0/css/texmath.min.css');
@import url('https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css');
/* /*
把这里的样式代码 ctrl a 复制到卡片模板 的样式区域 把这里的样式代码 ctrl a 复制到卡片模板 的样式区域
*/ */