-
-
Notifications
You must be signed in to change notification settings - Fork 904
/
Copy pathrender.html
165 lines (144 loc) · 6.69 KB
/
render.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
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<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, maximum-scale=1.0"/>
<meta name="theme-color" content="#f1f7fe">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Vditor: ♏ An In-browser Markdown editor, support WYSIWYG, Instant Rendering (Typora-like) and Split View
modes. 一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。</title>
<meta name="description"
content="Vditor 支持三种所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）模式，支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染。"/>
<meta property="og:description"
content="Vditor 支持三种所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）模式，支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染。"/>
<meta name="twitter:description" property="og:description" itemprop="description"
content="Vditor 支持三种所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）模式，支持大纲、数学公式、脑图、图表、流程图、甘特图、时序图、五线谱、多媒体、语音阅读、标题锚点、代码高亮及复制、graphviz 渲染。"/>
<link rel="dns-prefetch" href="//cdn.jsdelivr.net/"/>
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
<link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png">
<link rel="shortcut icon" type="image/x-icon" href="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png">
<meta name="copyright" content="B3log"/>
<meta http-equiv="Window-target" content="_top"/>
<meta property="og:locale" content="zh-cmn-Hans"/>
<meta property="og:title"
content="Vditor: ♏ An In-browser Markdown editor, support WYSIWYG, Instant Rendering (Typora-like) and Split View modes. 一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。"/>
<meta property="og:site_name" content="Blog-vditor"/>
<meta property="og:url" content="https://b3log.org/vditor"/>
<meta name="twitter:card" content="summary"/>
<meta name="twitter:domain" content="b3log.org"/>
<meta name="twitter:title" property="og:title" itemprop="b3lig vditor"
content="Vditor: ♏ An In-browser Markdown editor, support WYSIWYG, Instant Rendering (Typora-like) and Split View modes. 一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。"/>
<meta name="twitter:site" content="@B3logOS"/>
<meta name="twitter:url" content="https://b3log.org/vditor"/>
<meta property="og:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
<meta name="twitter:image" content="https://cdn.jsdelivr.net/npm/vditor/dist/images/logo.png"/>
<style>
body {
margin: 0;
}
.nav {
text-align: center;
margin: 20px 0
}
.link {
cursor: pointer;
color: #4285f4;
}
#previewWrap {
padding: 0 226px 20px 20px;
}
#preview {
margin: 0 auto;
max-width: 768px;
}
#outline {
display: none;
position: fixed;
width: 186px;
top: 64px;
right: 20px;
bottom: 20px;
overflow: auto;
font-size: 12px;
border-left: 1px solid var(--border-color);
border-right: 0;
--border-color: #eee;
--toolbar-icon-hover-color: #4285f4;
--textarea-text-color: #616161;
--hover-background-color: #f6f8fa;
}
#outline.dark {
--border-color: #d1d5da;
--toolbar-icon-hover-color: #fff;
--textarea-text-color: #a6aab0;
--hover-background-color: #444d56;
}
.vditor-reset ul[data-style="*"] {
list-style-type: disc
}
.vditor-reset ul[data-style="*"] ul {
list-style-type: circle
}
.vditor-reset ul[data-style="*"] ul ul {
list-style-type: square
}
.vditor-reset ul[data-style="+"] {
list-style-type: "\2764";
}
.vditor-reset ul[data-style="+"] ul {
list-style-type: "\1f49a"
}
.vditor-reset ul[data-style="+"] ul ul {
list-style-type: "\1f49b"
}
.vditor-reset ul[data-style="-"] {
list-style-type: korean-hangul-formal
}
.vditor-reset ul[data-style="-"] ul {
list-style-type: decimal-leading-zero
}
.vditor-reset ul[data-style="-"] ul ul {
list-style-type: lower-alpha
}
.vditor-reset ol[data-style="1)"] {
list-style-type: simp-chinese-formal
}
.vditor-reset ol[data-style="1)"] ol {
list-style-type: simp-chinese-informal
}
.vditor-reset ol[data-style="1)"] ol ol {
list-style-type: trad-chinese-formal
}
@media screen and (max-width: 768px) {
#previewWrap {
padding: 0 20px 20px 0;
}
#outline {
display: none !important;
}
}
</style>
</head>
<body>
<div class="vditor-reset nav">
<a class="link" href="https://b3log.org/vditor" target="_blank">官网</a>
<a class="link" href="/">Editor</a>
<button onclick="setTheme('dark')">Dark Mode</button>
<button onclick="setTheme('light')">Light Mode</button>
</div>
<div class="markdown-list nav">
<span class="link" data-file="zh_CN">zh_CN</span>
<span class="link" data-file="ko_KR">ko_KR</span>
<span class="link" data-file="cute-list">cute-list</span>
<span class="link" data-file="entity">entity</span>
</div>
<div id="previewWrap">
<div id="preview" class="preview"></div>
</div>
<div id="outline"></div>
</body>
</html>