David Wells

Builder of things

Serverless Architectures
User Experience & Product

Serverless, User Experience & Product

test: TOC

January 01, 2020

Markdown

MDX

With Nextra, all your .mdx files under the pages directory will be rendered with MDX, it's an advanced Markdown format with React component support.

For example, you can use import and use React components inside your Markdown files like this:

## Hello MDX

import { useState } from 'react'

export function Counter({ children }) {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      {children}
      {count}
    </button>
  )
}

<Counter>**Clicks**: </Counter>

GitHub Flavored Markdown

GFM is an extension of Markdown, created by GitHub, that adds support for strikethrough, task lists, tables, and more.

Strikethrough

~~removed~~

~~removed~~

Task List

Write the press release
Update the website
Contact the media

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

Table

Syntax	Description	Test Text
Header	Title	Here's this
Paragraph	Text	And more
Strikethrough		~~Text~~

| Syntax        | Description |   Test Text |
| :------------ | :---------: | ----------: |
| Header        |    Title    | Here's this |
| Paragraph     |    Text     |    And more |
| Strikethrough |             |    ~~Text~~ |

Autolinks

Visit https://nextjs.org.

Visit https://nextjs.org.

Custom Heading Id

You can specify custom heading id using the format ## My heading [#custom-id]. For example:

## Long heading about Nextra [#about-nextra]

Sub sub children

This should have kids

Kid 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Kid 2

Kid 3

Kid 4

In this example, #about-nextra will be used as the heading link, replacing the default #long-heading-about-nextra.

Extended Syntax Highlighting

xyz