anki-md-template/卡片正面内容模板.txt

75 lines
2.7 KiB
Plaintext
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="md-content">
{{Front}}
</div>
<!-- https://github.com/markdown-it/markdown-it -->
<script defer src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/markdown-it/12.3.2/markdown-it.min.js"></script>
<!-- 代码高亮库 -->
<script defer src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/11.4.0/highlight.min.js"></script>
<script defer>
'use strict'
// 在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(/&nbsp;/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
},
})
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 不刷新的
})
}
parseMarkDownFn();
</script>