Skip to content

Commit 59b1f9e

Browse files
committed
Update docs web site.
1 parent 406789c commit 59b1f9e

File tree

10 files changed

+292
-85
lines changed

10 files changed

+292
-85
lines changed

docs/demo/assets/css/chunk-vendors.css

Lines changed: 9 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/demo/assets/css/chunk-vendors.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/demo/assets/css/index.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/demo/assets/css/index.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/demo/assets/js/chunk-vendors.js

Lines changed: 21 additions & 28 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/demo/assets/js/chunk-vendors.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/demo/assets/js/index.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/demo/assets/js/index.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/demo/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><title>markdown-showdowns-editor</title><link href=assets/css/chunk-vendors.css rel=preload as=style><link href=assets/css/index.css rel=preload as=style><link href=assets/js/chunk-vendors.js rel=preload as=script><link href=assets/js/index.js rel=preload as=script><link href=assets/css/chunk-vendors.css rel=stylesheet><link href=assets/css/index.css rel=stylesheet></head><body><noscript><strong>We're sorry but hello-world doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=assets/js/chunk-vendors.js></script><script src=assets/js/index.js></script></body></html>
1+
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>markdown-showdowns-editor</title><link href="assets/css/chunk-vendors.css" rel="preload" as="style"><link href="assets/css/index.css" rel="preload" as="style"><link href="assets/js/chunk-vendors.js" rel="preload" as="script"><link href="assets/js/index.js" rel="preload" as="script"><link href="assets/css/chunk-vendors.css" rel="stylesheet"><link href="assets/css/index.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but hello-world doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="assets/js/chunk-vendors.js"></script><script src="assets/js/index.js"></script></body></html>

docs/showdowns-features.md

