Markdown Cheatsheet

Syntax

# H1
## H2
### H3
#### H4
##### H5
###### H6

**bold**
_italic_
~~strikethrough~~
> blockquote
>> nested blockquote

1. ordered list
2. ordered list
3. ordered list

- unordered List
- unordered List
- unordered List

[title](https://www.example.com)

![alt text](image.jpg)

| Table Header | Table Header |
| ------------ | ------------ |
| Text         | Text         |
| Text         | Text         |

`code`

```lang
code block
```

Horizontal Rules

---
***

How to escape (non-code)

Use backslash (\) to escape special characters: \, `, *, _, {, }, [, ], <, >, (, ), #, +, -, ., !, |.

How to escape backticks in code

To escape the code block, use either ~~~ or ```` (4 backticks).

For example, to properly show the "code block" above, here's what I have in my source code:

~~~
```lang
code block
```
~~~

... and to properly show the excaped code block above, I need to wrap it around 4 backticks ```` (which cannot be shown on this page and you have to imagine).

... and to properly show backticks in inline code, I need to wrap it around 2 backticks, e.g. this will show one backtick like `:

`` ` ``

GitHub flavored markdown (GFM)

Autolink literals, footnotes, strikethrough, tables, and task lists.

By Language

JavaScript

Use unifed and remark / rehype plugins:

• remark: an ecosystem around markdown.
  • to transform markdown into HTML.
  • https://github.com/remarkjs/remark
• rehype: an ecosystem around HTML.
  • to inspect and change the HTML, e.g. sanitize, minify.
  • https://github.com/rehypejs/rehype

Example:

const markdown = await unified()
  .use(remarkParse)
  .use(remarkMath)
  .use(remarkRehype)
  .use(remarkGfm)
  .use(rehypeKatex)
  .use(rehypeFormat)
  .use(rehypeStringify)
  .use(rehypePrism)
  .process(raw || ''); // raw is the raw markdown text.

// content is the generated HTML.
const content = markdown.toString();

// ...

// render the HTML.
<div dangerouslySetInnerHTML={{ __html: content }} />;

MDX

MDX is built on top of remark and rehype.