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> | |
❌ | underline text | <u>text</u> | text |
3. Code
Markdown | Description | HTML | Preview |
---|---|---|---|
`inline code` |
inline code | <code>inline code</code> | inline code |
```c |
block-code | <pre><code class="language-c" >int main(void){} </code></pre> |
|
❌ | 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 |
 |
an image | <img src="URL" alt="alt" title="alt" class="mw-100" > | ![]() |
5. Lists
Markdown | Description | HTML | Preview |
---|---|---|---|
- item |
unordered list | <ul><li>item</li><li>item</li></ul> |
|
1. item |
ordered list | <ol><li>item</li><li>item</li></ol> |
|
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.