Lines changed: 255 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,96 @@ Showdowns Markdown Syntax, refer to the document -- [Showdown's Markdown Syntax]
99

1010
- **In browser environment, it is implemented to dynamically load js lib files related to more showdown diagrams extension for using [showdowns >= 0.3.0 version](https://github.com/jhuix/showdowns).**
1111

12-
- **In codeblock of markdown, expanded syntax language attribute from "\```codename" to "\```codename {json}" or "\```codename [json]".**
12+
- **In codeblock of markdown, expanded syntax language attribute from "\```language" to "\```language {json}" or "\```language [json]".**
1313

1414
- **The common "align" field value of json is "left" or "center" or "right" in syntax language attribute, and it is empty means "left" align.**
1515

16-
- **The common "codeblock" field value of json is "true" or "false" in syntax language attribute, and it is empty means "false". It is "true" means the codeblock is forced to display as normal code block, otherwise the codeblock is tried to parse as corresponding diagrams.**
16+
- **The common "codeblock" field value of json is "true" or "false" in syntax language attribute, and it is empty means "false". It is "true" means the codeblock is forced to display as normal code block, otherwise the codeblock is tried to parse as corresponding diagrams.**
1717

1818
- For example, see following [Network Sequence](#network-sequence) example.
1919

2020
## Table
2121

22+
- The following features are extended based on the showdown's table:
23+
24+
- Cell spans over columns
25+
- Cell spans over rows (optional)
26+
- Omitted table header (optional)
27+
28+
- Showdown's table
29+
30+
cell style syntax has "-{2,}",":-{2,}",":-{2,}:","-{2,}:", means default (align left), align left, align center, and align right style
31+
32+
| Return Code | Style | Value | DESC |
33+
| ----------- | :-----: | :----- | ---------: |
34+
| OK | int | 1 | Succeeded |
35+
| ERROR | int | 0 | Failed '\|' |
36+
2237
| Return Code | Style | Value | DESC |
23-
| ----------- | ----- | ----- | --------- |
38+
| ----------- | :-----: | :----- | ---------: |
2439
| OK | int | 1 | Succeeded |
2540
| ERROR | int | 0 | Failed |
2641

42+
- Colspan table
43+
44+
"||" indicates cells being merged left.
45+
46+
| Return Code | Style | Value | DESC |
47+
| ====== | :-----: | ===== | ===== |
48+
| **OK** | int | 1 | [Succeeded](https://www.baidu.com) |
49+
| ERROR | int | 0 ||
50+
| ERROR || 0 ||
51+
52+
| Return Code | Style | Value | DESC |
53+
| ====== | :-----: | ===== | ===== |
54+
| **OK** | int | 1 | [Succeeded](https://www.baidu.com) |
55+
| ERROR | int | 0 ||
56+
| ERROR || 0 ||
57+
58+
- Rowspan table (optional: tablesRowspan)
59+
60+
"^^" indicates cells being merged above.
61+
62+
| Return Code | Style | Value | DESC |
63+
| ====== | :-----: | ===== | ===== |
64+
| ^^ || 1 | [Succeeded](https://www.baidu.com) |
65+
| ^^ || 0 ||
66+
| ERROR | int | 0 ||
67+
| ERROR || 0 ||
68+
| ^^ || 0 ||
69+
70+
| Return Code | Style | Value | DESC |
71+
| ====== | :-----: | ===== | ===== |
72+
| ^^ || 1 | [Succeeded](https://www.baidu.com) |
73+
| ^^ || 0 ||
74+
| ERROR | int | 0 ||
75+
| ERROR || 0 ||
76+
| ^^ || 0 ||
77+
78+
- Headerless table (optional: tablesHeaderless)
79+
80+
Table header can be eliminated.
81+
82+
|--|--|--|--|--|--|--|--|
83+
|♜| |♝|♛|♚|♝|♞|♜|
84+
| |♟|♟|♟| |♟|♟|♟|
85+
|♟| |♞| | | | | |
86+
| |♗| | |♟| | | |
87+
| | | | |♙| | | |
88+
| | | | | |♘| | |
89+
|♙|♙|♙|♙| |♙|♙|♙|
90+
|♖|♘|♗|♕|♔| | |♖|
91+
92+
|--|--|--|--|--|--|--|--|
93+
|| |||||||
94+
| |||| ||||
95+
|| || | | | | |
96+
| || | || | | |
97+
| | | | || | | |
98+
| | | | | || | |
99+
||||| ||||
100+
|||||| | ||
101+
27102
## Markdown extension features
28103

29104
[TOC]
@@ -36,22 +111,104 @@ It's implemented sub-TOC in showdown-toc.js.
36111

37112
[TOC]
38113

39-
#### sub-TOC example
114+
#### sub-TOC examples
40115

41116
[TOC]
42117

43118
##### sub-TOC examples1
44119

120+
###### sub examples1
121+
45122
##### sub-TOC examples2
46123

124+
###### sub examples2
125+
47126
### Footnotes
48127

49128
It's implemented in showdown-footnotes.js, use for reference the [showdown-footnotes](https://github.com/Kriegslustig/showdown-footnotes).
50129

51-
For example:
130+
#### Markdown Syntax
131+
132+
[^1]: The explanation.
133+
134+
#### Footnotes examples
52135

53136
[^1]: The explanation.
54137

138+
### Container
139+
140+
It's implemented in showdown-container.js, allows you to create block level containers.
141+
By default, The CSS effect with class name tip|info|warning|error|success|alert-tip|alert-info|alert-warning|alert-error|alert-success is implemented. And you can also customize the class name.
142+
143+
#### Markdown Syntax
144+
145+
::: <classname | parentclass-childclass> <title content>
146+
*Some text*
147+
:::
148+
149+
Which will be rendered as:
150+
151+
<div class="showdown-container [container classname | parentclass parentclass-childclass]">
152+
<p class="container-title">title content</p>
153+
<p>
154+
<em>Some text</em>
155+
</p>
156+
</div>
157+
158+
#### Container examples
159+
160+
::: tip
161+
*A simple tip text!*
162+
:::
163+
164+
::: tip Tip!
165+
*A simple tip text!*
166+
:::
167+
168+
::: info Info!
169+
*A simple info text!*
170+
:::
171+
172+
::: warning Warning!
173+
*A simple warning text!*
174+
:::
175+
176+
::: error Error!
177+
*A simple error text!*
178+
:::
179+
180+
::: success Success!
181+
*A simple success text!*
182+
:::
183+
184+
::: alert-tip
185+
*A simple tip alert text!*
186+
:::
187+
188+
::: alert-tip Alert Tip!
189+
*A simple tip alert text!*
190+
:::
191+
192+
::: alert-info Alert Info!
193+
*A simple info alert text!*
194+
:::
195+
196+
::: alert-warning Alert Warning!
197+
*A simple warning alert text!*
198+
:::
199+
200+
::: alert-error Alert Error!
201+
*A simple error alert text!*
202+
:::
203+
204+
::: alert-success Alert Success!
205+
*A simple success alert text!*
206+
:::
207+
208+
::: alert-success-tip Alert Success Tip!
209+
<style>.alert-success-tip:after {content: '\00a0';width: 0;height: 0;display: block;border-style: solid;border-width: 15px;border-color: #f3961c transparent transparent transparent;position: absolute;z-index: -1;bottom: -30px;left: 50px;}</style>
210+
*A simple success alert text!*
211+
:::
55212

56213
### LaTeX math and AsciiMath
57214

@@ -61,30 +218,81 @@ It's supported by [showdown-katex](https://github.com/obedm503/showdown-katex.gi
61218

62219
- AsciiMath syntax:
63220

64-
```asciimath {"align": "left | center | right", "codeblock": true | false}
65-
<code content>
66-
```
221+
* Block multiple math
222+
223+
Multiple math are separated by an empty line.
224+
225+
```asciimath {"align": "left | center | right", "codeblock": true | false}
226+
<code content>
227+
228+
<code content>
229+
```
230+
231+
* Inline math
232+
233+
* `\\(...\\)` is delimiters of inline latex math
234+
* `\\[...\\]` is delimiters of inline block latex math
235+
* `$$...$$` is delimiters of inline block latex math
67236

68237
- LaTex syntax:
69238

70-
```latex {"align": "left | center | right", "codeblock": true | false}
71-
<code content>
72-
```
239+
* Block multiple math
240+
241+
Multiple math are separated by an empty line.
242+
243+
```latex {"align": "left | center | right", "codeblock": true | false}
244+
<code content>
245+
246+
<code content>
247+
```
73248

74-
#### Math examples
249+
* Inline math
250+
251+
* `@@...@@` is delimiters of inline ascii math
252+
* `\\~...\\~` is delimiters of inline block ascii math
253+
254+
#### LaTex examples
75255

76256
```latex
77257
x=\frac{ -b\pm\sqrt{ b^2-4ac } } {2a}
78-
```
79258
80-
```asciimath {"align":"center"}
81-
x = (-b +- sqrt(b^2-4ac)) / (2a)
259+
x=\frac{ -b\pm\sqrt{ b^2-4ac } } {2a}
260+
261+
262+
263+
x=\frac{ -b\pm\sqrt{ b^2-4ac } } {2a}
82264
```
83265

84266
```latex {"align":"right"}
85267
x=\frac{ -b\pm\sqrt{ b^2-4ac } } {2a}
86268
```
87269

270+
where:
271+
272+
* \\(\sqrt{ b^2-4ac }\\) is inline latex math
273+
* \\[\sqrt{ b^2-4ac }\\] is inline latex block math
274+
* $$\sqrt{ b^2-4ac }$$ is inline latex block math
275+
276+
#### AsciiMath examples
277+
278+
Internal heat energy:
279+
280+
```asciimath {"align":"center"}
281+
delta Q = rho \ c \u
282+
283+
delta Q = rho \ c \u
284+
285+
delta Q = rho \ c \u
286+
287+
288+
289+
delta Q = rho \ c \u
290+
```
291+
292+
where:
293+
294+
- @@delta Q@@ is the internal heat energy per unit volume \\~(J * m^-3)\\~
295+
88296
### Mermaid
89297

90298
It's implemented in showdown-mermaid.js, render diagrams of Flowchart or Sequence or Gantt using [mermaid](https://github.com/knsv/mermaid), check [mermaid doc](https://mermaidjs.github.io) for more information.
@@ -249,38 +457,6 @@ cond(yes)->io->e
249457
cond(no)->sub1(right)->op1
250458
```
251459

252-
### Network Sequence
253-
254-
It's implemented in showdown-sequence.js, render diagrams of sequence using [js-sequence-diagrams](https://github.com/bramp/js-sequence-diagrams).
255-
256-
#### Markdown Syntax
257-
258-
The \<theme name> of json's "theme" field value is "hand" or "simple" in syntax language attribute;
259-
260-
```sequence {"theme": "<theme name>", "align": "<align>"}
261-
<code content>
262-
```
263-
264-
#### Network Sequence example
265-
266-
- Sequence example with hand theme:
267-
268-
```sequence {"theme":"hand", "align":"center"}
269-
Alice->Bob: Hello Bob, how are you?
270-
Note right of Bob: Bob thinks
271-
Bob-->Alice: I am good thanks!
272-
```
273-
274-
<br>
275-
276-
- Sequence example with simple theme:
277-
278-
```sequence {"theme":"simple", "align":"right"}
279-
Alice->Bob: Hello Bob, how are you?
280-
Note right of Bob: Bob thinks
281-
Bob-->Alice: I am good thanks!
282-
```
283-
284460
### Graphviz's dot
285461

286462
It's implemented in showdown-viz.js, render diagrams of graphviz's dot using [viz.js](https://github.com/mdaines/viz.js).
@@ -547,3 +723,35 @@ OR
547723
}
548724
}
549725
```
726+
727+
### Network Sequence
728+
729+
It's implemented in showdown-sequence.js, render diagrams of sequence using [js-sequence-diagrams](https://github.com/bramp/js-sequence-diagrams).
730+
731+
#### Markdown Syntax
732+
733+
The \<theme name> of json's "theme" field value is "hand" or "simple" in syntax language attribute;
734+
735+
```sequence {"theme": "<theme name>", "align": "<align>"}
736+
<code content>
737+
```
738+
739+
#### Network Sequence example
740+
741+
- Sequence example with hand theme:
742+
743+
```sequence {"theme":"hand", "align":"center"}
744+
Alice->Bob: Hello Bob, how are you?
745+
Note right of Bob: Bob thinks
746+
Bob-->Alice: I am good thanks!
747+
```
748+
749+
<br>
750+
751+
- Sequence example with simple theme:
752+
753+
```sequence {"theme":"simple", "align":"right"}
754+
Alice->Bob: Hello Bob, how are you?
755+
Note right of Bob: Bob thinks
756+
Bob-->Alice: I am good thanks!
757+
```

0 commit comments

Comments
 (0)