Tools
/
anki-md-template
mirror of https://github.com/aote777/anki-md-template.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: Tools:97c03a0fcd1f6c51a683282912a69824448b6d4d
Branches Tags
Tools:master
Tools:2.0.0
Tools:v1.0.0
..
compare: Tools:afd9ca542782144554b19be96efd796f872136e9
Branches Tags
Tools:master
Tools:2.0.0
Tools:v1.0.0

2 Commits
97c03a0fcd ... afd9ca5427

Author SHA1 Message Date
小能饼干 afd9ca5427
Merge pull request #20 from aisahpA/master 2025-04-30 22:00:55 +08:00
kadimi 5fa9e09b7d fix：隐藏数学公式转换异常，优化日志、优化<code></code>包裹代码处理 
1、配置 config_showMathError 显示/隐藏数学公式转换异常
2、优化日志显示，配置 config_logLevel 可指定日志级别
3、<code></code>包裹的代码原样输出
 2025-04-30 21:56:31 +08:00
2 changed files with 261 additions and 57 deletions
Show Stats Expand all files Collapse all files

118
模板-支持数学公式/card-demo-test.html Normal file
View File

@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="cn" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="样式.css">
<title>Anki-Markdown 模板测试</title>
</head>
<style>
.markdown-body {
max-width: 980px;
padding: 45px;
}
</style>
<body>
<!-- prettier-ignore -->
<div class="markdown-body">
> 呵呵呵
# 一级标题
## 二级标题
### 三级标题
---
**加粗**
*斜体*
***加粗斜体***
***
> 引用
---
- 无序列表
---
1. 有序列表
---
[链接](https://www.baidu.com)
***
![图片](https://www.baidu.com/img/bd_logo1.png)
---
`行内代码`
***
```javascript
// 代码块
console.log('hello world')
```
```java
/**
* @param src 待拷贝的数组.
* @param srcPos 待拷贝数组开始位置.
* @param dest 目标数组.
* @param destPos 目标数组开始位置.
* @param length 拷贝长度.
*/
@HotSpotIntrinsicCandidate
public static native void arraycopy(Object src, int srcPos, Object dest, int destPos, int length);
```
</div>
<!-- prettier-ignore -->
<div class="markdown-body">
***
超长代码换行显示
```js
const example = "This is a very long string that will wrap automatically when exceeding screen
width.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbccccccccccccccccccccccccccccccccccccccddddddddddddddddddddd";
```
</div>
<div class="markdown-body">
行内公式：$E=mc^2$
***
块级公式：
$$\frac{d}{dx}(x^n) = nx^{n-1}$$
***
矩阵：
$$\begin{pmatrix} a & b \\ c & d \end{pmatrix}$$
***
积分：
$$\int_{a}^{b} f(x) \, dx$$
</div>
<div class="markdown-body">
***
配置 config_showMathError 为 false 时忽略数学公式转换异常
$2^{层数-1}$ （有异常：unicodeTextInMathMode）
$E=mc^2%$ （有异常：commentAtEnd %）
***
</div>
<div class="markdown-body">
<ul>
<li>下面代码的 HTML 格式中 <code>&amp;gt;</code> 与 <code>&amp;lt;</code> 不能转义为 &gt; 和 &lt;，否则会有异常的下划线</li>
<li>不转换 <code>&lt;code&gt;&lt;/code&gt;</code>包裹的内容</li>
</ul>
<pre><code class="hljs java language-java"><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">NumberPair</span>&lt;U <span class="hljs-keyword">extends</span> <span class="hljs-title class_">Number</span>, V <span class="hljs-keyword">extends</span> <span class="hljs-title class_">Number</span>&gt; <span class="hljs-keyword">extends</span> <span class="hljs-title class_">Pair</span>&lt;U,V&gt; {
<span class="hljs-comment">//</span>
<span class="hljs-keyword">public</span> <span class="hljs-title function_">NumberPair</span><span class="hljs-params">(U first, V second)</span> {
<span class="hljs-built_in">super</span>(first, second);
}
}
</code></pre>
</div>
<script src="https://gcore.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script type="text/javascript">
$.get("正面内容模版.html", function (data) {
$('#templateScriptDiv').html(data)
});
</script>
<div id="templateScriptDiv"></div>
</body>
</html>

200
模板-支持数学公式/正面内容模版.html
View File

@ -5,24 +5,29 @@
<script> <script>
// 是否显示日志信息 // 日志级别： debug、info、warn、error、off
var isDebugging = false; var config_logLevel = "error";
// 是否展示数学公式转换错误信息
var config_showMathError = false;
// javascript 资源加载 // javascript 资源加载
initScriptResource( initScriptResource([
"https://gcore.jsdelivr.net/npm/markdown-it@14.1.0/dist/markdown-it.min.js", "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/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/markdown-it-texmath@1.0.0/texmath.min.js",
"https://gcore.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js").then(() => { "https://gcore.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js"
]).then(() => {
// Anki 代码都执行完成后再执行，优先使用 Anki 自带的数学公式解析 // Anki 代码都执行完成后再执行，优先使用 Anki 自带的数学公式解析
setTimeout(() => { setTimeout(() => {
clearMessageDivs(); try {
parseMarkDownFn(); parseMarkDownFn();
} catch (e) {
DivLog.error("Error: " + e);
}
}); });
}).catch(error => { })
appendMessageDiv('Error: ' + error);
throw error;
});
/** /**
@ -49,22 +54,29 @@
// 设置数学公式标识符为：$...$ or $$...$$ or \(...\) or \[...\] // 设置数学公式标识符为：$...$ or $$...$$ or \(...\) or \[...\]
// 参考：https://www.npmjs.com/package/markdown-it-texmath // 参考：https://www.npmjs.com/package/markdown-it-texmath
delimiters: ['dollars', 'brackets'], delimiters: ['dollars', 'brackets'],
katexOptions: {macros: {"\\RR": "\\mathbb{R}"}} // 参考：https://katex.org/docs/options
katexOptions: {
output: 'html',
throwOnError: false,
// IOS 端没有 console.warn 方法
strict: (errorCode, errorMsg, token) => {
if (config_showMathError) {
DivLog.error('Warn: ' + errorCode + ' ' + errorMsg + ' ' + token);
return "error";
} else {
DivLog.warn('Warn: ' + errorCode + ' ' + errorMsg + ' ' + token);
return "ignore";
}
}
}
}); });
// 转换内容 // 转换内容
document.querySelectorAll('.markdown-body').forEach((div, index) => { document.querySelectorAll('.markdown-body').forEach((div, index) => {
appendMessageDiv("------------div index: " + (index + 1) + "------------"); // 预处理文本，替换特殊字符，如：&lt; &gt; &amp; &nbsp;
appendMessageDiv("Original content：", div.innerHTML); let text = preProcessText(div, index)
// 转换成 markdown 网页格式
let text = div.innerHTML
.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&")
.replace(/&nbsp;/g, ' ')
.replace(/<br>/g, '\r\n')
.trim();
appendMessageDiv("After replacing special characters：", text);
text = md.render(text); text = md.render(text);
appendMessageDiv("After markdown-it conversion：", text); DivLog.debug("After markdown-it conversion：", text);
div.innerHTML = md.render(text); div.innerHTML = md.render(text);
}); });
// 最后将卡片显示，避免公式闪烁更新 // 最后将卡片显示，避免公式闪烁更新
@ -73,19 +85,49 @@
}); });
} }
/**
* 预处理文本，替换特殊字符
* @param {Element} div
* @param {number} index
* @returns {string}
*/
function preProcessText(div, index) {
DivLog.debug("------------.markdown-body: " + (index + 1) + "------------");
DivLog.debug("Original content：", div.innerHTML);
let text = div.innerHTML
// <code></code> 包裹的内容不做处理
let code_tag_matches
[text, code_tag_matches] = Censor.censorCodeHtml(text);
if (code_tag_matches.length > 0) {
DivLog.debug("After replacing <code></code>：", text);
}
text = text.trim()
.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&")
.replace(/&nbsp;/g, ' ')
.replace(/<br>/g, '\r\n');
text = Censor.decensorCodeHtml(text, code_tag_matches)
DivLog.debug("After replacing special characters：", text);
return text;
}
/** /**
* 加载 javascript 资源 * 加载 javascript 资源
* @param scriptUrls 多个资源地址 * @param scriptUrls 多个资源地址数组
* @returns {Promise<Awaited<unknown>[]>|Promise<void>} * @returns {Promise<Awaited<unknown>[]>|Promise<void>}
*/ */
function initScriptResource(...scriptUrls) { function initScriptResource(scriptUrls) {
initMyClass();
// 添加判断，避免重复加载 // 添加判断，避免重复加载
if (typeof markdownit !== 'undefined') { if (typeof markdownit !== 'undefined') {
appendMessageDiv("markdown-it is loaded!") DivLog.info("markdown-it is loaded!")
return Promise.resolve(); return Promise.resolve();
} }
appendMessageDiv("markdown-it 没有加载，重新添加触发加载") DivLog.info("markdown-it did not load, re-adding triggers loading!")
return Promise.all(scriptUrls.map(url => { return Promise.all(scriptUrls.map(url => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const script = document.createElement("script"); const script = document.createElement("script");
@ -94,41 +136,85 @@
script.src = url; script.src = url;
document.head.appendChild(script); document.head.appendChild(script);
}); });
})); })).catch(error => {
DivLog.error('Error: ' + error);
throw error;
});
} }
/**
* 页面添加消息提示 function initMyClass() {
* @param messages 多个提示消息，使用换行分隔展示 if (typeof DivLog === 'undefined') {
*/ window.DivLog = {
function appendMessageDiv(...messages) { LOG_LEVEL: "info",
if (!isDebugging) { levelMap: {'debug': 5, 'info': 4, 'warn': 3, 'error': 2, 'off': 1},
return;
debug(...messages) {
if (this.levelMap[this.LOG_LEVEL] >= 5) {
this._log("", ...messages);
}
},
info(...messages) {
if (this.levelMap[this.LOG_LEVEL] >= 4) {
this._log("", ...messages);
}
},
warn(...messages) {
if (this.levelMap[this.LOG_LEVEL] >= 3) {
this._log("orange", ...messages);
}
},
error(...messages) {
if (this.levelMap[this.LOG_LEVEL] >= 2) {
this._log("red", ...messages);
}
},
_log(fontColor, ...messages) {
const messageDiv = document.createElement("div");
messageDiv.className = "my-message-div";
messageDiv.style.color = fontColor;
messages.forEach(message => {
messageDiv.appendChild(document.createTextNode(message));
messageDiv.appendChild(document.createElement("br"));
});
messageDiv.appendChild(document.createElement("hr"));
document.body.appendChild(messageDiv)
},
clearLogDiv() {
document.querySelectorAll(".my-message-div").forEach(div => div.remove());
}
};
DivLog.LOG_LEVEL = config_logLevel;
}
DivLog.clearLogDiv();
if (typeof Censor === 'undefined') {
const ANKI_CODE_REGEXP = /<code[^>]*>([\s\S]*?)<\/code>/g;
const ANKI_CODE_REPLACE = "##ANKI_CODE_REPLACE##";
window.Censor = {
censorCodeHtml: function (note_text) {
return this._censor(note_text, ANKI_CODE_REGEXP, ANKI_CODE_REPLACE)
},
decensorCodeHtml: function (note_text, replacements) {
return this._decensor(note_text, ANKI_CODE_REPLACE, replacements)
},
_censor: function (note_text, regexp, mask) {
/*Take note_text and replace every match of regexp with mask, simultaneously adding it to a string array*/
let matches = []
for (let match of note_text.matchAll(regexp)) {
matches.push(match[0])
}
return [note_text.replace(regexp, mask), matches]
},
_decensor: function (note_text, mask, replacements) {
for (let replacement of replacements) {
note_text = note_text.replace(mask, replacement)
}
return note_text
}
}
} }
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> </script>