Markdown Guide

Markdown Guide

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

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_

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 1
1. Item 2
1. 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)

GitHub Logo

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.js
function 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' })
  }
}

Footnotes

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

[^1]: My reference.

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

Share:

Related Posts

Release of Tailwind Nextjs Starter Blog v2.0

Release of Tailwind Nextjs Starter Blog v2.0

Release of Tailwind Nextjs Starter Blog template v2.0, refactored with Nextjs App directory and React Server Components setup.Discover the new featur...

read more
New features in v1

New features in v1

An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more

read more
Introducing Tailwind Nextjs Starter Blog

Introducing Tailwind Nextjs Starter Blog

Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs S...

read more
Deriving the OLS Estimator

Deriving the OLS Estimator

How to derive the OLS Estimator with matrix notation and a tour of math typesetting using markdown with the help of KaTeX.

read more
Images in Next.js

Images in Next.js

In this article we introduce adding images in the tailwind starter blog and the benefits and limitations of the next/image component.

read more
O Canada

O Canada

The scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhib...

read more
Sample .md file

Sample .md file

Example of a markdown file with code blocks and syntax highlighting

read more