Priori Dev

Appearance

Markdown Features ​

VitePress supports extended markdown features out of the box. Here are examples you can use in any page.

GitHub-Flavored Markdown ​

Tables ​

FeatureStatusNotes
Tables✅ ReadySupports alignment
Task lists✅ ReadyInteractive checkboxes
Strikethrough✅ ReadyUse ~~text~~

Task Lists ​

  • [x] Set up VitePress
  • [x] Create navigation
  • [ ] Add more content
  • [ ] Deploy to production

Strikethrough ​

This text is crossed out

Custom Containers ​

Use these for callouts and special content:

INFO

This is an info box. Great for helpful tips.

TIP

This is a tip box. Use it for best practices.

WARNING

This is a warning box. Use it for important cautions.

DANGER

This is a danger box. Use it for critical warnings.

Click to expand

This content is hidden until clicked. Perfect for optional details or long content.

Code Blocks with Features ​

Syntax Highlighting ​

js
// JavaScript with syntax highlighting
function greet(name) {
  console.log(`Hello, ${name}!`)
}

Line Highlighting ​

js
// Lines 2, 4, 5, and 6 are highlighted
function example() {
  const important = true
  if (important) {
    console.log('This is highlighted')
    console.log('So is this')
  }
}

Line Numbers ​

ts
// TypeScript with line numbers
interface User {
  name: string
  email: string
}

function createUser(user: User) {
  return user
}

Emoji Support ​

Use emoji shortcodes:

  • 🎉 = :tada:
  • 🚀 = :rocket:
  • 🔥 = :fire:
  • :check: = :check:
  • ⚠️ = :warning:

Table of Contents ​

Add [[toc]] to automatically generate a table of contents from your headings:

Link to other pages: Getting Started

Link to external sites: VitePress Docs

Markdown in HTML ​

You can use HTML tags when needed:

Custom HTML block
You can mix markdown with HTML.

Code Groups ​

Compare different approaches side by side:

js
npm install vitepress
js
pnpm add vitepress
js
yarn add vitepress

Vue Components ​

VitePress supports Vue 3 components in markdown. You can use built-in components or create custom ones.

Badge Component ​

  • VitePress default
  • VitePress ^2.0.0
  • VitePress beta
  • VitePress caution

Syntax Reference ​

Container Syntax ​

md
::: tip Custom Title
Your content here
:::

Highlight Syntax ​

md
```js{1,3-5}
// Highlight lines 1, 3, 4, 5

### Code Group Syntax

````md
::: code-group

```js [tab1]
code here
js
more code

:::


---

**Try it yourself**: Edit this file and experiment with these features!
lock

Enter PIN to continue