HackMDExtra Supported Syntax
CodiMD supports many extended syntaxes.
External Resources Embeded
CodiMD uses resource embeded syntax to embed resources.
resource embeded syntax is the format of {%resource id %}.
Currently CodiMD supports six types of resources: youtube, vimeo, gist, slideshare, speakerdeck, pdf.
Youtube
Syntax example:
{%youtube 1G4isv_Fylg %}
Rendered result:
Learn More →
Vimeo
Syntax example:
{%vimeo 124148255 %}
Rendered result:
GitHub Gist
Syntax example:
{%gist schacon/4277 %}
Rendered result:
require 'net/http'
require 'uri'
# /api/v1/:format/new
# /api/v1/:format/gists/:user
# /api/v1/:format/:gist_id
res = Net::HTTP.post_form(URI.parse('http://gist.github.com/api/v1/xml/new'),
{ 'files[file1.ab]' => 'CONTNETS',
'files[file2.ab]' => 'contents' })
puts res.body
<?xml version="1.0" encoding="UTF-8"?>
<gists type="array">
<gist>
<public type="boolean">true</public>
<description nil="true"></description>
<repo>4278</repo>
<created-at type="datetime">2008-08-06T13:30:32-07:00</created-at>
</gist>
</gists>
SlideShare
Syntax example:
{%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %}
Rendered result:
Speakerdeck
Syntax example:
{%speakerdeck sugarenia/xxlcss-how-to-scale-css-and-keep-your-sanity %}
Rendered result:
syntax example:
{%pdf https://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.pdf %}
Rendered result:
Special diagram syntax
CodiMD can draw many different diagrams. By putting the diagram syntax within a code block, and specifying the render engine as code block language, CodiMD will turn these syntaxes into fascinating diagrams!
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Sequence Diagram
CodiMD uses js-sequence-diagrams to render sequence diagram. Check out its website to learn more about the syntax: https://bramp.github.io/js-sequence-diagrams/
Syntax example:
```sequence Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->Alice: I am good thanks! Note left of Alice: Alice responds Alice->Bob: Where have you been? ```
Rendered result:
Flow Chart
CodiMD uses flowchart.js to render flow chart.
Check out this website to learn more about the syntax: https://flowchart.js.org/
Syntax example:
```flow st=>start: Start e=>end: End op=>operation: My Operation op2=>operation: lalala cond=>condition: Yes or No? st->op->op2->cond cond(yes)->e cond(no)->op2 ```
Rendered result:
Graphviz
CodiMD uses viz.js to render Grapviz syntax. It uses emscripten to porting graphviz to javascript. Please let us known if you have any issue in using graphviz in CodiMD.
please check graphviz website (http://www.graphviz.org/documentation/) for more example and syntax.
Syntax Example
```graphviz
digraph hierarchy {
nodesep=1.0 // increases the separation between nodes
node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
edge [color=Blue, style=dashed] //All the lines look like this
Headteacher->{Deputy1 Deputy2 BusinessManager}
Deputy1->{Teacher1 Teacher2}
BusinessManager->ITManager
{rank=same;ITManager Teacher1 Teacher2} // Put them on the same level
}
```
Render Result
Mermaid
Mermaid is a powerful diagram library, its supports many diagram like FlowChart, Sequence Diagram, Class Diagram, State Diagram, Grantt, Pie Chart.
Please check website for more syntax and example (http://mermaid-js.github.io/mermaid/#/).
Syntax Example
```mermaid
gantt
title A Gantt Diagram
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
anther task : 24d
```
Render Result
abc.js
CodiMD use abc.js to support abc notation, abc notation is a text-based music notation.
you can check the abcnotation for more syntax and notation explain. (http://abcnotation.com/)
Syntax Example
```abc
X: 1
T: Cooley's
M: 4/4
L: 1/8
K: Emin
|:D2|"Em"EB{c}BA B2 EB|~B2 AB dBAG|\
"D"FDAD BDAD|FDAD dAFD|
"Em"EBBA B2 EB|B2 AB defg|\
"D"afe^c dBAF|"Em"DEFD E2:|
|:gf|"Em"eB B2 efge|eB B2 gedB|\
"D"A2 FA DAFA|A2 FA defg|
"Em"eB B2 eBgB|eB B2 defg|\
"D"afe^c dBAF|"Em"DEFD E2:|
```
Render Result
Vega-Lite
Vega-Lite is a high-level grammar of interactive graphics. Its support many charts with interactive feature.
You can see more syntax and example in vega-lite documentation (https://vega.github.io/vega-lite/docs/).
```vega
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
]
},
"mark": "bar",
"encoding": {
"x": {"field": "a", "type": "ordinal"},
"y": {"field": "b", "type": "quantitative"}
}
}
```
PlantUML
CodiMD use plantuml-encoder to support PlantUML, please check the website for more syntax and documentation (https://plantuml.com/en/).
If you want to test syntax, you can use PlantUML online demo server (http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000).
syntax
```plantuml start if (condition A) then (yes) :Text 1; elseif (condition B) then (yes) :Text 2; stop elseif (condition C) then (yes) :Text 3; elseif (condition D) then (yes) :Text 4; else (nothing) :Text else; endif stop ```
result
This syntax supported in CodiMD, the render result above is only for demonstration.
Geo Map
CodiMD use Nominatim OpenStreetMap to show geographic map.
You can use viewpoint or Latitude and longitude.
Syntax 1: viewpoint
You can use this site to test the viewpoint/address is correctly.
```geo The British Museum ```
Render Result 1
Syntax 2: Longitude, Latitude, Scale Factor
```geo -73.963246,40.779438,17 ```
Render Result 2
This syntax supported in CodiMD, the render result above is only for demonstration.
Mindmap
CodiMD uses markmap-lib to render mindmap.
syntax
```markmap
# markmap-lib
## Links
- <https://markmap.js.org/>
- [GitHub](https://github.com/gera2ld/markmap-lib)
## Related
- [coc-markmap](https://github.com/gera2ld/coc-markmap)
- [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap)
## Features
- links
- **inline** ~~text~~ *styles*
- multiline
text
```
Render Result
This syntax supported in CodiMD, the render result above is only for demonstration.
Guitar Tab
Syntax
```fretboard {title="horizontal, 5 frets", type"h6 noNut"}
-oO-*-
--o-o-
-o-oo-
-o-oO-
-oo-o-
-*O-o-
```
Render Result
This syntax supported in CodiMD, the render result above is only for demonstration.
