# Extra Supported Syntax CodiMD supports many extended syntaxes. [TOC] ## 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: {%youtube 1G4isv_Fylg %} ### Vimeo Syntax example: ``` {%vimeo 124148255 %} ``` Rendered result: {%vimeo 124148255 %} ### GitHub Gist Syntax example: ``` {%gist schacon/4277 %} ``` Rendered result: {%gist schacon/4277 %} ### SlideShare Syntax example: ``` {%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %} ``` Rendered result: {%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %} ### Speakerdeck Syntax example: ``` {%speakerdeck sugarenia/xxlcss-how-to-scale-css-and-keep-your-sanity %} ``` Rendered result: {%speakerdeck sugarenia/xxlcss-how-to-scale-css-and-keep-your-sanity %} ### PDF syntax example: ``` {%pdf https://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.pdf %} ``` Rendered result: {%pdf https://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.pdf %} ## 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! :mage: ### Sequence Diagram CodiMD uses [js-sequence-diagrams](https://bramp.github.io/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: <pre> ```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? ``` </pre> Rendered result: ```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? ``` ### Flow Chart CodiMD uses [flowchart.js](https://flowchart.js.org/) to render flow chart. Check out this website to learn more about the syntax: https://flowchart.js.org/ Syntax example: <pre> ```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 ``` </pre> Rendered result: ```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 ``` ### Graphviz CodiMD uses [viz.js](http://viz-js.com/) 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** <pre> ```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 } ``` </pre> **Render Result** ```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 } ``` ### 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** <pre> ```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 ``` </pre> **Render Result** ```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 ``` ### abc.js CodiMD use [abc.js](https://www.abcjs.net/) 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** <pre> ```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:| ``` </pre> **Render Result** ```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:| ``` ### Vega-Lite [Vega-Lite](https://vega.github.io/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/). <pre> ```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"} } } ``` </pre> ```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](https://github.com/markushedvall/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** <pre> ```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 ``` </pre> **result** ![](https://i.imgur.com/Se1kYxk.png) :::info This syntax supported in CodiMD, the render result above is only for demonstration. ::: ### Geo Map CodiMD use [Nominatim OpenStreetMap](https://nominatim.openstreetmap.org/) to show geographic map. You can use viewpoint or Latitude and longitude. **Syntax 1: viewpoint** You can use [this site](https://nominatim.openstreetmap.org/) to test the viewpoint/address is correctly. <pre> ```geo The British Museum ``` </pre> **Render Result 1** ![](https://i.imgur.com/WpKqXoa.png) **Syntax 2: Longitude, Latitude, Scale Factor** <pre> ```geo -73.963246,40.779438,17 ``` </pre> **Render Result 2** ![](https://i.imgur.com/JTwme3B.png) :::info This syntax supported in CodiMD, the render result above is only for demonstration. ::: ### Mindmap CodiMD uses [markmap-lib](https://markmap.js.org/) to render mindmap. **syntax** ~~~md ```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** ![](https://i.imgur.com/nC97dTO.png) :::info This syntax supported in CodiMD, the render result above is only for demonstration. ::: ### Guitar Tab [Read the complete guide here.](/@codimd/fretboard-syntax) **Syntax** ~~~md ```fretboard {title="horizontal, 5 frets", type"h6 noNut"} -oO-*- --o-o- -o-oo- -o-oO- -oo-o- -*O-o- ``` ~~~ **Render Result** ![](https://i.imgur.com/uCENRVh.png) :::info This syntax supported in CodiMD, the render result above is only for demonstration. :::
Last changed by  
 
CodiMD
28263
Published on HackMD