# Markdown Syntax Reference
[TOC]
## Basic CommonMark Spec Support
For basic markdown usage, please take a look at https://www.markdownguide.org/basic-syntax.
CodiMD uses [markdown-it](https://github.com/markdown-it/markdown-it) as markdown render engine under the hood. `markdown-it` is an extensible markdown engine that we can easily write plugins for it, adding a bunch of powerful syntaxes to boot your productivity :rocket:
:::info
:bulb: Starting from CodiMD 1.4.1, CodiMD supports CommonMark 0.29 with the help of `markdown-it@9.0.0`. You can learn more about the CommonMark Specification at this link: https://spec.commonmark.org/0.29/
:::
## Additional Syntaxes
Except CommonMark Specification, CodiMD also has many powerful plugins to speed up your Markdown experience. here is all plugins that CodiMD supports and its syntax and example below.
### markdown-it-abbr
Abbreviation (\<abbr\>) tag plugin for markdown-it markdown parser.
**Syntax**
```
*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium
The HTML specification
is maintained by the W3C.
```
**Result**
### markdown-it-container
Plugin for creating block-level custom containers for markdown-it markdown parser.
**Syntax**
```markdown
:::success
success message container
:::
:::info
information message container
:::
:::warning
warning message container
:::
:::danger
danger message container
:::
:::spoiler
spoiler message container
:::
```
**Result**
:::success
success message container
:::
:::info
information message container
:::
:::warning
warning message container
:::
:::danger
danger message container
:::
:::spoiler
spoiler message container
:::
### markdown-it-deflist
Definition list (\<dl\>) tag plugin for markdown-it markdown parser.
This plugin use pandoc like syntax for term definition
**syntax**
```
Term 1
: Definition 1
New line of definition
: Definition 2
: Definition 3
Term 2 with *`inline markup`*
: Definition 2
{ some code, part of Definition 2 }
Third paragraph of definition 2.
```
**result**
: Definition 1
New line of definition
: Definition 2
: Definition 3
Term 2 with *`inline markup`*
: Definition 2
{ some code, part of Definition 2 }
Third paragraph of definition 2.
### markdown-it-footnote
This plugin support pandoc footnote syntax in markdown-it.
**syntax**
```
Here is a footnote reference,[^1] and another.[^longnote]
[^1]: Here is the footnote.
[^longnote]: Here's one with multiple blocks.
Subsequent paragraphs are indented to show that they
belong to the previous footnote.
```
**result**
### markdown-it-imsize
You can specifiy the size of image by the following syntax.
**syntax**
```
![alt](<href> "title" =WxH)
## example
![](https://i.imgur.com/4kxe3me.jpg "beautiful image" =640x427)
![](https://i.imgur.com/4kxe3me.jpg "beautiful image" =640x)
```
![](https://i.imgur.com/4kxe3me.jpg "beautiful image" =640x)
:::info
:bulb: Alternatively, you can always use html tag to make your life easier.
```html
<img src="https://i.imgur.com/4kxe3me.jpg" alt="beautiful image" width="640">
```
:::
### markdown-it-ins
\<ins\> tag plugin for markdown-it markdown parser.
**syntax**
```
++inserted text++
```
**result**
++inserted text++
### markdown-it-mark
\<mark\> tag plugin for markdown-it markdown parser.
**syntax**
```
==mark text==
```
**result**
==mark text==
### markdown-it-mathjax
Markdown-it plugin to bypass LaTeX math for MathJax processing.
CodiMD only supports MathJax TeX and LaTeX. Please check the document for more syntaxes. http://docs.mathjax.org/en/v2.7-latest/tex.html
**syntax**
1. inline MathJax
```
$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
```
2. block MathJax
```
$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}
$$
```
**result**
1. inline MathJax $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$.
2. block MathJax
$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}
$$
### markdown-it-sub
\<sub\> tag plugin for markdown-it, its based on pandoc syntax.
**sytaxn**
```
H~2~O
```
H~2~O
### markdown-it-sup
Superscript (\<sup\>) tag plugin for markdown-it markdown parser.
**syntax**
```
29^th^
```
**result**
29^th^
### markdown-it-ruby
Ruby annotations (\<ruby\>) tag plugin for markdown-it markdown parser.
**syntax**
```
{ruby base|ruby text}
```
**result**
{ruby base|ruby text}
### Todo Checkbox
**syntax**
```
- [ ] work item 1
- [x] sub item 1
- [ ] sub item 2
- [ ] work item 2
```
**result**
- [ ] work item 1
- [x] sub item 1
- [ ] sub item 2
- [ ] work item 2
:::info
:bulb: You can click checkbox on the rendered page in `both`, `view` mode to "check" the todo item.
:::
### Additional Code Block syntax
#### 1. specify code block language to highlight code
**syntax**
<pre>
```javascript
const list = [10, 20];
console.log(list.map(x => (x * x)))
```
</pre>
**result**
```javascript
const list = [10, 20];
console.log(list.map(x => (x * x)))
```
:::info
**:books: Supported Languages:**
If you need a language that is not in the below list, please [open an issue](http://github.com/hackmdio/codimd/issues/new) on GitHub.
`1c`, `abnf`, `accesslog`, `actionscript`, `ada`, `angelscript`, `apache`, `applescript`, `arcade`, `arduino`, `armasm`, `asciidoc`, `aspectj`, `autohotkey`, `autoit`, `avrasm`, `awk`, `axapta`, `bash`, `basic`, `bnf`, `brainfuck`, `cal`, `capnproto`, `ceylon`, `clean`, `clike`, `clojure-repl`, `clojure`, `clojure`, `cmake`, `cmake`, `coffeescript`, `coffeescript`, `coq`, `cos`, `cpp`, `crmsh`, `crystal`, `cs`, `csp`, `css`, `css`, `d`, `dart`, `delphi`, `diff`, `django`, `dns`, `dockerfile`, `dockerfile`, `dos`, `dsconfig`, `dts`, `dust`, `ebnf`, `elixir`, `elm`, `erb`, `erlang-repl`, `erlang`, `excel`, `fix`, `flix`, `fortran`, `fsharp`, `gams`, `gauss`, `gcode`, `gherkin`, `gherkin`, `glsl`, `gml`, `go`, `go`, `golo`, `gradle`, `groovy`, `haml`, `handlebars`, `haskell`, `haskell`, `haxe`, `hsp`, `htmlbars`, `htmlembedded`, `htmlmixed`, `http`, `hy`, `inform7`, `ini`, `irpf90`, `isbl`, `java`, `javascript`, `javascript`, `jboss-cli`, `json`, `jsx`, `julia-repl`, `julia`, `kotlin`, `lasso`, `ldif`, `leaf`, `less`, `lisp`, `livecodeserver`, `livescript`, `llvm`, `lsl`, `lua`, `lua`, `makefile`, `markdown`, `mathematica`, `matlab`, `maxima`, `mediawiki`, `mel`, `mercury`, `mipsasm`, `mizar`, `mojolicious`, `monkey`, `moonscript`, `n1ql`, `nginx`, `nginx`, `nimrod`, `nix`, `nsis`, `objectivec`, `ocaml`, `openscad`, `oxygene`, `parser3`, `perl`, `perl`, `pf`, `pgsql`, `php`, `php`, `plaintext`, `pony`, `powershell`, `processing`, `profile`, `prolog`, `properties`, `protobuf`, `pug`, `puppet`, `purebasic`, `python`, `python`, `q`, `qml`, `r`, `r`, `reasonml`, `rib`, `roboconf`, `routeros`, `rsl`, `ruby`, `ruby`, `ruleslanguage`, `rust`, `sas`, `sass`, `scala`, `scheme`, `scilab`, `scss`, `shell`, `shell`, `smali`, `smalltalk`, `sml`, `sqf`, `sql`, `sql`, `stan`, `stata`, `step21`, `stylus`, `subunit`, `swift`, `taggerscript`, `tap`, `tcl`, `tex`, `thrift`, `tiddlywiki`, `tp`, `twig`, `typescript`, `typescript`, `vala`, `vbnet`, `vbscript-html`, `vbscript`, `verilog`, `vhdl`, `vim`, `x86asm`, `xl`, `xml`, `xml`, `xquery`, `yaml`, `yaml`, `zephir`
:::
#### 2. line number
**syntax**
<pre>
```=
const list = [10, 20];
console.log(list.map(x => (x * x)))
```
</pre>
Can use with language highlight
<pre>
```javascript=
const list = [10, 20];
console.log(list.map(x => (x * x)))
```
</pre>
You can specify start line number of the code block
<pre>
```javascript=10
const list = [10, 20];
console.log(list.map(x => (x * x)))
```
</pre>
**result**
1. Only show line number
```=
const list = [10, 20];
console.log(list.map(x => (x * x)))
```
2. Use with code highlighting
```javascript=
const list = [10, 20];
console.log(list.map(x => (x * x)))
```
3. Start at line 10 and code highlighting
```javascript=10
const list = [10, 20];
console.log(list.map(x => (x * x)))
```
#### 3. soft wrap
**syntax**
<pre>
```!
const veryLongLine = list.map(doSomething1).map(doSomething2).map(doSomething3).join(", ").toLocaleLowerCase('en-US')
```
</pre>
Soft wrap can be used with code highlighting:
<pre>
```javascript!
const veryLongLine = list.map(doSomething1).map(doSomething2).map(doSomething3).join(", ").toLocaleLowerCase('en-US')
```
</pre>
**result**
```!
const veryLongLine = list.map(doSomething1).map(doSomething2).map(doSomething3).join(", ").toLocaleLowerCase('en-US')
```
```javascript!
const veryLongLine = list.map(doSomething1).map(doSomething2).map(doSomething3).join(", ").toLocaleLowerCase('en-US')
```
Compare to below when soft wrap disabled:
```javascript
const veryLongLine = list.map(doSomething1).map(doSomething2).map(doSomething3).join(", ").toLocaleLowerCase('en-US')
```
Sign in with Wallet
Connect another wallet