-
Notifications
You must be signed in to change notification settings - Fork 6
/
demo.html
205 lines (189 loc) · 5.88 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!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)
---
![图片](https://www.baidu.com/img/bd_logo1.png)
---
`行内代码`
---
```javascript
// 代码块
console.log('hello world')
```
</div>
<!--
整个script内容(包括script标签)
需要复制到anki的卡片模板中
-->
<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: true, // 若为 false 将导致 anki 自带的公式渲染失效。
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).trim()
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>