Skip to content

Commit 88bbbd3

Browse files
fritxfritx
committed
feat: support markdown & add demos
1 parent 02370f4 commit 88bbbd3

16 files changed

+744
-3
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ Visit: https://coldemo.github.io/
77
- [ ] vscode tsconfig src/\* alias (being reverted by npm-run-dev)
88
- [ ] antd4, safe js exec sandbox - see pureproxy
99
- [ ] storage list, responsive, screenshot, code-splitting
10-
- [ ] faked location/window, cookie/storage partition
10+
- [ ] faked location/window, cookie/storage partition, markdown anchor
1111
- [ ] tag-filter/btn-back/reset/export/upload/fullscreen/popstate
1212
- [ ] lang rb/go/java/dart/kotlin, mjs-import/vite
13-
- [x] crank-jsx, vue-jsx, ts/tsx, py, vue, add/removeRendering
13+
- [x] crank-jsx, vue-jsx, ts/tsx, py, vue, md, add/removeRendering
1414
- [x] error-handling, assetsNode, load-parallel
1515
- [x] gh-pages, lang js/jsx, react/vue, umd-hack
1616
- [x] code read from url, storybook cards

‎public/code/index.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
- vditor-charts.md
2+
- vditor-sequence.md
3+
- vditor-flow.md
4+
- vditor-gantt.md
5+
- vditor-rich.md
6+
- vditor-arya.md
17
- espresso-todomvc.js
28
- vanta.jsx
39
- vue-sfc.vue

