anki-md-template/demo.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>anki-md模板测试</title>
  </head>
  <body>
    <textarea class="md-content">

* 哈哈

- [x] ??

- [] 22

[xx](http://baidu.com)

</textarea
    >

    <textarea class="md-content">
* 序列

- zhe这都出来了

* 试试

> 引入的话话里有话

| ni | wo |
| :--:|:--:|
| 1|2|
</textarea
    >
    <script>
      'use strict'
      function consoleLog(str) {
        var div = document.createElement('div')
        div.innerHTML = str
        document.body.appendChild(div)
      }
      var jqueryCdn =
        'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'
      var showDownCdn =
        'https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js'
      var highLightJs =
        'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js'
      var highLightCss =
        // 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css'
        'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/base16/onedark.min.css'

      // 加载库文件
      var createScript = (src) => {
        var scriptElement = document.createElement('script')
        scriptElement.src = src
        scriptElement.type = 'text/javascript'
        document.head.appendChild(scriptElement)
        return new Promise((resolve) => {
          scriptElement.onload = function () {
            resolve(src)
          }
        })
      }

      // 加载css文件
      var createLink = (url) => {
        var linkElement = document.createElement('link')
        linkElement.rel = 'stylesheet'
        linkElement.href = url

        linkElement.onload = () => {}

        document.head.appendChild(linkElement)
      }

      // 解析（入口方法）
      var parseMarkDown = () => {
        var convert = new showdown.Converter({
          // 启用对md中对图像尺寸的支持
          // ![foo](foo.jpg =100x80)     simple, assumes units are in px
          // ![bar](bar.jpg =100x*)      sets the height to "auto"
          // ![baz](baz.jpg =80%x5em)  Image with width of 80% and height of 5em
          parseImgDimensions: true,
          // 启用对删除线的支持
          strikethrough: true,
          // 启用对表格语法的支持
          tables: true,
          // 启用checkbox的支持
          tasklists: true,
          // 尝试巧妙地修复与缩进代码中间与 es6 模板字符串相关的缩进问题
          // smartIndentationFix: true,
          // 将换行符解析为 <br>，行尾不需要2个空格
          simpleLineBreaks: false,
          // 反斜杠转义html
          backslashEscapesHTMLTags: true,
          // 禁用将子列表缩进4个空格以使其嵌套的要求，有效地恢复到2或3个空格足够的旧行为
          disableforced4spacesindentedsublist: true,
          ghCodeBlocks: true,
        })
        // convert.setFlavor('github')
        document.querySelectorAll('.md-content').forEach((textarea, index) => {
          console.log('查找到的textarea元素', textarea)
          var text = textarea.value
          var thisConverterSpecificOptions = convert.getOptions()
          console.log('当前的配置项', thisConverterSpecificOptions)
          var html = convert.makeHtml(text)
          var newDiv = document.createElement('div')
          var hr = document.createElement('hr')
          newDiv.innerHTML = html
          textarea.parentNode.insertBefore(newDiv, textarea.nextSibling)

          index === 1
            ? textarea.parentNode.insertBefore(hr, textarea.nextSibling)
            : null
          textarea.className = `x-${index}`
          textarea.style.display = 'none'
          // 不能从body直接插入元素 anki 不刷新的 淦
        })
      }
      createLink(highLightCss)
      createScript(showDownCdn)
        .then(() => {
          return createScript(highLightJs)
        })
        .then(() => {
          // anki模板无法使用window.onload我怀疑是被占用了
          // window.onload = parseMarkDown
          parseMarkDown()
          return new Promise((resolve) => {
            resolve()
          })
        })
        .then(() => {
          hljs.highlightAll()
          return new Promise((resolve) => {
            resolve()
          })
        })
        .then(() => {
          // 清除重复项 试试
          var repeatEl = document.querySelectorAll('.x-0')
          repeatEl.forEach((el, i) => {
            if (i === repeatEl.length - 1) {
              return
            }
            document.body.removeChild(el)
          })
        })
    </script>
  </body>
</html>
-												first commit

											
										
										
											2021-11-22 10:00:34 +00:00
+								<!DOCTYPE html>
 								<html lang="en">
 								  <head>
 								    <meta charset="UTF-8" />
 								    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 								    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 								    <title>anki-md模板测试</title>
 								  </head>
 								  <body>
-												踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩

											
										
										
											2021-11-23 08:28:27 +00:00
+								    <textarea class="md-content">
-												ccccccccccc

											
										
										
											2021-11-23 07:16:06 +00:00
-												cccccccccccccc

											
										
										
											2021-11-23 08:03:14 +00:00
+								* 哈哈
-												ccccccccccc

											
										
										
											2021-11-23 07:16:06 +00:00
-												cccccccccccccc

											
										
										
											2021-11-23 08:03:14 +00:00
+								- [x] ??
-												ccccccccccc

											
										
										
											2021-11-23 07:16:06 +00:00
-												cccccccccccccc

											
										
										
											2021-11-23 08:03:14 +00:00
+								- [] 22
-												cccccccccccccccccc

											
										
										
											2021-11-23 08:22:35 +00:00
 								[xx](http://baidu.com)
-												ccccccccccccccccccccccccccc

											
										
										
											2021-11-23 08:41:33 +00:00
+								</textarea
 								    >
-												踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩

											
										
										
											2021-11-23 08:28:27 +00:00
-												ccccccccccccccccccccccccccc

											
										
										
											2021-11-23 08:41:33 +00:00
+								    <textarea class="md-content">
-												踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩

											
										
										
											2021-11-23 08:28:27 +00:00
+								* 序列
 								- zhe这都出来了
 								* 试试
 								> 引入的话话里有话
-												ccccccccccccccccccccccccccc

											
										
										
											2021-11-23 08:41:33 +00:00
 								| ni | wo |
 								| :--:|:--:|
 								| 1|2|
 								</textarea
 								    >
-												first commit

											
										
										
											2021-11-22 10:00:34 +00:00
+								    <script>
 								      'use strict'
 								      function consoleLog(str) {
 								        var div = document.createElement('div')
 								        div.innerHTML = str
 								        document.body.appendChild(div)
 								      }
 								      var jqueryCdn =
 								        'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'
 								      var showDownCdn =
 								        'https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js'
 								      var highLightJs =
 								        'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js'
 								      var highLightCss =
-												cccccccccccccccccccccccc

											
										
										
											2021-11-23 07:37:26 +00:00
+								        // 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css'
 								        'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/base16/onedark.min.css'
-												ccccccccccccccccccccccccccc

											
										
										
											2021-11-23 08:41:33 +00:00
-												踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩

											
										
										
											2021-11-23 08:28:27 +00:00
+								      // 加载库文件
-												first commit

											
										
										
											2021-11-22 10:00:34 +00:00
+								      var createScript = (src) => {
 								        var scriptElement = document.createElement('script')
 								        scriptElement.src = src
 								        scriptElement.type = 'text/javascript'
 								        document.head.appendChild(scriptElement)
 								        return new Promise((resolve) => {
 								          scriptElement.onload = function () {
 								            resolve(src)
 								          }
 								        })
 								      }
-												踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩

											
										
										
											2021-11-23 08:28:27 +00:00
+								      // 加载css文件
-												first commit

											
										
										
											2021-11-22 10:00:34 +00:00
+								      var createLink = (url) => {
 								        var linkElement = document.createElement('link')
 								        linkElement.rel = 'stylesheet'
 								        linkElement.href = url
 								        linkElement.onload = () => {}
 								        document.head.appendChild(linkElement)
 								      }
-												踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩

											
										
										
											2021-11-23 08:28:27 +00:00
+								      // 解析（入口方法）
-												first commit

											
										
										
											2021-11-22 10:00:34 +00:00
+								      var parseMarkDown = () => {
 								        var convert = new showdown.Converter({
 								          // 启用对md中对图像尺寸的支持
 								          // ![foo](foo.jpg =100x80)     simple, assumes units are in px
 								          // ![bar](bar.jpg =100x*)      sets the height to "auto"
 								          // ![baz](baz.jpg =80%x5em)  Image with width of 80% and height of 5em
 								          parseImgDimensions: true,
 								          // 启用对删除线的支持
 								          strikethrough: true,
 								          // 启用对表格语法的支持
-												cccccccccccccccc

											
										
										
											2021-11-23 07:12:13 +00:00
+								          tables: true,
-												first commit

											
										
										
											2021-11-22 10:00:34 +00:00
+								          // 启用checkbox的支持
 								          tasklists: true,
 								          // 尝试巧妙地修复与缩进代码中间与 es6 模板字符串相关的缩进问题
-												cccccccccccccc

											
										
										
											2021-11-23 08:03:14 +00:00
+								          // smartIndentationFix: true,
-												first commit

											
										
										
											2021-11-22 10:00:34 +00:00
+								          // 将换行符解析为 <br>，行尾不需要2个空格
-												cccccccccccccc

											
										
										
											2021-11-23 08:19:23 +00:00
+								          simpleLineBreaks: false,
-												first commit

											
										
										
											2021-11-22 10:00:34 +00:00
+								          // 反斜杠转义html
 								          backslashEscapesHTMLTags: true,
 								          // 禁用将子列表缩进4个空格以使其嵌套的要求，有效地恢复到2或3个空格足够的旧行为
 								          disableforced4spacesindentedsublist: true,
 								          ghCodeBlocks: true,
 								        })
-												踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩

											
										
										
											2021-11-23 08:28:27 +00:00
+								        // convert.setFlavor('github')
-												cccccccccccccccccccccccccccccc

											
										
										
											2021-11-23 07:50:15 +00:00
+								        document.querySelectorAll('.md-content').forEach((textarea, index) => {
-												cccccccccccccc

											
										
										
											2021-11-23 08:03:14 +00:00
+								          console.log('查找到的textarea元素', textarea)
-												cccccccccccccccccccccccccc

											
										
										
											2021-11-22 16:14:03 +00:00
+								          var text = textarea.value
-												first commit

											
										
										
											2021-11-22 10:00:34 +00:00
+								          var thisConverterSpecificOptions = convert.getOptions()
-												cccccccccccccccccccccccccccccc

											
										
										
											2021-11-23 07:50:15 +00:00
+								          console.log('当前的配置项', thisConverterSpecificOptions)
-												first commit

											
										
										
											2021-11-22 10:00:34 +00:00
+								          var html = convert.makeHtml(text)
 								          var newDiv = document.createElement('div')
-												cccccccccccccccccccccccccccccc

											
										
										
											2021-11-23 07:50:15 +00:00
+								          var hr = document.createElement('hr')
-												踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩

											
										
										
											2021-11-23 08:28:27 +00:00
+								          newDiv.innerHTML = html
 								          textarea.parentNode.insertBefore(newDiv, textarea.nextSibling)
 								          index === 1
 								            ? textarea.parentNode.insertBefore(hr, textarea.nextSibling)
 								            : null
-												cccccccccccccc

											
										
										
											2021-11-23 08:19:23 +00:00
+								          textarea.className = `x-${index}`
-												cccccccccccccccccccc

											
										
										
											2021-11-22 16:16:51 +00:00
+								          textarea.style.display = 'none'
-												cccccccccccccccccc

											
										
										
											2021-11-23 08:22:35 +00:00
+								          // 不能从body直接插入元素 anki 不刷新的 淦
-												first commit

											
										
										
											2021-11-22 10:00:34 +00:00
+								        })
 								      }
 								      createLink(highLightCss)
 								      createScript(showDownCdn)
 								        .then(() => {
 								          return createScript(highLightJs)
 								        })
 								        .then(() => {
-												ccccccccccc

											
										
										
											2021-11-23 07:16:06 +00:00
+								          // anki模板无法使用window.onload我怀疑是被占用了
-												cccccccccccccccc

											
										
										
											2021-11-22 15:40:20 +00:00
+								          // window.onload = parseMarkDown
 								          parseMarkDown()
-												cccccccccccccccc

											
										
										
											2021-11-23 07:12:13 +00:00
+								          return new Promise((resolve) => {
 								            resolve()
 								          })
 								        })
 								        .then(() => {
-												cccccccccccccccc

											
										
										
											2021-11-23 07:20:50 +00:00
+								          hljs.highlightAll()
-												踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩

											
										
										
											2021-11-23 08:28:27 +00:00
+								          return new Promise((resolve) => {
-												cccccccccccccc

											
										
										
											2021-11-23 08:19:23 +00:00
+								            resolve()
 								          })
 								        })
-												踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩

											
										
										
											2021-11-23 08:28:27 +00:00
+								        .then(() => {
-												ccccccccccccccccccccccccccc

											
										
										
											2021-11-23 08:41:33 +00:00
+								          // 清除重复项 试试
-												踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩

											
										
										
											2021-11-23 08:28:27 +00:00
+								          var repeatEl = document.querySelectorAll('.x-0')
 								          repeatEl.forEach((el, i) => {
 								            if (i === repeatEl.length - 1) {
-												cccccccccccccc

											
										
										
											2021-11-23 08:19:23 +00:00
+								              return
 								            }
 								            document.body.removeChild(el)
 								          })
-												first commit

											
										
										
											2021-11-22 10:00:34 +00:00
+								        })
 								    </script>
 								  </body>
 								</html>