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

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

title

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

title

Notes

  • 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** 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
```c
int main(void){}
```
block-code <pre><code class="language-c"
>int main(void){}
</code></pre>
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="https://github.com/lgs-games/memorize" 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 -->
<th>Markdown</th><th>Description</th><th>HTML</th><th>Preview</th>
</tr></thead><tbody>
<!-- first row -->
<tr><td>...</td><td>...</td><td>...</td><td>...</td></tr>
<!-- ... -->
</tbody></table>

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>
text
- [ ] 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.
</div>
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.

<details><summary>Title</summary>

Some content, Markdown is allowed.
</details>

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>

...
</div><div>

...
</div></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.