Markdown Syntax Reference

• Markdown Syntax Reference
  • Basic CommonMark Spec Support
  • Additional Syntaxes
    • markdown-it-abbr
    • markdown-it-container
    • markdown-it-deflist
    • markdown-it-footnote
    • markdown-it-imsize
    • markdown-it-ins
    • markdown-it-mark
    • markdown-it-mathjax
    • markdown-it-sub
    • markdown-it-sup
    • markdown-it-ruby
    • Todo Checkbox
    • Additional Code Block syntax

Basic CommonMark Spec Support

For basic markdown usage, please take a look at https://www.markdownguide.org/basic-syntax.

CodiMD uses 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

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

:::success
success message container
:::

:::info
information message container
:::

:::warning
warning message container
:::

:::danger
danger message container
:::

:::spoiler
spoiler message container
:::

Result

success message container

information message container

warning message container

danger message container

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 =640x427)
![](https://i.imgur.com/4kxe3me.jpg =640x)

Alternatively, you can always use html tag to make your life easier.

<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=\frac{-b\pm \sqrt{b^2-4ac}}{2a}$.

2. block MathJax
   

   $$x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}$$

markdown-it-sub

<sub> tag plugin for markdown-it, its based on pandoc syntax.

sytaxn

H~2~O

H₂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 baseruby text

Todo Checkbox

syntax

- [ ] work item 1
    - [x] sub item 1
    - [ ] sub item 2
- [ ] work item 2

result

• work item 1
  • sub item 1
  • sub item 2
• work item 2

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

```javascript
const list = [10, 20];
console.log(list.map(x => (x * x)))
```

result

const list = [10, 20];
console.log(list.map(x => (x * x)))

Supported Languages:
If you need a language that is not in the below list, please open an issue 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

```=
const list = [10, 20];
console.log(list.map(x => (x * x)))
```

Can use with language highlight

```javascript=
const list = [10, 20];
console.log(list.map(x => (x * x)))
```

You can specify start line number of the code block

```javascript=10
const list = [10, 20];
console.log(list.map(x => (x * x)))
```

result

1. Only show line number

const list = [10, 20];
console.log(list.map(x => (x * x)))

2. Use with code highlighting

const list = [10, 20];
console.log(list.map(x => (x * x)))

3. Start at line 10 and code highlighting

const list = [10, 20];
console.log(list.map(x => (x * x)))

3. soft wrap

syntax

```!
const veryLongLine = list.map(doSomething1).map(doSomething2).map(doSomething3).join(", ").toLocaleLowerCase('en-US')
```

Soft wrap can be used with code highlighting:

```javascript!
const veryLongLine = list.map(doSomething1).map(doSomething2).map(doSomething3).join(", ").toLocaleLowerCase('en-US')
```

result

const veryLongLine = list.map(doSomething1).map(doSomething2).map(doSomething3).join(", ").toLocaleLowerCase('en-US')

const veryLongLine = list.map(doSomething1).map(doSomething2).map(doSomething3).join(", ").toLocaleLowerCase('en-US')

Compare to below when soft wrap disabled:

const veryLongLine = list.map(doSomething1).map(doSomething2).map(doSomething3).join(", ").toLocaleLowerCase('en-US')