扩展语法

# 使用自定义锚点 {#my-anchor}

:tada: :100:

[[toc]]

::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

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

::: danger STOP
危险区域，请勿继续
:::

::: details 点我查看代码
```js
console.log('Hello, VitePress!')
```
:::

// config.ts
export default defineConfig({
  // ...
  markdown: {
    container: {
      tipLabel: "提示",
      warningLabel: "警告",
      dangerLabel: "危险",
      infoLabel: "信息",
      detailsLabel: "详细信息"
    }
  }
  // ...
})

```js
export default {
  name: "MyComponent"
  // ...
}
```

```html
<ul>
  <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>
```

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

```js{1,4,6-8}
export default { // Highlighted
  data () {
    return {
      msg: `Highlighted!
      This line isn't highlighted,
      but this and the next 2 are.`,
      motd: 'VitePress is awesome',
      lorem: 'ipsum'
    }
  }
}
```

```js
export default {
  data() {
    return {
      msg: "Highlighted!" // [!code highlight]
    }
  }
}
```

```js
export default {
  data() {
    return {
      msg: "Focused!" // [!code focus]
    }
  }
}
```

```js
export default {
  data () {
    return {
      msg: 'Removed' // [!code --]
      msg: 'Added' // [!code ++]
    }
  }
}
```

```js
export default {
  data() {
    return {
      msg: "Error", // [!code error]
      msg: "Warning" // [!code warning]
    }
  }
}
```

export default {
  markdown: {
    lineNumbers: true
  }
}

```ts {1}
// 默认禁用行号
const line2 = "This is line 2"
const line3 = "This is line 3"
```

```ts:line-numbers {1}
// 启用行号
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```

```ts:line-numbers=2 {1}
// 行号已启用，并从 2 开始
const line3 = 'This is line 3'
const line4 = 'This is line 4'
```

::: code-group

```js [config.js]
/**
 * @type {import('vitepress').UserConfig}
 */
const config = {
  // ...
}

export default config
```

```ts [config.ts]
import type { UserConfig } from 'vitepress'

const config: UserConfig = {
  // ...
}

export default config
```

:::

export default {
  markdown: {
    image: {
      // 默认禁用；设置为 true 可为所有图片启用懒加载。
      lazyLoading: true
    }
  }
}

import { defineConfig } from "vitepress"
import markdownItAnchor from "markdown-it-anchor"
import markdownItFoo from "markdown-it-foo"

export default defineConfig({
  markdown: {
    // markdown-it-anchor 的选项
    // https://github.com/valeriangalliat/markdown-it-anchor#usage
    anchor: {
      permalink: markdownItAnchor.permalink.headerLink()
    },
    // @mdit-vue/plugin-toc 的选项
    // https://github.com/mdit-vue/mdit-vue/tree/main/packages/plugin-toc#options
    toc: { level: [1, 2] },
    config: (md) => {
      // 使用更多的 Markdown-it 插件！
      md.use(markdownItFoo)
    }
  }
})

![An image](./image.png)

![An image](/image-inside-public.png)

<img :src="theme.logoPath" />

<script setup>
  import { withBase, useData } from "vitepress"

  const { theme } = useData()
</script>

<template>
  <img :src="withBase(theme.logoPath)" />
</template>

---
title: Docs with VitePress
editLink: true
---

---
title: Docs with VitePress
editLink: true
---

# {{ $frontmatter.title }}

Guide content

<script setup>
  import { useData } from "vitepress"

  const { theme } = useData()
</script>

<template>
  <h1>{{ theme.footer.copyright }}</h1>
</template>

---
{ "title": "Blogging Like a Hacker", "editLink": true }
---

---
title: VitePress
titleTemplate: Vite & Vue powered static site generator
description: VitePress
head:
  - - meta
    - name: description
      content: hello
  - - meta
    - name: keywords
      content: super duper SEO
---

type HeadConfig = [string, Record<string, string>] | [string, Record<string, string>, string]

---
layout: doc # 或 home、page
navbar: false
sidebar: false
footer: false
lastUpdated: false
# 或指定具体日期
# lastUpdated: 2024-01-01
editLink: false
pageClass: custom-page-class
---

.custom-page-class {
  /* 特定页面的样式 */
}

{{ 1 + 1 }}

<span v-for="i in 3">{{ i }}</span>

<script setup>
import CustomComponent from '../../components/CustomComponent.vue'
</script>

# Docs

This is a .md using a custom component

<CustomComponent />

## More docs

...

This <span v-pre>{{ will be displayed as-is }}</span>

This {{ will be displayed as-is }}

::: v-pre
{{ This will be displayed as-is }}`
:::

{{ This will be displayed as-is }}

```js-vue
Hello {{ 1 + 1 }}
```

Hello 2

# .scss and .sass
npm install -D sass

# .less
npm install -D less

# .styl and .stylus
npm install -D stylus

<style lang="sass">
  .title
    font-size: 20px
</style>