Demo ​

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo labore aperiam, asperiores doloribus earum qui id harum neque modi nostrum similique. Rerum consequatur ab eaque velit consequuntur blanditiis praesentium commodi.

Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita.

Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est autem situm in nobis ut et voluptates et dolores nasci fatemur e corporis voluptatibus et doloribus -- itaque concedo, quod modo dicebas, cadere causa, si qui incurrunt, numquam vim tantam.

Header 2 ​

Header 3 ​

• Item 1
• Item 2
• Item 3
• Item 4

Header 4 ​

Header 5 ​

Header 6 ​

“Simplicity is the ultimate sophistication.”

— Leonardo da Vinci

Syntax Highlighting ​

VitePress provides Syntax Highlighting powered by Shiki, with additional features like line-highlighting:

Input ​

```js{4}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```

Output ​

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

Photo & Video ​

To write a caption to a photo use the figcaption tag:

<figcaption>Wow</figcaption>

Text can be bold, italic, or strikethrough.

Also we have Links

We also have lines.

And we can have tables:

Information Boxes ​

Aplus has various types of information boxes.

• The info box provides general information.
• The tip box provides helpful tips.
• The warning box indicates potential issues or concerns.
• The danger box warns about dangerous situations.
• The details block provides additional details or explanations.

All of them can be applied using the following formula:

::: name-of-the-box (info, tip, warning, danger, details)
The message you want to share
:::

Input ​

> [!INFO]
> This is an info box.

> [!TIP]
> This is a tip.

> [!WARNING]
> This is a warning.

> [!DANGER]
> This is a dangerous warning.

> [!NOTE]
> This is a note.

::: details
This is a details block.
:::

Output ​

Other Elements ​

Time ​

You can show a specific time by using the <time> tag:

Input ​

<time>10:00</time>

Output ​

10:00

Time Animation ​

You also can have an animation to the time like this one: 11:00

Input ​

<time>**11:00**</time>

Output ​

11:00

Small Text ​

You can add small text by using the <small> tag.

Input ​

<small>Something Small</small>

Output ​

Something Small

Progress Bar ​

You can add a progress bar by using the <progress> tag:

Input ​

<progress value="50" max="100"></progress>

Output ​

Sample Output (<samp>) ​

You can add a sample output by using the <samp> tag:

Input ​

<samp>Sample Output</samp>

Output ​

Sample Output

Legend ​

You can add a legend by using the <legend> tag:

Input ​

<legend>Legend</legend>

Output ​

Inline Quote (<q>) ​

You can add an inline quote by using the <q> tag:

Input ​

<q>Inline Quote</q>

Output ​

Inline Quote

Grammar Mistakes (<u>) ​

You can add a text that tries to replicate grammar mistakes by using the <u> tag:

Input ​

<u>Trying to replicate grammar mistakes</u>

Output ​

Trying to replicate grammar mistakes

Deleted Text (<del>) & Inserted Text (<ins>) ​

You can add deleted text by using the <del> tag:

Input ​

<del>Deleted Text</del> <ins>Inserted Text</ins>

Output ​

Deleted Text Inserted Text

Keyboard Input (<kbd>) ​

You can add keyboard input by using the <kbd> tag:

Input ​

<kbd>⌘ Super</kbd> + <kbd>Space</kbd>

Output ​

⌘ Super + Space

Marked Text (<mark>) ​

You can add marked text by using the <mark> tag:

Input ​

<mark>Marked Text</mark>

Output ​

Marked Text

Check Box ([ ]) ​

You can add a check box by using the [ ] tag:

• Check Box

• Checked Box

• Unchecked Box