Anki：使用Markdown

參考鏈接

https://zhuanlan.zhihu.com/p/137570649

原理

通過JavaScript代碼，把『Anki字段』的內容從Markdown替換為Html

實現

1. 我們通過Showdown.js實現此功能，首先需要引入三個文件：highlight.min.js、showdown.min.js、highlight.default.min.css，下載地址：

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

2. 下載到本地后，把三個文件改名為以下划線_開頭，即：_highlight.min.js、_showdown.min.js、_highlight.default.min.css

3. 把三個文件復制到Anki媒體文件夾，在Windows的路徑是：C:\Users<LoginName>\AppData\Roaming\Anki2<AnkiUserName>

4. 添加模板：
   正面模板：

<div class="section">
  <div class="Words 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(/[\t\v\f \u00a0\u2000-\u200b\u2028-\u2029\u3000]/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.replace(/<\/div>/g, ""); // div.innerHTML.replace(/<\/div>/g, ""); //innerText;
                var classes = div.className.replace(/md-content/g, "");

                var text = replaceAllWhitespaceWithSpace(rawText); //.replace(/<br>|<div>/g, "\n");
                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';  會導致重復渲染
                div.innerHTML = ''; // 修復重復渲染的問題
            });
        };

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

背面模板：

{{FrontSide}}

<hr id=answer>

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

樣式：

.card {
  font-family: roboto, arial;
  font-size: 15px;
  text-align: center;
  color: black;
  background-color: white;
}
strong {
  color: blue; /* 調整Markdown加粗后的顏色 */
}
.Words {
  font-size: 1.5em;
  line-height: 2;
  background-color: #d0d4ea;
}
.Description {
  font-size: 1.3em;
  text-align: left;
  line-height: 1.3;
  border-radius: 1.2em 0.2em;
}
.Phrases {
  font-size: 1.3em;
  text-align: center;
  border-radius: 0.3em;
  padding: 0.5em;
}
.Sentences {
  font-size: 1.25em;
  text-align: left;
  margin: 0.5em;
}
.mytitle {
  font-size: 1.3em;
  font-weight: bold;
}
.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;
}

5. 最后，正常輸入Markdown即可，如：
   

更簡單的辦法

1. 打開鏈接：https://zhuanlan.zhihu.com/p/137570649
2. 下載牌組：見截圖：
   
3. 導入牌組后，即可使用

其他的坑

• 在Markdown中，引入的本地圖片不會自動上傳到anki服務器（也不建議這么實現）。更好的做法是在Markdown中的圖片鏈接全部使用圖床的鏈接。
• 想要修改加粗后的顏色，通過設置<strong>html標簽樣式進行修改