2025-02-08 08:17:20 +00:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="cn">
|
|
|
|
|
|
<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="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.8.1/github-markdown.min.css"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<link
|
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/base16/onedark.min.css"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<link
|
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
|
|
|
|
|
|
/>
|
2025-04-15 03:49:19 +00:00
|
|
|
|
<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"
|
|
|
|
|
|
/>
|
2025-04-15 03:13:40 +00:00
|
|
|
|
<title>anki-md模板测试（chrome等浏览器开发测试即可）</title>
|
2025-02-08 08:17:20 +00:00
|
|
|
|
</head>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
.markdown-body {
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
min-width: 200px;
|
|
|
|
|
|
max-width: 980px;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
padding: 45px;
|
|
|
|
|
|
}
|
|
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
|
|
.markdown-body {
|
|
|
|
|
|
padding: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
/* 初始状态下设置透明度为0 */
|
|
|
|
|
|
.md-content {
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
transition: opacity 0.3s ease-in-out;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<!-- prettier-ignore -->
|
|
|
|
|
|
<div class="md-content">
|
|
|
|
|
|
### 我看showdown真是老糊涂了
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- prettier-ignore -->
|
|
|
|
|
|
<div class="md-content">
|
2025-04-15 03:49:19 +00:00
|
|
|
|
行内公式：$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$$
|
2025-04-14 13:07:14 +00:00
|
|
|
|
***
|
2025-02-08 08:17:20 +00:00
|
|
|
|
> 呵呵呵
|
|
|
|
|
|
|
|
|
|
|
|
# 一级标题
|
|
|
|
|
|
## 二级标题
|
|
|
|
|
|
### 三级标题
|
|
|
|
|
|
---
|
|
|
|
|
|
**加粗**
|
|
|
|
|
|
*斜体*
|
|
|
|
|
|
***加粗斜体***
|
|
|
|
|
|
---
|
|
|
|
|
|
> 引用
|
|
|
|
|
|
---
|
|
|
|
|
|
- 无序列表
|
|
|
|
|
|
---
|
|
|
|
|
|
1. 有序列表
|
|
|
|
|
|
---
|
|
|
|
|
|
[链接](https://www.baidu.com)
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
`行内代码`
|
|
|
|
|
|
---
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
// 代码块
|
|
|
|
|
|
console.log('hello world')
|
|
|
|
|
|
```
|
|
|
|
|
|
</div>
|
2025-04-14 13:07:14 +00:00
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var getResources = [
|
|
|
|
|
|
getScript(
|
|
|
|
|
|
"https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/markdown-it/12.3.2/markdown-it.min.js"
|
|
|
|
|
|
),
|
|
|
|
|
|
getScript(
|
|
|
|
|
|
"https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/11.4.0/highlight.min.js"
|
|
|
|
|
|
),
|
2025-04-28 16:22:22 +00:00
|
|
|
|
// getScript(
|
|
|
|
|
|
// "https://cdn.jsdelivr.net/npm/markdown-it-texmath@1.0.0/texmath.min.js"
|
|
|
|
|
|
// ),
|
|
|
|
|
|
// getScript(
|
|
|
|
|
|
// "https://cdn.jsdelivr.net/npm/katex@0.16.22/dist/katex.min.js"
|
|
|
|
|
|
// ),
|
2025-04-14 13:07:14 +00:00
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
// 加载资源并初始化
|
|
|
|
|
|
Promise.all(getResources)
|
|
|
|
|
|
.then(() => {
|
|
|
|
|
|
parseMarkDownFn();
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch((error) => {
|
|
|
|
|
|
consoleLog("Failed to load required resources: " + error);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
function getScript(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);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
2025-02-08 08:17:20 +00:00
|
|
|
|
// 在anki中通过窗口查看调试信息 没控制台啊
|
|
|
|
|
|
function consoleLog(str) {
|
|
|
|
|
|
var div = document.createElement("div");
|
|
|
|
|
|
div.innerHTML = str;
|
|
|
|
|
|
document.body.appendChild(div);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 清除br标签
|
|
|
|
|
|
// anki自动生成的<br>全部干掉 严格按照原生换行来写
|
|
|
|
|
|
var clearBR = (str) => {
|
|
|
|
|
|
str = str.replace(/<br>/g, "\r\n");
|
|
|
|
|
|
return str;
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 清除空格实体字符
|
|
|
|
|
|
var clearBlankNbsp = (str) => {
|
|
|
|
|
|
str = str.replace(/ /g, " ");
|
|
|
|
|
|
return str;
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 反转义 HTML 实体，确保卡片中所有的符号正常
|
|
|
|
|
|
// Eg. #include <stdio.h>
|
|
|
|
|
|
var unescapeHTMLEntities = (innerHTML) =>
|
|
|
|
|
|
Object.assign(document.createElement("textarea"), { innerHTML }).value;
|
|
|
|
|
|
|
|
|
|
|
|
// 解析（入口main方法）
|
|
|
|
|
|
var parseMarkDownFn = () => {
|
|
|
|
|
|
const md = markdownit({
|
|
|
|
|
|
html: true, // 若为 false 将导致 anki 自带的公式渲染失效。
|
|
|
|
|
|
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 external default escaping
|
|
|
|
|
|
},
|
|
|
|
|
|
});
|
2025-04-28 16:22:22 +00:00
|
|
|
|
// md.use(texmath, {
|
|
|
|
|
|
// engine: katex,
|
|
|
|
|
|
// delimiters: "dollars",
|
|
|
|
|
|
// katexOptions: { macros: { "\\RR": "\\mathbb{R}" } },
|
|
|
|
|
|
// });
|
2025-02-08 08:17:20 +00:00
|
|
|
|
document.querySelectorAll(".md-content").forEach((div, index) => {
|
|
|
|
|
|
console.log("查找到的容器元素", div);
|
|
|
|
|
|
// 需要去除首尾空格 不然markdown-it会解析错误
|
|
|
|
|
|
var text = unescapeHTMLEntities(div.innerHTML).trim();
|
|
|
|
|
|
console.log("text", text);
|
|
|
|
|
|
// 清除br标签
|
|
|
|
|
|
text = clearBR(text);
|
|
|
|
|
|
// 👇关键核心md转换
|
|
|
|
|
|
var html = md.render(text);
|
|
|
|
|
|
var newDiv = document.createElement("div");
|
|
|
|
|
|
var hr = document.createElement("hr");
|
|
|
|
|
|
newDiv.innerHTML = html;
|
|
|
|
|
|
// 激活github-markdown-css
|
|
|
|
|
|
newDiv.className = "markdown-body";
|
|
|
|
|
|
div.parentNode.insertBefore(newDiv, div.nextSibling);
|
|
|
|
|
|
|
|
|
|
|
|
index === 1 ? div.parentNode.insertBefore(hr, div.nextSibling) : null;
|
|
|
|
|
|
div.className = `x-${index}`;
|
|
|
|
|
|
div.style.display = "none";
|
|
|
|
|
|
// 不能从body直接插入元素 anki 不刷新的
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
