202 lines
5.7 KiB
HTML
202 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="cn">
|
||
<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>
|
||
.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;
|
||
}
|
||
}
|
||
/* 初始状态下设置透明度为0 */
|
||
.md-content {
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease-in-out;
|
||
}
|
||
</style>
|
||
<body>
|
||
<!-- prettier-ignore -->
|
||
<div class="md-content">
|
||
### 我看showdown真是老糊涂了
|
||
</div>
|
||
<!-- prettier-ignore -->
|
||
<div class="md-content">
|
||
|
||
> 呵呵呵
|
||
> 呵呵呵哈哈哈哈
|
||
|
||
> 喜喜
|
||
|
||
# 一级标题
|
||
## 二级标题
|
||
### 三级标题
|
||
#### 四级标题
|
||
##### 五级标题
|
||
###### 六级标题
|
||
---
|
||
**加粗**
|
||
*斜体*
|
||
***加粗斜体***
|
||
---
|
||
> 引用
|
||
---
|
||
- 无序列表
|
||
- 无序列表
|
||
- 无序列表
|
||
---
|
||
1. 有序列表
|
||
2. 有序列表
|
||
3. 有序列表
|
||
---
|
||
[链接](https://www.baidu.com)
|
||
---
|
||
|
||
---
|
||
`行内代码`
|
||
---
|
||
```javascript
|
||
// 代码块
|
||
console.log('hello world')
|
||
```
|
||
</div>
|
||
<script>
|
||
'use strict'
|
||
// 在anki中查看调试信息 没控制台啊
|
||
function consoleLog(str) {
|
||
var div = document.createElement('div')
|
||
div.innerHTML = str
|
||
document.body.appendChild(div)
|
||
}
|
||
|
||
// https://github.com/markdown-it/markdown-it
|
||
var MARKDOWN_IT_CDN =
|
||
'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/markdown-it/12.3.2/markdown-it.min.js'
|
||
|
||
// 代码高亮库
|
||
var HIGHLIGHT_JS_CDN =
|
||
'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/11.4.0/highlight.min.js'
|
||
|
||
// 代码高亮样式
|
||
var HIGHLIGHT_CSS_CDN =
|
||
'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/highlight.js/11.4.0/styles/base16/onedark.min.css'
|
||
|
||
// github-markdown-css
|
||
var GITHUB_MARKDOWN_CSS_CDN =
|
||
'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/github-markdown-css/5.1.0/github-markdown.min.css'
|
||
|
||
// 加载库文件
|
||
var createScript = (src) => {
|
||
var scriptElement = document.createElement('script')
|
||
scriptElement.src = src
|
||
scriptElement.async = true
|
||
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)
|
||
}
|
||
createLink(GITHUB_MARKDOWN_CSS_CDN)
|
||
createLink(HIGHLIGHT_CSS_CDN)
|
||
|
||
// 清除br标签
|
||
// anki自动生成的<br>全部干掉 严格按照原生换行来写
|
||
var clearBR = (str) => {
|
||
str = str.replace(/<br>/g, '\r\n')
|
||
return str
|
||
}
|
||
|
||
// 清除空格实体字符
|
||
var clearBlankNbsp = (str) => {
|
||
str = str.replace(/ /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: false,
|
||
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
|
||
},
|
||
})
|
||
document.querySelectorAll('.md-content').forEach((div, index) => {
|
||
console.log('查找到的容器元素', div)
|
||
// 需要去除首尾空格 不然markdown-it会解析错误
|
||
var text = unescapeHTMLEntities(div.innerHTML)
|
||
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 不刷新的
|
||
})
|
||
}
|
||
|
||
createScript(HIGHLIGHT_JS_CDN)
|
||
.then(() => {
|
||
return createScript(MARKDOWN_IT_CDN)
|
||
})
|
||
.then(() => {
|
||
// anki模板无法使用window.onload我怀疑是被占用了
|
||
parseMarkDownFn()
|
||
})
|
||
.then(() => {
|
||
// 清除重复项 试试
|
||
var repeatEl = document.querySelectorAll('.x-0')
|
||
repeatEl.forEach((el, i) => {
|
||
if (i === repeatEl.length - 1) {
|
||
return
|
||
}
|
||
document.body.removeChild(el)
|
||
})
|
||
})
|
||
</script>
|
||
</body>
|
||
</html>
|