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

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^