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://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

What is Markdown?

Markdown is a lightweight markup language that allows you to style text on the web. It provides an easy way to control the appearance of your document, enabling you to format text as bold or italic, add images, create lists, and more. Essentially, Markdown is plain text enhanced with simple symbols like # or * to achieve various formatting effects.

Overview of Markdown Syntax

Markdown is a simple and versatile way to format text. You can use it on GitHub or in your own text files to create headers, lists, links, and more. Below is a quick guide to some of the most commonly used Markdown syntax:

Headers:

Use # to ###### for headers, from largest to smallest.

# 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

Use italic or italic for italic, and bold or bold for bold.

_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: Start with -, \*, or + for bullet points.
- Ordered: Start with 1., 2., 3. for numbered lists.

• Unordered: Start with -, *, or + for bullet points.
• Ordered: Start with 1., 2., 3. for numbered lists.

Unordered

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

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

Ordered

1. Item 1
2. Item 2
3. Item 3
   1. Item 3a
   2. Item 3b

1. Item 1
2. Item 2
3. Item 3
   1. Item 3a
   2. Item 3b

Images

![Alt text](Image URL)

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

<Image
  src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
  width={80}
  height={80}
  alt="GitHub Logo"
/>

Links

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.
> **Note**: Client side routing is based on [React Aria Routing](https://react-spectrum.adobe.com/react-aria/routing.html).

As Kanye West said:

We're living the future so the present is our past. Note: Client side routing is based on React Aria Routing.

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!

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 footnote¹. 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 |

Strikethrough

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

Thematic break in an HTML page <hr />

---

Community

We're excited to see the community adopt Hyperse-io, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!