Guides

Markdown and MDX

Markdown and MDX
Markdown and MDX

Markdown is a simple markup language that uses a really simple syntax to format plain text documents, making them easy to read and write. I take all of my notes in markdown and when I am creating text heavy sites I like to integrate it into them since it is easy to format, style, and display on the web as well. These guides are writtin in MDX and Markdown.

MDX is just Markdown but it allows you to use Javascipt components inside of it. The index.mdx page on this site is a good example that uses styled JSX components to display the cards on the home page despite being a Markdown file. It is really nice.

Basic Syntax

Heading

1# H1
2
3## H2
4
5### H3
6
7#### H4
8
9##### H5
10
11###### H6

Bold

1**bold text**

Italic

1_italicized text_

Blockquote

1> blockquote

Ordered List

11. First Item
22. Second Item
33. Third Item

Unordered List

1- First Item
2- Second Item
3- Third Item

Code

1`code`

Horizontal Rule

1---

Link

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

Image

1![alt text](image.jpg)

Extended Syntax

It is important to note that not all Markdown applications support the following syntax.

Table

1| Syntax    | Description |
2| --------- | ----------- |
3| Header    | Title       |
4| Paragraph | Text        |

Fenced Code Block

1{ "firstName": "John", "lastName": "Smith", "age": 25 }

Footnote

1Here's a sentence with a footnote. [^1]
2
3[^1]: This is the footnote.

Heading ID

1### My Great Heading {#custom-id}

Definition List

1term : definition

Strikethrough

1~~The world is flat.~~

Task List

1- [x] Write the press release
2- [ ] Update the website
3- [ ] Contact the media

Emoji

1This is so funny! :joy:

Highlight

1I need to highlight these ==very important words==.

Subscript

1H~2~O

Superscript

1X^2^
Back To Top