blob: 387c58ad3030e3218ac79d3d57e03ac10aa21527 (
plain)
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
|
---
title: Test Markdown to UML
author: Fulup Ar Foll (IoT.bzh)
date: 2016-07-02
layout: umlpost
---
Basic reference for Markdown documentation with:
- kramdown extentions
- UML/Flow diagrams
<!--more-->
**References**:
- Kramdown http://kramdown.gettalong.org/quickref.html
- UML diagrams http://bramp.github.io/js-sequence-diagrams/
- Flow charts http://adrai.github.io/flowchart.js/
Markdown Extra
--------------------
StackEdit supports **Markdown Extra**, which extends **Markdown** syntax with some nice features.
> **Tip:** You can disable any **Markdown Extra** feature in the **Extensions** tab of the <i class="icon-cog"></i> **Settings** dialog.
> **Note:** You can find more information about **Markdown** syntax [here][2] and **Markdown Extra** extension [here][3].
### Tables
**Markdown Extra** has a special syntax for tables:
Item | Value
-------- | ---
Computer | $1600
Phone | $12
Pipe | $1
You can specify column alignment with one or two colons:
| Item | Value | Qty |
| :------- | ----: | :---: |
| Computer | $1600 | 5 |
| Phone | $12 | 12 |
| Pipe | $1 | 234 |
### Definition Lists
**Markdown Extra** has a special syntax for definition lists too:
Term 1
Term 2
: Definition A
: Definition B
Term 3
: Definition C
: Definition D
> part of definition D
### Fenced code blocks
GitHub's fenced code blocks are also supported with **Highlight.js** syntax highlighting:
```
// Foo
var bar = 0;
```
> **Tip:** To use **Prettify** instead of **Highlight.js**, just configure the **Markdown Extra** extension in the <i class="icon-cog"></i> **Settings** dialog.
> **Note:** You can find more information:
> - about **Prettify** syntax highlighting [here][5],
> - about **Highlight.js** syntax highlighting [here][6].
### Footnotes
You can create footnotes like this[^footnote].
[^footnote]: Here is the *text* of the **footnote**.
### SmartyPants
SmartyPants converts ASCII punctuation characters into "smart" typographic punctuation HTML entities. For example:
| | ASCII | HTML |
----------------- | ---------------------------- | ------------------
| Single backticks | `'Isn't this fun?'` | 'Isn't this fun?' |
| Quotes | `"Isn't this fun?"` | "Isn't this fun?" |
| Dashes | `-- is en-dash, --- is em-dash` | -- is en-dash, --- is em-dash |
### Table of contents
You can insert a table of contents using the marker `[TOC]`:
1. TOC
{:toc}
### UML diagrams
You can also render sequence diagrams like this:
~~~
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
~~~
~~~ UML
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
~~~
``` UML-hand
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
```
And flow charts like this:
```
st=>start: Start
e=>end
op=>operation: My Operation
cond=>condition: Yes or No?
st->op->cond
cond(yes)->e
cond(no)->op
```
``` FLOW
st=>start: Start
e=>end
op=>operation: My Operation
cond=>condition: Yes or No?
st->op->cond
cond(yes)->e
cond(no)->op
```
> **Note:** You can find more information:
> - about **Sequence diagrams** syntax [here][7],
> - about **Flow charts** syntax [here][8].
[2]: http://daringfireball.net/projects/markdown/syntax "Markdown"
[3]: https://github.com/jmcmanus/pagedown-extra "Pagedown Extra"
[4]: http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference
[5]: https://code.google.com/p/google-code-prettify/
[6]: http://highlightjs.org/
[7]: http://bramp.github.io/js-sequence-diagrams/
[8]: http://adrai.github.io/flowchart.js/
|
