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

<div class="md-content">
  {{Front}}
</div>


<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"),
    // 添加markdown-it-texmath插件
    getScript("https://cdn.jsdelivr.net/npm/markdown-it-texmath/texmath.min.js"),
    // 添加MathJax
    getScript("https://cdn.bootcdn.net/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js")
  ];

  // MathJax配置
  window.MathJax = {
    tex: {
      inlineMath: [['$', '$']],
      displayMath: [['$$', '$$']],
      processEscapes: true
    },
    options: {
      skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
    }
  };

  // 加载资源并初始化
  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);
    });
  }
  // 在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
      },
    })
    
    // 配置markdown-it-texmath插件
    if (window.texmath) {
      md.use(window.texmath, {
        engine: MathJax,
        delimiters: 'dollars',
        katexOptions: { macros: {"\\RR": "\\mathbb{R}"} }
      });
    }
    
    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>