ueditor中的内容在那_在 Anki 中使用 Markdown

使用 Showdown.js 可以实现在 Anki 中使用 Markdown 语法编写内容。在 PC 端和 Ankidroid 上都能正常渲染 Markdown。

这里有一个样例牌组可以直接导入使用：Markdown Demo 牌组

模板 HTML 中，所有<div class="md-content">...</div> 之间的内容都会被当作 Markdown 格式进行渲染。

---

为了使用 Showdown.js 需要引入三个文件：

• highlight.min.js
• showdown.min.js
• highlight.default.min.css

这三个文件可以直接添加到媒体文件（推荐）或者从网络 CDN 处获取。

• 如果通过媒体文件，文件名要以下划线 _ 开头，防止 Anki 把它们当作未被引用的文件而删除。
• 如果使用网络 CDN，需要修改下面代码中三个变量的值：highlightcssUrl showdownUrl highlightjsUrl 替换为完整的 CDN 链接：

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.5/styles/default.min.css
https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js
https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.5/highlight.min.js

在 js 代码中通过 addStylesheet 和 addScript 两个而函数分别引入 css 样式文件和 js 文件（这一部份具体从哪里参考来的我已经不记得了）。

进行 Markdown 渲染时，<div class="md-content"> 中的内容会被提取文本（使用 innerText 属性从 HTML 富文本中提取出内容文字的文本），并替换其中的空白字符。最后通过 Showdown.js 将 Markdown 转化为 HTML 格式。

正面模板：

<div class="section">
<div class="question md-content">{{Question}}</div>
</div>

<script>
function addStylesheet(src, callback) {
    var s = document.createElement('link');
    s.rel = 'stylesheet';
    s.href = src;
    s.onload = callback;
    document.head.appendChild(s);
}
function addScript(src, callback) {
    var s = document.createElement('script');
    s.src = src;
    s.type = "text/javascript";
    s.onload = callback;
    document.body.appendChild(s);
}
    
function replaceAllWhitespaceWithSpace(str) {
    return str.replace(/[tvf u00a0u2000-u200bu2028-u2029u3000]/g, ' ');
}
var highlightcssUrl = "_highlight.default.min.css";
var showdownUrl = "_showdown.min.js";
addStylesheet(highlightcssUrl, function() {
});
addScript(showdownUrl, function() {
    var highlightjsUrl = "_highlight.min.js";
    addScript(highlightjsUrl, function() {
        function processShowdownDivs() {
            var showdownConverter = new showdown.Converter();
            showdownConverter.setFlavor('github');

            document.querySelectorAll('div.md-content').forEach((div) => {
                var rawText = div.innerText;
                var classes = div.className.replace(/md-content/g, "");
                var text = replaceAllWhitespaceWithSpace(rawText);
                var html = showdownConverter.makeHtml(text);
                var newDiv = document.createElement('div');
                newDiv.innerHTML = html;
                newDiv.className = classes;
                newDiv.querySelectorAll('pre code').forEach((block) => {
                    hljs.highlightBlock(block);
                });
                div.parentNode.insertBefore(newDiv, div.nextSibling);
                div.style.display = 'none';
            });
        };

        processShowdownDivs();
     });
});
</script>

背面模板：

{{FrontSide}}

<hr id=answer>

<div class="section">
<div id="back" class="answer md-content">{{Answer}}</div>
</div>

样式：

.card {
 font-family: roboto, arial;
 font-size: 15px;
 text-align: center;
 color: black;
 background-color: white;
}
.question {
    font-size: 20px;
    line-height: 2;
    background-color: #d0d4ea;
}
.answer {
    font-size: 15px;
    text-align: left;
    line-height: 1.3;
    border-radius: 1.2em 0.2em;
}
.section {
  box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.16),0 0px 0px 1px rgba(0, 0, 0, 0.02);
  border-radius: 2px;
  margin: 8px 0 8px 0;
}
.hightlight{
  font-size: 13px;
  border-radius: 4px;
  color: #fff;
  padding: 0 3px;
  margin-right: 5px;
}

最后是一张截图预览：

Markdown 显示结果

参考

• How to load external javascript? : Anki
• showdownjs/showdown: A bidirectional Markdown to HTML to Markdown converterter
• 【Anki】在Ankidroid上显示数学公式_Perfect的博客-CSDN博客_ankidroid