fix：隐藏数学公式转换异常，优化日志、优化<code></code>包裹代码处理
1、配置 config_showMathError 显示/隐藏数学公式转换异常 2、优化日志显示，配置 config_logLevel 可指定日志级别 3、<code></code>包裹的代码原样输出
This commit is contained in:
kadimi
parent
97c03a0fcd
commit
5fa9e09b7d
|
|
@ -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)
|
||||
***
|
||||
|
||||
|
||||
---
|
||||
`行内代码`
|
||||
***
|
||||
```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>&gt;</code> 与 <code>&lt;</code> 不能转义为 > 和 <，否则会有异常的下划线</li>
|
||||
<li>不转换 <code><code></code></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><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>> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">Pair</span><U,V> {
|
||||
<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>
|
||||
|
|
@ -5,24 +5,29 @@
|
|||
|
||||
<script>
|
||||
|
||||
// 是否显示日志信息
|
||||
var isDebugging = false;
|
||||
// 日志级别： debug、info、warn、error、off
|
||||
var config_logLevel = "error";
|
||||
|
||||
// 是否展示数学公式转换错误信息
|
||||
var config_showMathError = false;
|
||||
|
||||
|
||||
// javascript 资源加载
|
||||
initScriptResource(
|
||||
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(() => {
|
||||
"https://gcore.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js"
|
||||
]).then(() => {
|
||||
// Anki 代码都执行完成后再执行，优先使用 Anki 自带的数学公式解析
|
||||
setTimeout(() => {
|
||||
clearMessageDivs();
|
||||
parseMarkDownFn();
|
||||
try {
|
||||
parseMarkDownFn();
|
||||
} catch (e) {
|
||||
DivLog.error("Error: " + e);
|
||||
}
|
||||
});
|
||||
}).catch(error => {
|
||||
appendMessageDiv('Error: ' + error);
|
||||
throw error;
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
|
|
@ -49,22 +54,29 @@
|
|||
// 设置数学公式标识符为：$...$ or $$...$$ or \(...\) or \[...\]
|
||||
// 参考：https://www.npmjs.com/package/markdown-it-texmath
|
||||
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) => {
|
||||
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);
|
||||
// 预处理文本，替换特殊字符，如：< > &
|
||||
let text = preProcessText(div, index)
|
||||
// 转换成 markdown 网页格式
|
||||
text = md.render(text);
|
||||
appendMessageDiv("After markdown-it conversion：", text);
|
||||
DivLog.debug("After markdown-it conversion：", 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(/</g, "<").replace(/>/g, ">").replace(/&/g, "&")
|
||||
.replace(/ /g, ' ')
|
||||
.replace(/<br>/g, '\r\n');
|
||||
|
||||
text = Censor.decensorCodeHtml(text, code_tag_matches)
|
||||
DivLog.debug("After replacing special characters：", text);
|
||||
return text;
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载 javascript 资源
|
||||
* @param scriptUrls 多个资源地址
|
||||
* @param scriptUrls 多个资源地址数组
|
||||
* @returns {Promise<Awaited<unknown>[]>|Promise<void>}
|
||||
*/
|
||||
function initScriptResource(...scriptUrls) {
|
||||
function initScriptResource(scriptUrls) {
|
||||
initMyClass();
|
||||
|
||||
// 添加判断，避免重复加载
|
||||
if (typeof markdownit !== 'undefined') {
|
||||
appendMessageDiv("markdown-it is loaded!")
|
||||
DivLog.info("markdown-it is loaded!")
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
appendMessageDiv("markdown-it 没有加载，重新添加触发加载")
|
||||
DivLog.info("markdown-it did not load, re-adding triggers loading!")
|
||||
return Promise.all(scriptUrls.map(url => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const script = document.createElement("script");
|
||||
|
|
@ -94,41 +136,85 @@
|
|||
script.src = url;
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
}));
|
||||
})).catch(error => {
|
||||
DivLog.error('Error: ' + error);
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 页面添加消息提示
|
||||
* @param messages 多个提示消息，使用换行分隔展示
|
||||
*/
|
||||
function appendMessageDiv(...messages) {
|
||||
if (!isDebugging) {
|
||||
return;
|
||||
|
||||
function initMyClass() {
|
||||
if (typeof DivLog === 'undefined') {
|
||||
window.DivLog = {
|
||||
LOG_LEVEL: "info",
|
||||
levelMap: {'debug': 5, 'info': 4, 'warn': 3, 'error': 2, 'off': 1},
|
||||
|
||||
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>
|
||||
Loading…
Reference in New Issue