208 lines
8.0 KiB
HTML
208 lines
8.0 KiB
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>
|
||
<style>
|
||
/* 这个需要复制到anki的css样式的那个窗口里 */
|
||
.markdown-body {
|
||
box-sizing: border-box;
|
||
min-width: 200px;
|
||
max-width: 980px;
|
||
margin: 0 auto;
|
||
padding: 45px;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.markdown-body {
|
||
padding: 15px;
|
||
}
|
||
}
|
||
</style>
|
||
<body>
|
||
<textarea class="md-content">
|
||
* 哈哈
|
||
|
||
- [x] ??
|
||
|
||
- [ ] 22
|
||
|
||
[百度](http://baidu.com)
|
||
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
```
|
||
</textarea
|
||
>
|
||
|
||
<textarea class="md-content">
|
||
* 序列
|
||
|
||
- zhe这都出来了
|
||
|
||
+ 试试
|
||
|
||
> 引入的话话里有话
|
||
|
||
| ni | wo |
|
||
| :--:|:--:|
|
||
| 1|2|
|
||
|
||
* base64图片测试
|
||
|
||
![图片测试][img1]
|
||
|
||
|
||
[img1]:data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAA/AHYDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDr6KKXaaAEopdpo2mgBKKXaaQjFABRUczEKNpIyew9qhV5c/Mzjnjj/wCxoAtUVVMzqznPQdChx7VIJW2kjLnPPykY/TNAE1FV0mkJI2559xj9KsUAFFFFABRRRQAU8dBTKeOgoArahdPa22+KPzZWIVFzgEn1NYukzahY3RS9g/dXMv3vM3FWPTueK2NSjD2+4kAIdxyccVnWpguLiNYZVZhhvvdvWobaZSSsblNbrT6Y3WrJGOu4r6DmoRb7MbcHjBJwP5CrFFAFf7MNxOFHv3PrUnl5BznqSMMRUlFAEKQ4yW3Ak54c1NRRQAUUUUAFFFFABQZo0IVmwf5UUx4I5DuPBIwSDik79ARRe8jupj5Tq6KdvBz9ajitre1DGGNU3HJxUlposNnu8uQkscsTzk/nVp7MMMeZj8KYCW17E4ZDKpkjOGAOT7VZJBwR0xVC30mO3klZJmxKdzLjvV0KqKFToKWo9BaoakoYruUHEbkZ9eKtzxmSPCsVIOeCRn24rPkkkmTzFBIWN1w33skjgj8DWNZ+60zSmtblq4uY/KPkzpvLKPlIJ6gH+tWEzsXJycDJ9axpLpZXkCK3zoAo2n73r/KtlPuL9KKc+eTCceVDqKKK3MgooooAKKKKACiiigAooooAKKKKACqzWg84yRts3csMZyfWrNFTKKkrMabWxVFoQzMJMFv9n/69WI1KRorNuKgAnGM06ilGEY7Dcm9woooqyQooooAKKKKAP//Z
|
||
</textarea
|
||
>
|
||
<script>
|
||
'use strict'
|
||
function consoleLog(str) {
|
||
var div = document.createElement('div')
|
||
div.innerHTML = str
|
||
document.body.appendChild(div)
|
||
}
|
||
var JQ_CDN =
|
||
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'
|
||
var SHOWDOWN_CDN =
|
||
'https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js'
|
||
var HIGHLIGHT_JS_CDN =
|
||
'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js'
|
||
var HIGHLIGHT_CSS_CDN =
|
||
// '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 GITHUB_MARKDOWN_CSS_CDN =
|
||
'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.0.0/github-markdown.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)
|
||
}
|
||
|
||
// 清除br标签
|
||
// anki自动生成的<br>全部干掉 严格按照原生换行来写
|
||
var clearBR = (str) => {
|
||
str = str.replace(/<br>/g, '\r\n')
|
||
return str
|
||
}
|
||
|
||
var clearBlankNbsp=(str)=>{
|
||
str = str.replace(/ /g, ' ')
|
||
return str
|
||
}
|
||
// 解析（入口方法）
|
||
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,
|
||
// 启用对表格语法的支持
|
||
tables: true,
|
||
// 启用checkbox的支持
|
||
tasklists: true,
|
||
// 尝试巧妙地修复与缩进代码中间与 es6 模板字符串相关的缩进问题
|
||
smartIndentationFix: true,
|
||
// 将换行符解析为 <br>，行尾不需要2个空格
|
||
simpleLineBreaks: true,
|
||
// 反斜杠转义html
|
||
backslashEscapesHTMLTags: true,
|
||
// 禁用将子列表缩进4个空格以使其嵌套的要求，有效地恢复到2或3个空格足够的旧行为
|
||
// disableforced4spacesindentedsublist: true,
|
||
ghCodeBlocks: true,
|
||
})
|
||
// 好像是失效的？？不管用呢
|
||
// convert.setFlavor('github')
|
||
document.querySelectorAll('.md-content').forEach((textarea, index) => {
|
||
console.log('查找到的textarea元素', textarea)
|
||
textarea.innerHTML=clearBlankNbsp(textarea.innerHTML)
|
||
var text = textarea.value
|
||
var thisConverterSpecificOptions = convert.getOptions()
|
||
console.log('当前的配置项', thisConverterSpecificOptions)
|
||
// 清除br标签试试
|
||
text = clearBR(text)
|
||
// 👇关键核心md转换
|
||
var html = convert.makeHtml(text)
|
||
var newDiv = document.createElement('div')
|
||
var hr = document.createElement('hr')
|
||
newDiv.innerHTML = html
|
||
// 激活github-markdown-css
|
||
newDiv.className = 'markdown-body'
|
||
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(GITHUB_MARKDOWN_CSS_CDN)
|
||
createLink(HIGHLIGHT_CSS_CDN)
|
||
|
||
createScript(SHOWDOWN_CDN)
|
||
.then(() => {
|
||
return createScript(HIGHLIGHT_JS_CDN)
|
||
})
|
||
.then(() => {
|
||
// anki模板无法使用window.onload我怀疑是被占用了
|
||
// window.onload = parseMarkDown
|
||
|
||
// 可以尝试手动清除anki生成的<br>
|
||
|
||
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>
|