Photo from unsplash: markdown_gz1jrn

Markdown Guide

Written on January 20, 2022 by Writtan.

4 min read

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.

Headers

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

This is a h1 tag

This is a h2 tag

This is a h4 tag

Emphasis

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

This text will be italic

This text will be bold

You can combine them

Lists

Unordered

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

Ordered

1. Item 1 1. Item 2 1. Item 3 1. Item 3a 1. Item 3b
md
  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)
md

GitHub Logo

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

http://github.com - automatic! GitHub

Blockquotes

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

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.
md

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

Footnotes

Here is a simple footnote[^1]. With some additional text after it. [^1]: My reference.
md

Here is a simple footnote1. With some additional text after it.

Task Lists

- [x] list syntax required (any unordered or ordered list supported) - [x] this is a complete item - [ ] this is an incomplete item
md
  • 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 |
md
First HeaderSecond Header
Content from cell 1Content from cell 2
Content in the first columnContent in the second column

Strikethrough

Any word wrapped with two tildes (like ~~this~~) will appear crossed out.

Footnotes

  1. My reference.

Tweet this article

Enjoying this post?

Don't miss out 😉. Get an email whenever we post, no spam.

We write 1-2 high quality posts about business and front-end development each month!

Join - other subscribers