‎public/code/vditor-arya.md‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
# 欢迎使用 `Arya` 在线 Markdown 编辑器
2+
3+
[Arya](https://markdown.lovejade.cn/?utm_source=markdown.lovejade.cn)，是一款基于 `Vue`、`Vditor`，为未来而构建的在线 Markdown 编辑器；轻量且强大：内置粘贴 HTML 自动转换为 Markdown，支持流程图、甘特图、时序图、任务列表，可导出携带样式的图片、PDF、微信公众号特制的 HTML 等等。
4+
5+
---
6+
7+
## 如何使用
8+
9+
**微注**：清空目前这份默认文档，即处于可使用态。[Arya](https://markdown.lovejade.cn/?utm_source=markdown.lovejade.cn) 另一大优点在于：编辑内容只会在您本地进行保存，不会上传您的数据至服务器，**绝不窥测用户个人隐私，可放心使用**；Github 源码：[markdown-online-editor](https://github.com/nicejade/markdown-online-editor)，部分功能仍在开发🚧，敬请期待。
10+
11+
默认为[所见即所得](https://hacpai.com/article/1577370404903?utm_source=github.com)模式，可通过 `⌘-⇧-M`（`Ctrl-⇧-M`）进行切换；或通过以下方式：
12+
- 所见即所得：`⌘-⌥-7`（`Ctrl-alt-7`）；
13+
- 即时渲染：`⌘-⌥-8`（`Ctrl-alt-8`）；
14+
- 分屏渲染：`⌘-⌥-9`（`Ctrl-alt-9`）；
15+
16+
### PPT 预览
17+
18+
如果您用作 `PPT` 预览（入口在`设置`中），需要注意，这里暂还不能支持各种图表的渲染；您可以使用 `---` 来定义水平方向上幻灯片，用 `--` 来定义垂直幻灯片；更多设定可以参见 [RevealJs 文档](https://github.com/hakimel/reveal.js#table-of-contents)。
19+
20+
21+
---
22+
23+
## 什么是 Markdown
24+
25+
[Markdown](https://nicelinks.site/tags/Markdown/?utm_source=markdown.lovejade.cn) 是一种方便记忆、书写的纯文本标记语言，用户可以使用这些标记符号，以最小的输入代价，生成极富表现力的文档：譬如您正在阅读的这份文档。它使用简单的符号标记不同的标题，分割不同的段落，**粗体**、*斜体* 或者[超文本链接](https://vue-cli3.lovejade.cn/explore/)，更棒的是，它还可以：
26+
27+
---
28+
29+
### 1. 制作待办事宜 `Todo` 列表
30+
31+
- [x] 🎉 通常 `Markdown` 解析器自带的基本功能；
32+
- [x] 🍀 支持**流程图**、**甘特图**、**时序图**、**任务列表**；
33+
- [x] 🏁 支持粘贴 HTML 自动转换为 Markdown；
34+
- [x] 💃🏻 支持插入原生 Emoji、设置常用表情列表；
35+
- [x] 🚑 支持编辑内容保存**本地存储**，防止意外丢失；
36+
- [x] 📝 支持**实时预览**，主窗口大小拖拽，字符计数；
37+
- [x] 🛠 支持常用快捷键(**Tab**)，及代码块添加复制
38+
- [x] ✨ 支持**导出**携带样式的 PDF、PNG、JPEG 等；
39+
- [x] ✨ 升级 Vditor，新增对 `echarts` 图表的支持；
40+
- [x] 👏 支持检查并格式化 Markdown 语法，使其专业；
41+
- [x] 🦑 支持五线谱、及[部分站点、视频、音频解析](https://github.com/b3log/vditor/issues/117?utm_source=hacpai.com#issuecomment-526986052)；
42+
- [x] 🌟 增加对**所见即所得**编辑模式的支持(`⌘-⇧-M`)；
43+
44+
---
45+
46+
### 2. 书写一个质能守恒公式[^LaTeX]
47+
48+
$$
49+
E=mc^2
50+
$$
51+
52+
---
53+
54+
### 3. 高亮一段代码[^code]
55+
56+
```js
57+
// 给页面里所有的 DOM 元素添加一个 1px 的描边（outline）;
58+
[].forEach.call($$("*"),function(a){
59+
a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16);
60+
})
61+
```
62+
63+
### 4. 高效绘制[流程图](https://github.com/knsv/mermaid#flowchart)
64+
65+
```mermaid
66+
graph TD;
67+
A-->B;
68+
A-->C;
69+
C-->F
70+
A-->E;
71+
A-->D;
72+
A-->F;
73+
E-->F;
74+
```
75+
76+
### 5. 高效绘制[序列图](https://github.com/knsv/mermaid#sequence-diagram)
77+
78+
```mermaid
79+
sequenceDiagram
80+
participant Alice
81+
participant Bob
82+
Alice->John: Hello John, how are you?
83+
loop Healthcheck
84+
John->John: Fight against hypochondria
85+
end
86+
Note right of John: Rational thoughts <br/>prevail...
87+
John-->Alice: Great!
88+
John->Bob: How about you?
89+
Bob-->John: Jolly good!
90+
```
91+
92+
### 6. 高效绘制[甘特图](https://github.com/knsv/mermaid#gantt-diagram)
93+
94+
>**甘特图**内在思想简单。基本是一条线条图，横轴表示时间，纵轴表示活动（项目），线条表示在整个期间上计划和实际的活动完成情况。它直观地表明任务计划在什么时候进行，及实际进展与计划要求的对比。
95+
96+
```mermaid
97+
gantt
98+
title 项目开发流程
99+
section 项目确定
100+
需求分析 :a1, 2019-06-22, 3d
101+
可行性报告 :after a1, 5d
102+
概念验证 : 5d
103+
section 项目实施
104+
概要设计 :2019-07-05 , 5d
105+
详细设计 :2019-07-08, 10d
106+
编码 :2019-07-15, 10d
107+
测试 :2019-07-22, 5d
108+
section 发布验收
109+
发布: 2d
110+
验收: 3d
111+
```
112+
113+
### 7. 支持图表
114+
115+
```echarts
116+
{
117+
"backgroundColor": "#212121",
118+
"title": {
119+
"text": "「晚晴幽草轩」访问来源",
120+
"subtext": "2019 年 6 月份",
121+
"x": "center",
122+
"textStyle": {
123+
"color": "#f2f2f2"
124+
}
125+
},
126+
"tooltip": {
127+
"trigger": "item",
128+
"formatter": "{a} <br/>{b} : {c} ({d}%)"
129+
},
130+
"legend": {
131+
"orient": "vertical",
132+
"left": "left",
133+
"data": [
134+
"搜索引擎",
135+
"直接访问",
136+
"推荐",
137+
"其他",
138+
"社交平台"
139+
],
140+
"textStyle": {
141+
"color": "#f2f2f2"
142+
}
143+
},
144+
"series": [
145+
{
146+
"name": "访问来源",
147+
"type": "pie",
148+
"radius": "55%",
149+
"center": [
150+
"50%",
151+
"60%"
152+
],
153+
"data": [
154+
{
155+
"value": 10440,
156+
"name": "搜索引擎",
157+
"itemStyle": {
158+
"color": "#ef4136"
159+
}
160+
},
161+
{
162+
"value": 4770,
163+
"name": "直接访问"
164+
},
165+
{
166+
"value": 2430,
167+
"name": "推荐"
168+
},
169+
{
170+
"value": 342,
171+
"name": "其他"
172+
},
173+
{
174+
"value": 18,
175+
"name": "社交平台"
176+
}
177+
],
178+
"itemStyle": {
179+
"emphasis": {
180+
"shadowBlur": 10,
181+
"shadowOffsetX": 0,
182+
"shadowColor": "rgba(0, 0, 0, 0.5)"
183+
}
184+
}
185+
}
186+
]
187+
}
188+
```
189+
190+
>**备注**：上述 echarts 图表📈，其数据，须使用严格的 **JSON** 格式；您可使用 JSON.stringify(data)，将对象传换从而得标准数据，即可正常使用。
191+
192+
### 8. 绘制表格
193+
194+
| 作品名称 | 在线地址 | 上线日期 |
195+
| :-------- | :----- | :----: |
196+
| 倾城之链 | [https://nicelinks.site](https://nicelinks.site/??utm_source=markdown.lovejade.cn) |2017-09-20|
197+
| 晚晴幽草轩 | [https://jeffjade.com](https://jeffjade.com/??utm_source=markdown.lovejade.cn) |2014-09-20|
198+
| 静轩之别苑 | [http://quickapp.lovejade.cn](http://quickapp.lovejade.cn/??utm_source=markdown.lovejade.cn) |2019-01-12|
199+
200+
### 9. 更详细语法说明
201+
202+
想要查看更详细的语法说明，可以参考这份 [Markdown 资源列表](https://github.com/nicejade/nice-front-end-tutorial/blob/master/tutorial/markdown-tutorial.md)，涵盖入门至进阶教程，以及资源、平台等信息，能让您对她有更深的认知。
203+
204+
总而言之，不同于其它*所见即所得*的编辑器：你只需使用键盘专注于书写文本内容，就可以生成印刷级的排版格式，省却在键盘和工具栏之间来回切换，调整内容和格式的麻烦。**Markdown 在流畅的书写和印刷级的阅读体验之间找到了平衡。** 目前它已经成为世界上最大的技术分享网站 `GitHub` 和 技术问答网站 `StackOverFlow` 的御用书写格式，而且越发流行，正在在向各行业渗透。
205+
206+
最新更新于 2019.08.21

‎public/code/vditor-arya.md.png‎

271 KB
Loading

‎public/code/vditor-charts.md‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
### 图表
2+
3+
```echarts
4+
{
5+
"backgroundColor": "#212121",
6+
"title": {
7+
"text": "「晚晴幽草轩」访问来源",
8+
"subtext": "2019 年 6 月份",
9+
"x": "center",
10+
"textStyle": {
11+
"color": "#f2f2f2"
12+
}
13+
},
14+
"tooltip": {
15+
"trigger": "item",
16+
"formatter": "{a} <br/>{b} : {c} ({d}%)"
17+
},
18+
"legend": {
19+
"orient": "vertical",
20+
"left": "left",
21+
"data": [
22+
"搜索引擎",
23+
"直接访问",
24+
"推荐",
25+
"其他",
26+
"社交平台"
27+
],
28+
"textStyle": {
29+
"color": "#f2f2f2"
30+
}
31+
},
32+
"series": [
33+
{
34+
"name": "访问来源",
35+
"type": "pie",
36+
"radius": "55%",
37+
"center": [
38+
"50%",
39+
"60%"
40+
],
41+
"data": [
42+
{
43+
"value": 10440,
44+
"name": "搜索引擎",
45+
"itemStyle": {
46+
"color": "#ef4136"
47+
}
48+
},
49+
{
50+
"value": 4770,
51+
"name": "直接访问"
52+
},
53+
{
54+
"value": 2430,
55+
"name": "推荐"
56+
},
57+
{
58+
"value": 342,
59+
"name": "其他"
60+
},
61+
{
62+
"value": 18,
63+
"name": "社交平台"
64+
}
65+
],
66+
"itemStyle": {
67+
"emphasis": {
68+
"shadowBlur": 10,
69+
"shadowOffsetX": 0,
70+
"shadowColor": "rgba(0, 0, 0, 0.5)"
71+
}
72+
}
73+
}
74+
]
75+
}
76+
```
77+
78+
```echarts
79+
{
80+
"title": { "text": "最近 30 天" },
81+
"tooltip": { "trigger": "axis", "axisPointer": { "lineStyle": { "width": 0 } } },
82+
"legend": { "data": ["帖子", "用户", "回帖"] },
83+
"xAxis": [{
84+
"type": "category",
85+
"boundaryGap": false,
86+
"data": ["2019-05-08","2019-05-09","2019-05-10","2019-05-11","2019-05-12","2019-05-13","2019-05-14","2019-05-15","2019-05-16","2019-05-17","2019-05-18","2019-05-19","2019-05-20","2019-05-21","2019-05-22","2019-05-23","2019-05-24","2019-05-25","2019-05-26","2019-05-27","2019-05-28","2019-05-29","2019-05-30","2019-05-31","2019-06-01","2019-06-02","2019-06-03","2019-06-04","2019-06-05","2019-06-06","2019-06-07"],
87+
"axisTick": { "show": false },
88+
"axisLine": { "show": false }
89+
}],
90+
"yAxis": [{ "type": "value", "axisTick": { "show": false }, "axisLine": { "show": false }, "splitLine": { "lineStyle": { "color": "rgba(0, 0, 0, .38)", "type": "dashed" } } }],
91+
"series": [
92+
{
93+
"name": "帖子", "type": "line", "smooth": true, "itemStyle": { "color": "#d23f31" }, "areaStyle": { "normal": {} }, "z": 3,
94+
"data": ["18","14","22","9","7","18","10","12","13","16","6","9","15","15","12","15","8","14","9","10","29","22","14","22","9","10","15","9","9","15","0"]
95+
},
96+
{
97+
"name": "用户", "type": "line", "smooth": true, "itemStyle": { "color": "#f1e05a" }, "areaStyle": { "normal": {} }, "z": 2,
98+
"data": ["31","33","30","23","16","29","23","37","41","29","16","13","39","23","38","136","89","35","22","50","57","47","36","59","14","23","46","44","51","43","0"]
99+
},
100+
{
101+
"name": "回帖", "type": "line", "smooth": true, "itemStyle": { "color": "#4285f4" }, "areaStyle": { "normal": {} }, "z": 1,
102+
"data": ["35","42","73","15","43","58","55","35","46","87","36","15","44","76","130","73","50","20","21","54","48","73","60","89","26","27","70","63","55","37","0"]
103+
}
104+
]
105+
}
106+
```
107+
108+
>**备注**：上述 echarts 图表📈，其数据，须使用严格的 **JSON** 格式；您可使用 JSON.stringify(data)，将对象传换从而得标准数据，即可正常使用。

‎public/code/vditor-charts.md.png‎

79.4 KB
Loading

‎public/code/vditor-flow.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
### [流程图](https://github.com/knsv/mermaid#flowchart)
2+
3+
```mermaid
4+
graph TD;
5+
A-->B;
6+
A-->C;
7+
C-->F
8+
A-->E;
9+
A-->D;
10+
A-->F;
11+
E-->F;
12+
```
13+
14+
```mermaid
15+
graph TB
16+
c1-->a2
17+
subgraph one
18+
a1-->a2
19+
end
20+
subgraph two
21+
b1-->b2
22+
end
23+
subgraph three
24+
c1-->c2
25+
end
26+
```

‎public/code/vditor-flow.md.png‎

46.3 KB
Loading

‎public/code/vditor-gantt.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
### [甘特图](https://github.com/knsv/mermaid#gantt-diagram)
2+
3+
>**甘特图**内在思想简单。基本是一条线条图，横轴表示时间，纵轴表示活动（项目），线条表示在整个期间上计划和实际的活动完成情况。它直观地表明任务计划在什么时候进行，及实际进展与计划要求的对比。
4+
5+
```mermaid
6+
gantt
7+
title A Gantt Diagram
8+
dateFormat YYYY-MM-DD
9+
section Section
10+
A task :a1, 2019-01-01, 30d
11+
Another task :after a1 , 20d
12+
section Another
13+
Task in sec :2019-01-12 , 12d
14+
another task : 24d
15+
```
16+
17+
```mermaid
18+
gantt
19+
title 项目开发流程
20+
section 项目确定
21+
需求分析 :a1, 2019-06-22, 3d
22+
可行性报告 :after a1, 5d
23+
概念验证 : 5d
24+
section 项目实施
25+
概要设计 :2019-07-05 , 5d
26+
详细设计 :2019-07-08, 10d
27+
编码 :2019-07-15, 10d
28+
测试 :2019-07-22, 5d
29+
section 发布验收
30+
发布: 2d
31+
验收: 3d
32+
```

‎public/code/vditor-gantt.md.png‎

154 KB
Loading

0 commit comments

Comments
 (0)