Tools
/
anki-md-template
mirror of https://github.com/aote777/anki-md-template.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
anki-md-template/demo.html

213 lines
8.4 KiB
HTML
Raw Normal View History

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>
cccccccccccccccccccc
2021-11-23 10:04:57 +00:00
<style>
cccccccccccccc
2021-11-23 12:23:57 +00:00
/* 这个需要复制到anki的css样式的那个窗口里 */
ccccccccccccccccccc
2021-11-23 09:46:32 +00:00
.markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 45px;
}
cccccccccccccccccc
2021-11-23 13:40:19 +00:00
ccccccccccccccccccc
2021-11-23 09:46:32 +00:00
@media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
cccccccccccccccccccc
2021-11-23 10:04:57 +00:00
</style>
first commit
2021-11-22 10:00:34 +00:00
<body>
踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩
2021-11-23 08:28:27 +00:00
<textarea class="md-content">
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 12:23:57 +00:00
- [ ] 22
cccccccccccccccccc
2021-11-23 08:22:35 +00:00
cccccccccccccc
2021-11-23 12:23:57 +00:00
[百度](http://baidu.com)
cccccccccccccccccc
2021-11-23 08:22:35 +00:00
cccccccccccc
2021-11-23 09:15:39 +00:00
```
cccccccccccccccccc
2021-11-23 13:40:19 +00:00
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
cccccccccccc
2021-11-23 09:15:39 +00:00
```
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这都出来了
cccccccccc
2021-11-23 12:26:24 +00:00
+ 试试
踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩
2021-11-23 08:28:27 +00:00
> 引入的话话里有话
ccccccccccccccccccccccccccc
2021-11-23 08:41:33 +00:00
| ni | wo |
| :--:|:--:|
| 1|2|
cccccccccccccc
2021-11-23 12:23:57 +00:00
* base64图片测试
![图片测试][img1]
cccccccccc
2021-11-23 12:24:36 +00:00
cccccccccccccc
2021-11-23 12:23:57 +00:00
[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
ccccccccccccccc
2021-11-23 09:32:59 +00:00
</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)
}
更换cdn
2022-06-10 08:51:56 +00:00
// anki中 不可以使用let/const
ccccccccccc
2021-11-25 08:27:18 +00:00
var JQ_CDN =
first commit
2021-11-22 10:00:34 +00:00
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'
ccccccccccc
2021-11-25 08:27:18 +00:00
var SHOWDOWN_CDN =
更换cdn
2022-06-10 08:51:56 +00:00
// 'https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js'
'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/showdown/2.0.0/showdown.min.js'
ccccccccccc
2021-11-25 08:27:18 +00:00
var HIGHLIGHT_JS_CDN =
更换cdn
2022-06-10 08:51:56 +00:00
// 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js'
'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/11.4.0/highlight.min.js'
ccccccccccc
2021-11-25 08:27:18 +00:00
var HIGHLIGHT_CSS_CDN =
cccccccccccccccccccccccc
2021-11-23 07:37:26 +00:00
// 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css'
更换cdn
2022-06-10 08:51:56 +00:00
// 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/base16/onedark.min.css'
'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/11.4.0/styles/base16/onedark.min.css'
ccccccccccc
2021-11-25 08:27:18 +00:00
var GITHUB_MARKDOWN_CSS_CDN =
更换cdn
2022-06-10 08:51:56 +00:00
// 'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.0.0/github-markdown.min.css'
'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/github-markdown-css/5.1.0/github-markdown-dark.min.css'
踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩
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)
}
cccccccccccc
2021-11-23 09:15:39 +00:00
// 清除br标签
cccccccccccccccccc
2021-11-23 13:40:19 +00:00
// anki自动生成的<br>全部干掉 严格按照原生换行来写
ccccccccccccccc
2021-11-23 09:32:59 +00:00
var clearBR = (str) => {
cccccccccccccccccc
2021-11-23 13:40:19 +00:00
str = str.replace(/<br>/g, '\r\n')
cccccccccccc
2021-11-23 12:59:11 +00:00
return str
cccccccccccc
2021-11-23 09:15:39 +00:00
}
ccccccccccccccccccc
2021-11-23 13:47:10 +00:00
var clearBlankNbsp=(str)=>{
str = str.replace(/&nbsp;/g, ' ')
return str
cccccccccccccccccc
2021-11-23 13:40:19 +00:00
}
踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩
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 09:17:45 +00:00
smartIndentationFix: true,
first commit
2021-11-22 10:00:34 +00:00
// 将换行符解析为 <br>，行尾不需要2个空格
cccccccccccccc
2021-11-23 09:17:45 +00:00
simpleLineBreaks: true,
first commit
2021-11-22 10:00:34 +00:00
// 反斜杠转义html
cccccccccccccc
2021-11-23 09:17:45 +00:00
backslashEscapesHTMLTags: true,
first commit
2021-11-22 10:00:34 +00:00
// 禁用将子列表缩进4个空格以使其嵌套的要求，有效地恢复到2或3个空格足够的旧行为
cccccccccccc
2021-11-23 09:15:39 +00:00
// disableforced4spacesindentedsublist: true,
cccccccccccccc
2021-11-23 09:17:45 +00:00
ghCodeBlocks: true,
first commit
2021-11-22 10:00:34 +00:00
})
cccc
2021-11-23 09:49:09 +00:00
// 好像是失效的？？不管用呢
ccccccccccccc
2021-11-23 09:48:53 +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)
ccccccccccccccccccc
2021-11-23 13:47:10 +00:00
textarea.innerHTML=clearBlankNbsp(textarea.innerHTML)
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)
cccccccccccc
2021-11-23 09:15:39 +00:00
// 清除br标签试试
ccccccccccccccc
2021-11-23 09:32:59 +00:00
text = clearBR(text)
cccccccccccc
2021-11-23 09:15:39 +00:00
// 👇关键核心md转换
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
ccccc
2021-11-23 09:48:41 +00:00
// 激活github-markdown-css
ccccccccccccccccccc
2021-11-23 09:46:32 +00:00
newDiv.className = 'markdown-body'
踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩
2021-11-23 08:28:27 +00:00
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
})
}
ccccccccccc
2021-11-25 08:27:18 +00:00
createLink(GITHUB_MARKDOWN_CSS_CDN)
createLink(HIGHLIGHT_CSS_CDN)
ccccccccccccccccccc
2021-11-23 09:46:32 +00:00
ccccccccccc
2021-11-25 08:27:18 +00:00
createScript(SHOWDOWN_CDN)
first commit
2021-11-22 10:00:34 +00:00
.then(() => {
ccccccccccc
2021-11-25 08:27:18 +00:00
return createScript(HIGHLIGHT_JS_CDN)
first commit
2021-11-22 10:00:34 +00:00
})
.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
cccccccccccc
2021-11-23 09:15:39 +00:00
// 可以尝试手动清除anki生成的<br>
cccccccccccccccc
2021-11-22 15:40:20 +00:00
parseMarkDown()
cccccccccccccccc
2021-11-23 07:12:13 +00:00
return new Promise((resolve) => {
resolve()
})
})
.then(() => {
ccccccccccccccccccc
2021-11-23 09:46:32 +00:00
// 自动代码高亮
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>