Published on

Authors

# Introduction

Markdown and Mdx parsing is supported via unified, and other remark and rehype packages. next-mdx-remote allows us to parse .mdx and .md files in a more flexible manner without touching webpack.

Github flavored markdown is used. mdx-prism provides syntax highlighting capabilities for code blocks. Here's a demo of how everything looks.

The following markdown cheatsheet is adapted from: https://guides.github.com/features/mastering-markdown/

# What is Markdown?

Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like # or *.

# Syntax guide

Here’s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files.

# This is a h1 tag
## This is a h2 tag
#### This is a h4 tag

# This is a h1 tag

## Emphasis

_This text will be italic_
**This text will be bold**
_You **can** combine them_

This text will be italic

This text will be bold

You can combine them

## Lists

### Unordered

- Item 1- Item 2  - Item 2a  - Item 2b
• Item 1
• Item 2
• Item 2a
• Item 2b

### Ordered

1. Item 11. Item 21. Item 3   1. Item 3a   1. Item 3b
1. Item 1
2. Item 2
3. Item 3
1. Item 3a
2. Item 3b

## Images

![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)Format: ![Alt Text](url)

http://github.com - automatic![GitHub](http://github.com)

http://github.com - automatic! GitHub

## Blockquotes

As Kanye West said:
> We're living the future so> the present is our past.

As Kanye West said:

We're living the future so the present is our past.

## Inline code

I think you should use an<addr> element here instead.

I think you should use an <addr> element here instead.

## Syntax highlighting

Here’s an example of how you can use syntax highlighting with GitHub Flavored Markdown:

js:fancyAlert.jsfunction fancyAlert(arg) {  if (arg) {    $.facebox({ div: '#foo' }) }} And here's how it looks - nicely colored with styled code titles! fancyAlert.js function fancyAlert(arg) { if (arg) {$.facebox({ div: '#foo' })  }}

- [x] list syntax required (any unordered or ordered list supported)- [x] this is a complete item- [ ] this is an incomplete item
• list syntax required (any unordered or ordered list supported)
• this is a complete item
• this is an incomplete item

## Tables

You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |:

| First Header                | Second Header                || --------------------------- | ---------------------------- || Content from cell 1         | Content from cell 2          || Content in the first column | Content in the second column |
Any word wrapped with two tildes (like ~~this~~) will appear crossed out.