Document small version numbering V1.0.0

Headings

To create a heading, add number signs (#) in front of a word or phrase. The number of number signs you use should correspond to the heading level. For example, to create a heading level three (h3), use three number signs (e.g., ### My Header).

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Emphasis

You can add emphasis by making text bold or italic.

Bold

To bold text, add two asterisks or underscores before and after a word or phrase. To bold the middle of a word for emphasis, add two asterisks without spaces around the letters.

I just love bold text.

Italic

To italicize text, add one asterisk or underscore before and after a word or phrase. To italicize the middle of a word for emphasis, add one asterisk without spaces around the letters.

Italicized text is the cat's meow.

Blockquotes

To create a blockquote, add a > in front of a paragraph.

Dorothy followed her through many of the beautiful rooms in her castle. The rendered output looks like this:

Lists

You can organize items into ordered and unordered lists.

Ordered Lists

To create an ordered list, add line items with numbers followed by periods. The numbers don’t have to be in numerical order, but the list should start with the number one.

1. First item

2. Second item

3. Third item

4. Fourth item

5. First item

6. Second item

7. Third item

   1. Indented item
   2. Indented item

8. Fourth item

Unordered Lists

To create an unordered list, add dashes (-), asterisks (*), or plus signs (+) in front of line items. Indent one or more items to create a nested list.

• First item
• Second item
• Third item
• Fourth item

Steps

A built-in component to turn a numbered list into a visual representation of steps.

import { Steps } from 'nextra/components'
 
<Steps>
##### Step 1
 
Contents for step 1.
 
##### Step 2
 
Contents for step 2.
</Steps>

Usage

Wrap a set of markdown h3 headings with the Steps component to turn them into visual steps.

Images

To add an image, add an exclamation mark (!), followed by alt text in brackets, and the path or URL to the image asset in parentheses. You can optionally add a title in quotation marks after the path or URL.

![Sample Image!](../public/images/menus.png)

• show Image with clickable modal display

import ModalImage from "react-modal-image";
import  menus from "../public/images/menus.png";
<ModalImage
  small={menus.src}
  large={menus.src}
  alt="CBC Menu Sample"
/>

Strikethrough

removed

Markdown removed

Task List

Write the press release Update the website Contact the media Markdown

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

see https://boost-tool.com/en/tools/md_table (opens in a new tab) which is a good tool to convert word to mark down.

Autolinks

Visit https://nextjs.org (opens in a new tab).

Visit https://nextjs.org (opens in a new tab).

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

Callout Component

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

Default

Info

Warning

Error

Use Custom or alternative emoji

import { Callout } from 'nextra/components'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHouse } from '@fortawesome/free-solid-svg-icons'
 
<Callout type="error" emoji={<FontAwesomeIcon icon={faHouse} />}>
  This is a dangerous feature that can cause everything to explode.
</Callout>

API

The Callout component takes the following props:

type (optional)

The type of the Callout.

• Type: 'default' | 'info' | 'warning' | 'error'
• Default: 'default'

emoji (optional)

The icon to show in the Callout. You can also show your custom icon using this prop.

• Type: string | ReactNode
• Default: '💡'

children

The content of the Callout.

• Type: ReactNode

Tabs Component

import { Tabs } from 'nextra/components'
 
<Tabs items={['pnpm', 'npm', 'yarn']}>
  <Tabs.Tab>**pnpm**: Fast, disk space efficient package manager.</Tabs.Tab>
  <Tabs.Tab>**npm** is a package manager for the JavaScript programming language.</Tabs.Tab>
  <Tabs.Tab>**Yarn** is a software packaging system.</Tabs.Tab>
</Tabs>