Blog Posts

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.

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

# H1

## H2

### H3

#### H4 (I did not style this)

##### H5 (I did not style this)

###### H6 (I did not style this)

Bold

**bold text**

Italic

_italicized text_

Blockquote

> blockquote

Ordered List

1. First Item
2. Second Item
3. Third Item

Unordered List

- First Item
- Second Item
- Third Item

Code

`code`

Horizontal Rule

---

Link

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

Image

![alt text](image.jpg)

Extended Syntax

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

Table

| Syntax    | Description |
| --------- | ----------- |
| Header    | Title       |
| Paragraph | Text        |

Fenced Code Block

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

Footnote

Here's a sentence with a footnote. [^1]

[^1]: This is the footnote.

Heading ID

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

Definition List

term : definition

Strikethrough

~~The world is flat.~~

Task List

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

Emoji

This is so funny! :joy:

Highlight

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

Subscript

H~2~O

Superscript

X^2^