diff options
Diffstat (limited to 'site/_posts/2016-07-02-markdown-tuto.md')
| -rw-r--r-- | site/_posts/2016-07-02-markdown-tuto.md | 172 |
1 files changed, 172 insertions, 0 deletions
diff --git a/site/_posts/2016-07-02-markdown-tuto.md b/site/_posts/2016-07-02-markdown-tuto.md new file mode 100644 index 0000000..387c58a --- /dev/null +++ b/site/_posts/2016-07-02-markdown-tuto.md @@ -0,0 +1,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/ |