🏖️markdown指南

写在最前🏖️

仅仅记录自己常用的,更多查看官方文档

Header Anchors

会自动为md文件标题添加锚链接

## 标题
### 板块一

Links

[内部链接](./1.项目初始化)
[外部链接](https://github.com/vuejs/vitepress)

• 内部链接
• 外部链接

表格

| 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

Emoji

😁 💯

• 查看所有符号
• 🧐搜索辅助网页

自定义容器

• 默认标题

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

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 🤪哈哈哈,提示
Danger zone, do not proceed
:::

::: details ✋查查查查看源码
    ```js
    console.log('Hello, VitePress!')
    ``` 
:::

🤪哈哈哈,提示

Danger zone, do not proceed

✋查查查查看源码

console.log('Hello, VitePress!')

代码语法高亮

✍️

用来做代码对比就很好

<script setup lang="ts">
  const emits = defineEmits<{
    (e: 'change', num: number): void;
    (e: 'update', num: number, ...reset: any[]): void;    
  }>();
</script>
<template>
  <a-button @click="emits('change', 666)">按钮</a-button>
  <a-button @click="emits('update', 666, 7777, '哈哈哈')">按钮</a-button>
</template>
<style scoped lang="less"></style>

<script setup lang="ts">
  const emits = defineEmits<{
    change: [num: number];
    update: [num: number, ...reset: any[]];
  }>();
</script>
<template>
  <a-button @click="emits('change', 666)">按钮</a-button>
  <a-button @click="emits('update', 666, 7777, '哈哈哈')">按钮</a-button>
</template>
<style scoped lang="less"></style>

给代码块开启行号

export default defineConfig({
    markdown: {
        lineNumbers: true,
    }
})

静态资源绝对路径引入

![图片](/logo.webp)

使用vue

{{1 + 1}}

2

局部组件

<GhuiIcon></GhuiIcon>
<script setup> 
import { GhuiIcon } from '@packages/components';
</script>

使用第三方组件库

• 全局引入

// /theme/index.ts
// https://vitepress.dev/guide/custom-theme
import { h } from 'vue';
import Theme from 'vitepress/theme';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

export default {
  extends: Theme,
  Layout: () => {
    return h(Theme.Layout, null, {
      // https://vitepress.dev/guide/extending-default-theme#layout-slots
    });
  },
  enhanceApp({ app, router, siteData }) {
      app.use(Antd);
  },
};

• md中直接使用

<a-button>这是一个按钮</a-button>

使用demo

• 安装插件 vitepress-theme-demoblock

pnpm i -D vitepress-theme-demoblock

• 全局注册

// /theme/index.ts
// https://vitepress.dev/guide/custom-theme
import { h } from 'vue';
import Theme from 'vitepress/theme';
// @ts-ignore
import { useComponents } from './useComponents';
import './style.css';
import Demo from 'vitepress-theme-demoblock/dist/client/components/Demo.vue';
import DemoBlock from 'vitepress-theme-demoblock/dist/client/components/DemoBlock.vue';

export default {
  extends: Theme,
  Layout: () => {
    return h(Theme.Layout, null, {
      // https://vitepress.dev/guide/extending-default-theme#layout-slots
    });
  },
  enhanceApp({ app, router, siteData }) {
      app.component('Demo', Demo);
      app.component('DemoBlock', DemoBlock);
  },
};

• 用例

code-group

npm

$ npm add -D vitepress
$ npx vitepress init

pnpm

$ pnpm add -D vitepress
$ pnpm dlx vitepress init