Here is my minimum test template.
Card Front
<div id="front"><pre>{{cloze:Question}}</pre></div>
<script src='_Markdown-KaTeX.js'></script>
Card Back
<div id="back"><pre>{{cloze:Question}}</pre></div>
<script src='_Markdown-KaTeX.js'></script>
The script is
_Markdown-KaTeX.js
var getResources = [
getCSS("_katex.css", "https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/katex.min.css"),
getScript("_katex.js", "https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/katex.min.js"),
getScript("_markdown-it.min.js", "https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"),
getScript("_markdown-it-mark.js", "https://github.com/markdown-it/markdown-it-mark/blob/master/dist/markdown-it-mark.js"),
getScript("_auto-render.js", "https://cdn.jsdelivr.net/gh/Jwrede/Anki-KaTeX-Markdown/auto-render-cdn.js"),
// getCSS("_highlight.css", "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/atom-one-dark-reasonable.min.css"),
// getScript("_highlight.js", "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"),
];
Promise.all(getResources).then(() => getScript("_mhchem.js", "https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/contrib/mhchem.min.js")).then(render).catch(show);
function getScript(path, altURL) {
return new Promise((resolve, reject) => {
let script = document.createElement("script");
script.onload = resolve;
script.onerror = function() {
let script_online = document.createElement("script");
script_online.onload = resolve;
script_online.onerror = reject;
script_online.src = altURL;
document.head.appendChild(script_online);
}
script.src = path;
document.head.appendChild(script);
})
}
function getCSS(path, altURL) {
return new Promise((resolve, reject) => {
var css = document.createElement('link');
css.setAttribute('rel', 'stylesheet');
css.type = 'text/css';
css.onload = resolve;
css.onerror = function() {
var css_online = document.createElement('link');
css_online.setAttribute('rel', 'stylesheet');
css_online.type = 'text/css';
css_online.onload = resolve;
css.onerror = reject;
css_online.href = altURL;
document.head.appendChild(css_online);
}
css.href = path;
document.head.appendChild(css);
});
}
function render() {
try {renderField("front")} catch {}
try {renderField("back")} catch {}
try {renderField("extra")} catch {}
try {renderField("extra1")} catch {}
try {renderField("extra2")} catch {}
show();
}
function renderField(field) {
renderMath(field);
markdown(field);
}
function show() {
try {document.getElementById("front").style.visibility = "visible"} catch {}
try {document.getElementById("back").style.visibility = "visible"} catch {}
try {document.getElementById("extra").style.visibility = "visible"} catch {}
try {document.getElementById("extra1").style.visibility = "visible"} catch {}
try {document.getElementById("extra2").style.visibility = "visible"} catch {}
}
function renderMath(ID) {
let text = document.getElementById(ID).innerHTML;
text = replaceInString(text);
document.getElementById(ID).textContent = text;
renderMathInElement(document.getElementById(ID), {
delimiters: [
{left: "$$", right: "$$", display: true},
{left: "\\[", right: "\\]", display: true},
{left: "$", right: "$", display: false},
{left: "\\(", right: "\\)", display: false},
],
trust: true,
macros: {
},
throwOnError: false
});
}
function markdown(ID) {
// let md = new markdownit({typographer: true, html: true, highlight: function (str, lang) {
// if (lang && hljs.getLanguage(lang)) {
// try {
// return hljs.highlight(str, { language: lang }).value;
// } catch (__) {}
// }
// return ''; // use external default escaping
// }}).use(markdownItMark);
let md = new markdownit({typographer: true, html: true}).use(markdownItMark);
let text = replaceHTMLElementsInString(document.getElementById(ID).innerHTML);
text = md.render(text);
document.getElementById(ID).innerHTML = text.replace(/<\/span>/gi, "\\");
}
function replaceInString(str) {
str = str.replace(/<[\/]?pre[^>]*>/gi, "");
str = str.replace(/<br\s*[\/]?[^>]*>/gi, "\n");
str = str.replace(/<div[^>]*>/gi, "\n");
str = str.replace(/<[\/]?span[^>]*>/gi, "")
str = str.replace(/<\/div[^>]*>/gi, "\n");
str = str.replace(/ /gi, " ");
return replaceHTMLElementsInString(str);
}
function replaceHTMLElementsInString(str) {
str = str.replace(/&tab;/gi, " ");
str = str.replace(/>/gi, ">");
str = str.replace(/</gi, "<");
return str.replace(/&/gi, "&");
}
If I use cloze with math(the math content is in the cloze), for example, it works normal.
text \(\mathrm{text} {{c1::\alpha {{c2::def::\gamma}}::\beta}}\) text
However, if the cloze doesn’t have math content, it will work strange in the front side.
text \(\mathrm{text}\) {{c1::\alpha {{c2::def::\gamma}}::\beta}} text
I thought it might be caused by the starred line in the function replaceInString in _Markdown-KaTeX.js.
function replaceInString(str) {
str = str.replace(/<[\/]?pre[^>]*>/gi, "");
str = str.replace(/<br\s*[\/]?[^>]*>/gi, "\n");
str = str.replace(/<div[^>]*>/gi, "\n");
* str = str.replace(/<[\/]?span[^>]*>/gi, "")
str = str.replace(/<\/div[^>]*>/gi, "\n");
str = str.replace(/ /gi, " ");
return replaceHTMLElementsInString(str);
}
So I changed it to this. Just added a $ sign.
function replaceInString(str) {
str = str.replace(/<[\/]?pre[^>]*>/gi, "");
str = str.replace(/<br\s*[\/]?[^>]*>/gi, "\n");
str = str.replace(/<div[^>]*>/gi, "\n");
* str = str.replace(/<[\/]?span[^>]*>$/gi, "")
str = str.replace(/<\/div[^>]*>/gi, "\n");
str = str.replace(/ /gi, " ");
return replaceHTMLElementsInString(str);
}
Then it worked.
But this time, if I used another math delimiter, the cloze behavior turned strange again.(I used to use $...$ but I’m using \(...\) instead now, I didn’t change all to the new style however, which means two delimiters both appeared in my card). Additionally, this case always happens when math content is in the cloze.
text $\mathrm{text} {{c1::\alpha::\beta}}$ text
I know little about HTML and JavaScript so I don’t understand the progress about it. Can some one tell me how to solve it? I’ll really appreciate it.