markdown 扩展示例

自定义锚点

{#test}

测试一下

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!'
    }
  }
}

代码块中心聚焦

     msg: "Focused!", // [!code focus]

export default {
  data() {
    return {
      msg: "Focused!", 
    };
  },
};

代码块中颜色差异

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

export default {
  data () {
    return {
      msg: 'Removed'
      msg: 'Added'
    }
  }
}

更多

Custom Containers

Input

::: 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.
:::

设置自定义标题

::: details 展开代码
code
:::

展开代码

console.log("hello world");

Output

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.

表格

| Tables        |      Are      |  Cool |
| ------------- | :-----------: | ----: |
| col 3 is      | right-aligned | $1600 |
| col 2 is      |   centered    |   $12 |
| zebra stripes |   are neat    |    $1 |

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

表情

:tada: :100: :muscle:  :white_check_mark: :white_large_square: :heavy_check_mark: :x: :o:

🎉 💯 💪 ✅ ⬜ ✔️ ❌ ⭕

表情列表

More

Check out the documentation for the full list of markdown extensions.

到这里了！

测试自定义锚点