Markdown syntax reference ✍️

This page is a summary of the syntax that we are using in Markdown, and how it is rendered on this website.

Version: 1.6.0 (2021-10-30)

1. Titles

Markdown Description HTML Preview
# title h1 (big header) <h1>title</h1>


## title h2 (normal header) <h2>title</h2>


### title h3 (subsection header) <h3>title</h3>



  • you can use headers h3 to h6, but they will be rendered as if they were h2. You should split a big page, so that such a situation does not happen. An alternative would be to use bold.
  • version 1.2.0: a permalink icon is added to each header (#content-{title}).
  • version 1.2.0: if you add more than one header h1, they will be rendered using the style shown above, but their HTML tag will be h2
  • version 1.4.1: allowing h3

2. Text

Markdown Description HTML Preview
text some text <p>text</p>


**text** text in bold <b>text</b> text
*text* text in italic <i>title</i> title
***text*** text in bold+italic <b><i>title</i></b> title

(not allowed)
strikethrough text <s>text</s> text
underline text <u>text</u> text

3. Code

Markdown Description HTML Preview
`inline code` inline code <code>inline code</code> inline code
int main(void){}
block-code <pre><code class="language-c"
>int main(void){}
int main(void){}
mark text <mark>text</mark> text
keyboard input <kbd>CTRL-C</kbd> CTRL-C

4. Links and images

Markdown Description HTML Preview
[a link](URL) a link <a href="" target="_blank" rel="noopener noreferrer">a link</a> a link
<URL> same as [URL](URL) ... ...
[a link](download:URL/a_file.pdf) download link <a href="URL" download >a link</a> removed since v1.3.0
![alt](URL) an image <img src="URL" alt="alt" title="alt" class="mw-100" > icon

5. Lists

Markdown Description HTML Preview
- item
- item
unordered list <ul><li>item</li><li>item</li></ul>
  • item
  • item
1. item
2. item
ordered list <ol><li>item</li><li>item</li></ol>
  1. item
  2. item

You can nest a list inside another list.

6. Table

Since version 1.3.0, you can use a table. The syntax is the same as in the Markdown course. The HTML code is

<table class="table table-bordered table-striped border-dark"><thead><tr>
<!-- column names -->
<!-- first row -->
<!-- ... -->

And the result is

Markdown Description HTML Preview
... ... ... ...
  • version 1.4: dark tables removed in the light version

7. Special

Markdown Description HTML Preview
quote <q>text</q> text
> text blockquote <blockquote>text</blockquote>
- [ ] task checkbox (checked) <input disabled="" type="checkbox" checked> (since v1.1.0)
- [x] task checkbox (checked) <input disabled="" type="checkbox"> (since v1.1.0)
[comment]: <> (...) a comment <!-- ... -->
a note <small>a note</small> a note
--- horizontal separator <hr>
  • version 1.4.0: <span class="tms">a note</span> was replaced with <small>a note</small>

8. Math

Markdown Description HTML Preview
text $latex$ text inline math <p>Text \\($5 \neq 3 + 1\\) text.</p> Text $5 \neq 3 + 1$ text.
text @latex@ text math block <div>
Text \\[$5 \neq 3 + 1\\] text.
Text \[$5 \neq 3 + 1\] text.

As you could guess

  • adding Text before/after is optional
  • you can replace "p" or "div" with another tag (span, p, div)

But, you should note

  • it's recommended to use $latex$ for inline latex
  • it's recommended to use <div>\[latex\]</div> for a block (as @latex@ is not escaping every formula properly, and hence not always rendering what you wrote)
  • Note: you need to write two slashes if you want to escape a character such as \\{

9. Details

Since version 1.5.0, it's a good practice to use details to hide some content, or to let the user hide something.


Some content, Markdown is allowed.

The result is different according to the classes you gave to details.

(none) details details-e details-border details-s
TitleSome content
TitleSome content
TitleSome content
TitleSome content
TitleSome content

10. Columns

Since version 1.6.0.

<div class="row row-cols-md-2 mx-0"><div>



Some content 🚀
... (ex: an image) ...

Some content 📚
... (ex: describe the image)...

  • You may add the class "align-self-center" to a div to center its content vertically

11. Usage

  • You should split a page into sections using a separator, the code is
<!-- left-tailed -->
<hr class="sl">
<!-- right-tailed -->
<hr class="sr">
<!-- both (since v1.3.0) -->
<hr class="sep-both">
  • you can use HTML

We are allowing HTML, but note that using style is not recommended (as it may be disabled later), while scripts aren't allowed 🙄. Bootstrap 5 classes are allowed, and you may use our CSS rules.

  • add references

References, are not only the links that you used, but those that we may check if we want to improve the course. You should add a lot of them, and sort them if needed.

  • typos

You can use Grammarly or LanguageTool to check if they got hints for you.

  • version 1.3.0: the title and the description are generated

Please, try to make it so that the title of a page is good, as it's the one shown by the search engines. The first paragraph should be long (at least 50 characters) and a description of the page, as it will be used for the description of the page, shown by the search engines.

  • version 1.3.0: using emojis is a good practice

You may learn more here. You should use them to make the content less monotone, and help the reader focusing on what he needs to remember.