feat：支持数学公式
This commit is contained in:
kadimi
parent
43d37b2a68
commit
c37941fad8
|
|
@ -0,0 +1,80 @@
|
||||||
|
@import url('https://gcore.jsdelivr.net/npm/github-markdown-css@5.8.1/github-markdown.min.css');
|
||||||
|
@import url('https://gcore.jsdelivr.net/npm/highlight.js@11.11.1/styles/night-owl.min.css');
|
||||||
|
@import url('https://gcore.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.css');
|
||||||
|
@import url('https://gcore.jsdelivr.net/npm/markdown-it-texmath@1.0.0/css/texmath.min.css');
|
||||||
|
@import url('https://gcore.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css');
|
||||||
|
|
||||||
|
.markdown-body {
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-width: 200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 16px;
|
||||||
|
font-size: 20px;
|
||||||
|
text-align: left; /* left-左对齐，center-居中对齐 */
|
||||||
|
opacity: 0; /* 设置透明度为0，代码执行完后更新为1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 代码块自动换行，方便手机端查看代码 */
|
||||||
|
pre code[class*="language-"] {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.katex {
|
||||||
|
font-size: 1.18em !important; /* 放大公式显示，与 Anki 解析的公式一样大 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Anki 似乎不支持 prefers-color-scheme，换一种方式设置暗黑模式 */
|
||||||
|
.nightMode .markdown-body {
|
||||||
|
/* dark */
|
||||||
|
color-scheme: dark;
|
||||||
|
--focus-outlineColor: #1f6feb;
|
||||||
|
--fgColor-default: #f0f6fc;
|
||||||
|
--fgColor-muted: #9198a1;
|
||||||
|
--fgColor-accent: #4493f8;
|
||||||
|
--fgColor-success: #3fb950;
|
||||||
|
--fgColor-attention: #d29922;
|
||||||
|
--fgColor-danger: #f85149;
|
||||||
|
--fgColor-done: #ab7df8;
|
||||||
|
--bgColor-default: #0d1117;
|
||||||
|
--bgColor-muted: #151b23;
|
||||||
|
--bgColor-neutral-muted: #656c7633;
|
||||||
|
--bgColor-attention-muted: #bb800926;
|
||||||
|
--borderColor-default: #3d444d;
|
||||||
|
--borderColor-muted: #3d444db3;
|
||||||
|
--borderColor-neutral-muted: #3d444db3;
|
||||||
|
--borderColor-accent-emphasis: #1f6feb;
|
||||||
|
--borderColor-success-emphasis: #238636;
|
||||||
|
--borderColor-attention-emphasis: #9e6a03;
|
||||||
|
--borderColor-danger-emphasis: #da3633;
|
||||||
|
--borderColor-done-emphasis: #8957e5;
|
||||||
|
--color-prettylights-syntax-comment: #9198a1;
|
||||||
|
--color-prettylights-syntax-constant: #79c0ff;
|
||||||
|
--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
|
||||||
|
--color-prettylights-syntax-entity: #d2a8ff;
|
||||||
|
--color-prettylights-syntax-storage-modifier-import: #f0f6fc;
|
||||||
|
--color-prettylights-syntax-entity-tag: #7ee787;
|
||||||
|
--color-prettylights-syntax-keyword: #ff7b72;
|
||||||
|
--color-prettylights-syntax-string: #a5d6ff;
|
||||||
|
--color-prettylights-syntax-variable: #ffa657;
|
||||||
|
--color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
|
||||||
|
--color-prettylights-syntax-brackethighlighter-angle: #9198a1;
|
||||||
|
--color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
|
||||||
|
--color-prettylights-syntax-invalid-illegal-bg: #8e1519;
|
||||||
|
--color-prettylights-syntax-carriage-return-text: #f0f6fc;
|
||||||
|
--color-prettylights-syntax-carriage-return-bg: #b62324;
|
||||||
|
--color-prettylights-syntax-string-regexp: #7ee787;
|
||||||
|
--color-prettylights-syntax-markup-list: #f2cc60;
|
||||||
|
--color-prettylights-syntax-markup-heading: #1f6feb;
|
||||||
|
--color-prettylights-syntax-markup-italic: #f0f6fc;
|
||||||
|
--color-prettylights-syntax-markup-bold: #f0f6fc;
|
||||||
|
--color-prettylights-syntax-markup-deleted-text: #ffdcd7;
|
||||||
|
--color-prettylights-syntax-markup-deleted-bg: #67060c;
|
||||||
|
--color-prettylights-syntax-markup-inserted-text: #aff5b4;
|
||||||
|
--color-prettylights-syntax-markup-inserted-bg: #033a16;
|
||||||
|
--color-prettylights-syntax-markup-changed-text: #ffdfb6;
|
||||||
|
--color-prettylights-syntax-markup-changed-bg: #5a1e02;
|
||||||
|
--color-prettylights-syntax-markup-ignored-text: #f0f6fc;
|
||||||
|
--color-prettylights-syntax-markup-ignored-bg: #1158c7;
|
||||||
|
--color-prettylights-syntax-meta-diff-range: #d2a8ff;
|
||||||
|
--color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
<div class="markdown-body">
|
||||||
|
{{Front}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
// 是否显示日志信息
|
||||||
|
var isDebugging = false;
|
||||||
|
|
||||||
|
// javascript 资源加载
|
||||||
|
initScriptResource(
|
||||||
|
"https://gcore.jsdelivr.net/npm/markdown-it@14.1.0/dist/markdown-it.min.js",
|
||||||
|
"https://gcore.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/highlight.min.js",
|
||||||
|
"https://gcore.jsdelivr.net/npm/markdown-it-texmath@1.0.0/texmath.min.js",
|
||||||
|
"https://gcore.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js").then(() => {
|
||||||
|
// Anki 代码都执行完成后再执行，优先使用 Anki 自带的数学公式解析
|
||||||
|
setTimeout(() => {
|
||||||
|
clearMessageDivs();
|
||||||
|
parseMarkDownFn();
|
||||||
|
});
|
||||||
|
}).catch(error => {
|
||||||
|
appendMessageDiv('Error: ' + error);
|
||||||
|
throw error;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 转换卡片内容为 markdown 网页格式
|
||||||
|
*/
|
||||||
|
function parseMarkDownFn() {
|
||||||
|
// markdown-it 实例
|
||||||
|
let md = markdownit({
|
||||||
|
html: true,
|
||||||
|
linkify: true,
|
||||||
|
typographer: true,
|
||||||
|
breaks: true,
|
||||||
|
highlight: function (str, lang) {
|
||||||
|
if (lang && hljs.getLanguage(lang)) {
|
||||||
|
try {
|
||||||
|
return hljs.highlight(str, {language: lang}).value
|
||||||
|
} catch (__) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
}).use(window.texmath, {
|
||||||
|
engine: katex,
|
||||||
|
// 设置数学公式标识符为：$...$ or $$...$$ or \(...\) or \[...\]
|
||||||
|
// 参考：https://www.npmjs.com/package/markdown-it-texmath
|
||||||
|
delimiters: ['dollars', 'brackets'],
|
||||||
|
katexOptions: {macros: {"\\RR": "\\mathbb{R}"}}
|
||||||
|
});
|
||||||
|
// 转换内容
|
||||||
|
document.querySelectorAll('.markdown-body').forEach((div, index) => {
|
||||||
|
appendMessageDiv("------------div index: " + (index + 1) + "------------");
|
||||||
|
appendMessageDiv("Original content：", div.innerHTML);
|
||||||
|
|
||||||
|
let text = div.innerHTML
|
||||||
|
.replace(/</g, "<").replace(/>/g, ">").replace(/&/g, "&")
|
||||||
|
.replace(/ /g, ' ')
|
||||||
|
.replace(/<br>/g, '\r\n')
|
||||||
|
.trim();
|
||||||
|
|
||||||
|
appendMessageDiv("After replacing special characters：", text);
|
||||||
|
text = md.render(text);
|
||||||
|
appendMessageDiv("After markdown-it conversion：", text);
|
||||||
|
div.innerHTML = md.render(text);
|
||||||
|
});
|
||||||
|
// 最后将卡片显示，避免公式闪烁更新
|
||||||
|
document.querySelectorAll('.markdown-body').forEach((div) => {
|
||||||
|
div.style.opacity = 1;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加载 javascript 资源
|
||||||
|
* @param scriptUrls 多个资源地址
|
||||||
|
* @returns {Promise<Awaited<unknown>[]>|Promise<void>}
|
||||||
|
*/
|
||||||
|
function initScriptResource(...scriptUrls) {
|
||||||
|
// 添加判断，避免重复加载
|
||||||
|
if (typeof markdownit !== 'undefined') {
|
||||||
|
appendMessageDiv("markdown-it is loaded!")
|
||||||
|
return Promise.resolve();
|
||||||
|
}
|
||||||
|
|
||||||
|
appendMessageDiv("markdown-it 没有加载，重新添加触发加载")
|
||||||
|
return Promise.all(scriptUrls.map(url => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const script = document.createElement("script");
|
||||||
|
script.onload = resolve;
|
||||||
|
script.onerror = () => reject(new Error(`Failed to load script from ${url}`));
|
||||||
|
script.src = url;
|
||||||
|
document.head.appendChild(script);
|
||||||
|
});
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 页面添加消息提示
|
||||||
|
* @param messages 多个提示消息，使用换行分隔展示
|
||||||
|
*/
|
||||||
|
function appendMessageDiv(...messages) {
|
||||||
|
if (!isDebugging) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const messageDiv = document.createElement("div");
|
||||||
|
messageDiv.className = "my-message-red-div";
|
||||||
|
messageDiv.style.color = "red";
|
||||||
|
messageDiv.style.textAlign = "left";
|
||||||
|
messages.forEach(message => {
|
||||||
|
messageDiv.appendChild(document.createTextNode(message));
|
||||||
|
messageDiv.appendChild(document.createElement("br"));
|
||||||
|
})
|
||||||
|
messageDiv.appendChild(document.createElement("hr"))
|
||||||
|
document.body.appendChild(messageDiv);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除所有消息提示div
|
||||||
|
*/
|
||||||
|
function clearMessageDivs() {
|
||||||
|
if (!isDebugging) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const messageDivs = document.querySelectorAll(".my-message-red-div");
|
||||||
|
if (messageDivs.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
messageDivs.forEach(div => div.remove());
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
{{FrontSide}}
|
||||||
|
|
||||||
|
<hr id=answer>
|
||||||
|
|
||||||
|
<div class="markdown-body">{{Back}}</div>
|
||||||
Loading…
Reference in New Issue