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:03:14 +00:00
|
|
|
|
<textarea class="md-content">
|
2021-11-23 07:16:06 +00:00
|
|
|
|
|
2021-11-23 08:03:14 +00:00
|
|
|
|
* 哈哈
|
2021-11-23 07:16:06 +00:00
|
|
|
|
|
2021-11-23 08:03:14 +00:00
|
|
|
|
- [x] ??
|
2021-11-23 07:16:06 +00:00
|
|
|
|
|
2021-11-23 08:03:14 +00:00
|
|
|
|
- [] 22
|
2021-11-23 08:22:35 +00:00
|
|
|
|
|
|
|
|
|
|
[xx](http://baidu.com)
|
|
|
|
|
|
|
2021-11-23 08:03:14 +00:00
|
|
|
|
</textarea>
|
|
|
|
|
|
<textarea class="md-content">
|
2021-11-23 07:50:15 +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 07:37:26 +00:00
|
|
|
|
}
|
2021-11-23 07:50:15 +00:00
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
2021-11-23 08:03:14 +00:00
|
|
|
|
</textarea>
|
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 =
|
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'
|
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)
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
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中对图像尺寸的支持
|
|
|
|
|
|
//  simple, assumes units are in px
|
|
|
|
|
|
//  sets the height to "auto"
|
|
|
|
|
|
//  Image with width of 80% and height of 5em
|
|
|
|
|
|
parseImgDimensions: true,
|
|
|
|
|
|
// 启用对删除线的支持
|
|
|
|
|
|
strikethrough: true,
|
|
|
|
|
|
// 启用对表格语法的支持
|
2021-11-23 07:12:13 +00:00
|
|
|
|
tables: true,
|
2021-11-22 10:00:34 +00:00
|
|
|
|
// 启用checkbox的支持
|
|
|
|
|
|
tasklists: true,
|
|
|
|
|
|
// 尝试巧妙地修复与缩进代码中间与 es6 模板字符串相关的缩进问题
|
2021-11-23 08:03:14 +00:00
|
|
|
|
// smartIndentationFix: true,
|
2021-11-22 10:00:34 +00:00
|
|
|
|
// 将换行符解析为 <br>，行尾不需要2个空格
|
2021-11-23 08:19:23 +00:00
|
|
|
|
simpleLineBreaks: false,
|
2021-11-22 10:00:34 +00:00
|
|
|
|
// 反斜杠转义html
|
|
|
|
|
|
backslashEscapesHTMLTags: true,
|
|
|
|
|
|
// 禁用将子列表缩进4个空格以使其嵌套的要求，有效地恢复到2或3个空格足够的旧行为
|
|
|
|
|
|
disableforced4spacesindentedsublist: true,
|
|
|
|
|
|
ghCodeBlocks: true,
|
|
|
|
|
|
})
|
2021-11-23 07:13:59 +00:00
|
|
|
|
convert.setFlavor('github')
|
2021-11-23 07:50:15 +00:00
|
|
|
|
document.querySelectorAll('.md-content').forEach((textarea, index) => {
|
2021-11-23 08:03:14 +00:00
|
|
|
|
console.log('查找到的textarea元素', textarea)
|
2021-11-22 16:14:03 +00:00
|
|
|
|
var text = textarea.value
|
2021-11-22 10:00:34 +00:00
|
|
|
|
var thisConverterSpecificOptions = convert.getOptions()
|
2021-11-23 07:50:15 +00:00
|
|
|
|
console.log('当前的配置项', thisConverterSpecificOptions)
|
2021-11-22 10:00:34 +00:00
|
|
|
|
var html = convert.makeHtml(text)
|
|
|
|
|
|
var newDiv = document.createElement('div')
|
|
|
|
|
|
newDiv.innerHTML = html
|
2021-11-23 07:50:15 +00:00
|
|
|
|
// textarea.parentNode.insertBefore(newDiv, textarea.nextSibling)
|
|
|
|
|
|
document.body.appendChild(newDiv)
|
|
|
|
|
|
var hr = document.createElement('hr')
|
|
|
|
|
|
index === 0 ? document.body.appendChild(hr) : null
|
2021-11-23 08:19:23 +00:00
|
|
|
|
textarea.className = `x-${index}`
|
2021-11-22 16:16:51 +00:00
|
|
|
|
textarea.style.display = 'none'
|
2021-11-23 08:22:35 +00:00
|
|
|
|
// 不能从body直接插入元素 anki 不刷新的 淦
|
2021-11-22 10:00:34 +00:00
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
createLink(highLightCss)
|
|
|
|
|
|
createScript(showDownCdn)
|
|
|
|
|
|
.then(() => {
|
|
|
|
|
|
return createScript(highLightJs)
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(() => {
|
2021-11-23 07:16:06 +00:00
|
|
|
|
// anki模板无法使用window.onload我怀疑是被占用了
|
2021-11-22 15:40:20 +00:00
|
|
|
|
// window.onload = parseMarkDown
|
|
|
|
|
|
parseMarkDown()
|
2021-11-23 07:12:13 +00:00
|
|
|
|
return new Promise((resolve) => {
|
|
|
|
|
|
resolve()
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(() => {
|
2021-11-23 07:20:50 +00:00
|
|
|
|
hljs.highlightAll()
|
2021-11-23 08:19:23 +00:00
|
|
|
|
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)
|
|
|
|
|
|
})
|
2021-11-22 10:00:34 +00:00
|
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
