This is the template page

Custom Heading Id

Creating a custom Id

You can create a custom heading to reduce its size or make it more convenient to use/share.

MDX

## A very descriptive heading [#descrip-head]

Pasting this directly on a .mdx file will give the following result.

A very descriptive heading

It looks like nothing changes but pay attention to its the heading id in the URL.

Masking a Heading from TOC

Masking a heading has never been easier!

MDX

#### Masked Heading from TOC
This heading will appear on TOC
{<h4>Masked Heading from TOC</h4>}
This heading will be masked from TOC

Masked Heading from TOC

And ... voila ! this heading doesn't appear in the TOC. Simple as that!

Code Blocks H2

Documentation (opens in a new tab)

Using features H3

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Add a copy button H4

console.log("hello, world")

Display line numbers

console.log("hello, world")
console.log("hello, world ... again")
console.log("And if I don't see you again, good evening and good night")
console.log("Just for an additional line")
 
console.log("oh ... a return to the line is enough to add a line !")

Add a title to the block

example.js

console.log("I added a title to the block")

Highlight a specific line

console.log("hello, world")
console.log("hello, world ... again")
console.log("And if I don't see you again, good evening and good night")

Highlight a specific part

console.log("hello, world")
console.log("hello, world ... again")
console.log("And if I don't see you again, good evening and good night")

Combining Features

You can also combine features!

example.js

console.log("hello, world")
console.log("hello, world ... again")
console.log("And if I don't see you again, good evening and good night")

Steps

Handy feature to visually format steps to follow.

Documentation (opens in a new tab)

Easy to use

MDX

<Steps>
### Uses headings H3
#### Inserts H4
##### And below
### Visible in the TOC
But can be excluded from TOC
{<h3>Obi-Wan-Kenobi</h3>}
</Steps>

Cool Result

Uses headings H3

Inserts H4

And below

Always visible in the TOC

But can be excluded from TOC

Obi-Wan-Kenobi

Callouts

Documentation (opens in a new tab)

You have to do something before Callouts work right of the bat

Callouts don't work when using the following documentation code.

import { Callout } from 'nextra/components'
 
<Callout type="info">
  Today is Friday.
</Callout>

To resolve this issue, follow these steps :

Update pnpm

Close the server and run the following command

Terminal

pnpm update

Run the server again

The update complete, run the localserver with

Terminal

pnpm dev

And done!

And that's it. You're done. No futher steps. There are different types of callouts, with their own color and icon. Like these ones:

A callout is a short piece of text intended to attract attention.

⚠️

A callout is a short piece of text intended to attract attention.

🚫

A callout is a short piece of text intended to attract attention.

But you can also customise the icons by using this code:

MDX

import { Callout } from 'nextra/components'
 
<Callout emoji="👾">
  **Space Invaders** is a 1978 shoot 'em up arcade game developed by Tomohiro
  Nishikado.
</Callout>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Cards

Documentation (opens in a new tab)

First things First

You can add icons in front of the title of a card. However to be able to do that, there is a file we had to create.

A file referencing all svgs named index.tsand located in this directory /components/icons

🚫

Icons are not working at the moment

A Single Card

This is the code to create a card

MDX

// place both lines on top of your page
import { Cards, Card } from 'nextra/components'
// choose the icon you want to import for this page
import { CardsIcon, OneIcon, WarningIcon } from '../components/icons'
 
  <Cards.Card
    title="Getting Starting"
    href="/pages/getting-started"
    arrow
  />

You would get this result. The card is very close to this line. A way to add more space between them would be nice. Although this type of card should be after a heading 1 or 2.

Result

Getting Starting→

Grouped Cards

Getting Starting→Getting Starting→Getting Starting→

H3 An interesting subject

H2 Another Subject Title ... Again

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H3 A subject to discuss

H5 A question or an Issue

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Online Hosting