初始化项目：创建 VuePress Plume 网站

2025-09-21 06:30:20 -04:00
commit 6465c714e0
21 changed files with 8073 additions and 0 deletions
--- a/docs/.vuepress/client.ts
+++ b/docs/.vuepress/client.ts
@@ -0,0 +1,22 @@
+import { defineClientConfig } from 'vuepress/client'
+// import RepoCard from 'vuepress-theme-plume/features/RepoCard.vue'
+// import NpmBadge from 'vuepress-theme-plume/features/NpmBadge.vue'
+// import NpmBadgeGroup from 'vuepress-theme-plume/features/NpmBadgeGroup.vue'
+// import Swiper from 'vuepress-theme-plume/features/Swiper.vue'
+
+// import CustomComponent from './theme/components/Custom.vue'
+
+// import './theme/styles/custom.css'
+
+export default defineClientConfig({
+  enhance({ app }) {
+    // built-in components
+    // app.component('RepoCard', RepoCard)
+    // app.component('NpmBadge', NpmBadge)
+    // app.component('NpmBadgeGroup', NpmBadgeGroup)
+    // app.component('Swiper', Swiper) // you should install `swiper`
+
+    // your custom components
+    // app.component('CustomComponent', CustomComponent)
+  },
+})
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@@ -0,0 +1,185 @@
+/**
+ * 查看以下文档了解主题配置
+ * - @see https://theme-plume.vuejs.press/config/intro/ 配置说明
+ * - @see https://theme-plume.vuejs.press/config/theme/ 主题配置项
+ *
+ * 请注意，对此文件的修改都会重启 vuepress 服务。
+ * 部分配置项的更新没有必要重启 vuepress 服务，建议请在 `.vuepress/config.ts` 文件中配置
+ *
+ * 特别的，请不要在两个配置文件中重复配置相同的项，当前文件的配置项会被覆盖
+ */
+
+import { viteBundler } from '@vuepress/bundler-vite'
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+  base: '/',
+  lang: 'zh-CN',
+  title: 'SiMengWebSite Notes',
+  description: '祀梦的笔记网站',
+
+  head: [
+    // 配置站点图标
+    ['link', { rel: 'icon', type: 'image/png', href: 'https://theme-plume.vuejs.press/favicon-32x32.png' }],
+  ],
+
+  bundler: viteBundler(),
+  shouldPrefetch: false, // 站点较大，页面数量较多时，不建议启用
+
+  theme: plumeTheme({
+    /* 添加您的部署域名, 有助于 SEO, 生成 sitemap */
+    // hostname: 'https://your_site_url',
+
+    /* 文档仓库配置，用于 editLink */
+    // docsRepo: '',
+    // docsDir: 'docs',
+    // docsBranch: '',
+
+    /* 页内信息 */
+    // editLink: true,
+    // lastUpdated: true,
+    // contributors: true,
+    // changelog: false,
+
+    /**
+     * 博客
+     * @see https://theme-plume.vuejs.press/config/basic/#blog
+     */
+    // blog: false, // 禁用博客
+    // blog: {
+    //   postList: true, // 是否启用文章列表页
+    //   tags: true, // 是否启用标签页
+    //   archives: true, // 是否启用归档页
+    //   categories: true, // 是否启用分类页
+    //   postCover: 'right', // 文章封面位置
+    //   pagination: 15, // 每页显示文章数量
+    // },
+
+    /* 博客文章页面链接前缀 */
+    article: '/article/',
+
+    /**
+     * 编译缓存，加快编译速度
+     * @see https://theme-plume.vuejs.press/config/basic/#cache
+     */
+    cache: 'filesystem',
+
+    /**
+     * 为 markdown 文件自动添加 frontmatter 配置
+     * @see https://theme-plume.vuejs.press/config/basic/#autofrontmatter
+     */
+    // autoFrontmatter: {
+    //   permalink: true,  // 是否生成永久链接
+    //   createTime: true, // 是否生成创建时间
+    //   title: true,      // 是否生成标题
+    // },
+
+    /* 本地搜索, 默认启用 */
+    search: { provider: 'local' },
+
+    /**
+     * Algolia DocSearch
+     * 启用此搜索需要将 本地搜索 search 设置为 false
+     * @see https://theme-plume.vuejs.press/config/plugins/search/#algolia-docsearch
+     */
+    // search: {
+    //   provider: 'algolia',
+    //   appId: '',
+    //   apiKey: '',
+    //   indexName: '',
+    // },
+
+    /**
+     * Shiki 代码高亮
+     * @see https://theme-plume.vuejs.press/config/plugins/code-highlight/
+     */
+    // codeHighlighter: {
+    //   twoslash: true, // 启用 twoslash
+    //   whitespace: true, // 启用 空格/Tab 高亮
+    //   lineNumbers: true, // 启用行号
+    // },
+
+    /* 文章字数统计、阅读时间，设置为 false 则禁用 */
+    // readingTime: true,
+
+    /**
+      * markdown
+      * @see https://theme-plume.vuejs.press/config/markdown/
+      */
+    // markdown: {
+    //   abbr: true,         // 启用 abbr 语法  *[label]: content
+    //   annotation: true,   // 启用 annotation 语法  [+label]: content
+    //   pdf: true,          // 启用 PDF 嵌入 @[pdf](/xxx.pdf)
+    //   caniuse: true,      // 启用 caniuse 语法  @[caniuse](feature_name)
+    //   plot: true,         // 启用隐秘文本语法 !!xxxx!!
+    //   bilibili: true,     // 启用嵌入 bilibili视频 语法 @[bilibili](bid)
+    //   youtube: true,      // 启用嵌入 youtube视频 语法 @[youtube](video_id)
+    //   artPlayer: true,    // 启用嵌入 artPlayer 本地视频 语法 @[artPlayer](url)
+    //   audioReader: true,  // 启用嵌入音频朗读功能 语法 @[audioReader](url)
+    //   icon: { provider: 'iconify' },        // 启用内置图标语法  ::icon-name::
+    //   table: true,        // 启用表格增强容器语法 ::: table
+    //   codepen: true,      // 启用嵌入 codepen 语法 @[codepen](user/slash)
+    //   replit: true,       // 启用嵌入 replit 语法 @[replit](user/repl-name)
+    //   codeSandbox: true,  // 启用嵌入 codeSandbox 语法 @[codeSandbox](id)
+    //   jsfiddle: true,     // 启用嵌入 jsfiddle 语法 @[jsfiddle](user/id)
+    //   npmTo: true,        // 启用 npm-to 容器  ::: npm-to
+    //   demo: true,         // 启用 demo 容器  ::: demo
+    //   repl: {             // 启用 代码演示容器
+    //     go: true,         // ::: go-repl
+    //     rust: true,       // ::: rust-repl
+    //     kotlin: true,     // ::: kotlin-repl
+    //     python: true,     // ::: python-repl
+    //   },
+    //   math: {             // 启用数学公式
+    //     type: 'katex',
+    //   },
+    //   chartjs: true,      // 启用 chart.js
+    //   echarts: true,      // 启用 ECharts
+    //   mermaid: true,      // 启用 mermaid
+    //   flowchart: true,    // 启用 flowchart
+    //   image: {
+    //     figure: true,     // 启用 figure
+    //     lazyload: true,   // 启用图片懒加载
+    //     mark: true,       // 启用图片标记
+    //     size: true,       // 启用图片大小
+    //   },
+    //   include: true,      // 在 Markdown 文件中导入其他 markdown 文件内容
+    //   imageSize: 'local', // 启用 自动填充 图片宽高属性，避免页面抖动
+    // },
+
+    /**
+     * 水印
+     * @see https://theme-plume.vuejs.press/guide/features/watermark/
+     */
+    // watermark: true,
+
+    /**
+     * 评论 comments
+     * @see https://theme-plume.vuejs.press/guide/features/comments/
+     */
+    // comment: {
+    //   provider: '', // "Artalk" | "Giscus" | "Twikoo" | "Waline"
+    //   comment: true,
+    //   repo: '',
+    //   repoId: '',
+    //   category: '',
+    //   categoryId: '',
+    //   mapping: 'pathname',
+    //   reactionsEnabled: true,
+    //   inputPosition: 'top',
+    // },
+
+    /**
+     * 资源链接替换
+     * @see https://theme-plume.vuejs.press/guide/features/replace-assets/
+     */
+    // replaceAssets: 'https://cdn.example.com',
+
+    /**
+     * 加密功能
+     * @see https://theme-plume.vuejs.press/guide/features/encryption/
+     */
+    // encrypt: {},
+  }),
+})
--- a/docs/.vuepress/navbar.ts
+++ b/docs/.vuepress/navbar.ts
@@ -0,0 +1,18 @@
+/**
+ * @see https://theme-plume.vuejs.press/config/navigation/ 查看文档了解配置详情
+ *
+ * Navbar 配置文件，它在 `.vuepress/plume.config.ts` 中被导入。
+ */
+
+import { defineNavbarConfig } from 'vuepress-theme-plume'
+
+export default defineNavbarConfig([
+  { text: '首页', link: '/' },
+  { text: '博客', link: '/blog/' },
+  { text: '标签', link: '/blog/tags/' },
+  { text: '归档', link: '/blog/archives/' },
+  {
+    text: '笔记',
+    items: [{ text: '示例', link: '/notes/demo/README.md' }]
+  },
+])
--- a/docs/.vuepress/notes.ts
+++ b/docs/.vuepress/notes.ts
@@ -0,0 +1,45 @@
+/**
+ * @see https://theme-plume.vuejs.press/guide/document/ 查看文档了解配置详情。
+ *
+ * Notes 配置文件，它在 `.vuepress/plume.config.ts` 中被导入。
+ *
+ * 请注意，你应该先在这里配置好 Notes，然后再启动 vuepress，主题会在启动 vuepress 时，
+ * 读取这里配置的 Notes，然后在与 Note 相关的 Markdown 文件中，自动生成 permalink。
+ *
+ * 如果你发现 侧边栏没有显示，那么请检查你的配置是否正确，以及 Markdown 文件中的 permalink
+ * 是否是以对应的 note 配置的 link 的前缀开头。 是否展示侧边栏是根据 页面链接 的前缀 与 `note.link`
+ * 的前缀是否匹配来决定。
+ */
+
+/**
+ * 在受支持的 IDE 中会智能提示配置项。
+ *
+ * - `defineNoteConfig` 是用于定义单个 note 配置的帮助函数
+ * - `defineNotesConfig` 是用于定义 notes 集合的帮助函数
+ *
+ * 通过 `defineNoteConfig` 定义的 note 配置，应该填入 `defineNotesConfig` 的 notes 数组中
+ */
+import { defineNoteConfig, defineNotesConfig } from 'vuepress-theme-plume'
+
+const demoNote = defineNoteConfig({
+  dir: 'demo',
+  // `dir` 所指向的目录中的所有 markdown 文件，其 permalink 需要以 `link` 配置作为前缀
+  // 如果 前缀不一致，则无法生成侧边栏。
+  // 所以请确保  markdown 文件的 permalink 都以 `link` 开头
+  link: '/demo',
+  // 手动配置侧边栏结构
+  sidebar: ['', 'foo', 'bar'],
+  // 根据文件结构自动生成侧边栏
+  // sidebar: 'auto',
+})
+
+/**
+ * 导出所有的 note
+ * 每一个 note 都应该填入到 `notes.notes` 数组中
+ * （DemoNote 为参考示例，如果不需要它，请删除）
+ */
+export default defineNotesConfig({
+  dir: 'notes',
+  link: '/',
+  notes: [demoNote],
+})
--- a/docs/.vuepress/plume.config.ts
+++ b/docs/.vuepress/plume.config.ts
@@ -0,0 +1,81 @@
+/**
+ * 查看以下文档了解主题配置
+ * - @see https://theme-plume.vuejs.press/config/intro/ 配置说明
+ * - @see https://theme-plume.vuejs.press/config/theme/ 主题配置项
+ *
+ * 请注意，对此文件的修改不会重启 vuepress 服务，而是通过热更新的方式生效
+ * 但同时部分配置项不支持热更新，请查看文档说明
+ * 对于不支持热更新的配置项，请在 `.vuepress/config.ts` 文件中配置
+ *
+ * 特别的，请不要在两个配置文件中重复配置相同的项，当前文件的配置项会覆盖 `.vuepress/config.ts` 文件中的配置
+ */
+
+import { defineThemeConfig } from 'vuepress-theme-plume'
+import navbar from './navbar'
+import notes from './notes'
+
+/**
+ * @see https://theme-plume.vuejs.press/config/basic/
+ */
+export default defineThemeConfig({
+  logo: 'https://theme-plume.vuejs.press/plume.png',
+
+  appearance: true,  // 配置 深色模式
+
+  social: [
+    { icon: 'github', link: '/' },
+  ],
+  // navbarSocialInclude: ['github'], // 允许显示在导航栏的 social 社交链接
+  // aside: true, // 页内侧边栏， 默认显示在右侧
+  // outline: [2, 3], // 页内大纲， 默认显示 h2, h3
+
+  /**
+   * 文章版权信息
+   * @see https://theme-plume.vuejs.press/guide/features/copyright/
+   */
+  // copyright: true,
+
+  // prevPage: true,   // 是否启用上一页链接
+  // nextPage: true,   // 是否启用下一页链接
+  // createTime: true, // 是否显示文章创建时间
+
+  /* 站点页脚 */
+  // footer: {
+  //   message: 'Power by <a target="_blank" href="https://v2.vuepress.vuejs.org/">VuePress</a> & <a target="_blank" href="https://theme-plume.vuejs.press">vuepress-theme-plume</a>',
+  //   copyright: '',
+  // },
+
+  /**
+   * @see https://theme-plume.vuejs.press/config/basic/#profile
+   */
+  profile: {
+    avatar: 'https://theme-plume.vuejs.press/plume.png',
+    name: 'SiMengWebSite Notes',
+    description: '祀梦的笔记网站',
+    // circle: true,
+    // location: '',
+    // organization: '',
+  },
+
+  navbar,
+  notes,
+
+  /**
+   * 公告板
+   * @see https://theme-plume.vuejs.press/guide/features/bulletin/
+   */
+  // bulletin: {
+  //   layout: 'top-right',
+  //   contentType: 'markdown',
+  //   title: '公告板标题',
+  //   content: '公告板内容',
+  // },
+
+  /* 过渡动画 @see https://theme-plume.vuejs.press/config/basic/#transition */
+  // transition: {
+  //   page: true,        // 启用 页面间跳转过渡动画
+  //   postList: true,    // 启用 博客文章列表过渡动画
+  //   appearance: 'fade',  // 启用 深色模式切换过渡动画, 或配置过渡动画类型
+  // },
+
+})
--- a/docs/.vuepress/public/plume.svg
+++ b/docs/.vuepress/public/plume.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 72 72">
+	<path fill="#5086a1" d="M42.334 49.147a29.945 29.945 0 0 1-19.338-8.151c-8.014-7.365-8.378-18.076-8.533-22.649l-.022-.627a2.904 2.904 0 0 1 3.457-2.951c17.005 3.355 21.695 16.324 22.056 17.4a49.543 49.543 0 0 1 3.574 15.922a1 1 0 0 1-.967 1.052c-.029.001-.106.004-.227.004" />
+	<path fill="#8cccd5" d="M44.436 55.316c-11.646 0-17.376-6.974-17.653-7.354a1 1 0 0 1 .262-1.424a11.103 11.103 0 0 1 12.774-1.574c-1.465-9.078 1.877-13.568 2.031-13.77a.998.998 0 0 1 .75-.39a.97.97 0 0 1 .78.325c8.944 9.771 8.793 16.532 7.908 19.691c-.034.14-1.062 4.092-4.772 4.406c-.711.062-1.405.09-2.08.09" />
+	<g fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
+		<path d="M55.184 57.69S34.96 45.877 23.097 24.206m22.131 30.096c-11.93.46-17.628-6.88-17.628-6.88" />
+		<path d="M40.528 42.483c-.56-7.195 2.116-10.679 2.116-10.679c8.834 9.654 8.406 16.162 7.681 18.747m-13.311-3.129a30.15 30.15 0 0 1-13.341-7.162c-8.072-7.419-8.067-18.241-8.232-22.577a1.903 1.903 0 0 1 2.264-1.932C34.694 19.103 39.02 32.528 39.02 32.528" />
+	</g>
+</svg>
--- a/docs/.vuepress/theme/components/Custom.vue
+++ b/docs/.vuepress/theme/components/Custom.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const message = ref('Hello World!')
+</script>
+
+<template>
+  <div class="my-custom-content">
+    {{ message }}
+  </div>
+</template>
--- a/docs/.vuepress/theme/shim.d.ts
+++ b/docs/.vuepress/theme/shim.d.ts
@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { ComponentOptions } from 'vue'
+
+  const comp: ComponentOptions
+  export default comp
+}
--- a/docs/.vuepress/theme/styles/custom.css
+++ b/docs/.vuepress/theme/styles/custom.css
@@ -0,0 +1,50 @@
+:root {
+  /** 主题颜色 */
+
+  /*
+  --vp-c-brand-1: #5086a1;
+  --vp-c-brand-2: #6aa1b7;
+  --vp-c-brand-3: #8cccd5;
+  --vp-c-brand-soft: rgba(131, 208, 218, 0.314);
+  */
+
+  /** 背景颜色 */
+
+  /*
+  --vp-c-bg: #fff;
+  --vp-c-bg-alt: #f6f6f7;
+  --vp-c-bg-elv: #fff;
+  --vp-c-bg-soft: #f6f6f7;
+  */
+
+  /** 文本颜色 */
+
+  /*
+  --vp-c-text-1: rgba(60, 60, 67);
+  --vp-c-text-2: rgba(60, 60, 67, 0.78);
+  --vp-c-text-3: rgba(60, 60, 67, 0.56);
+  */
+}
+
+/** 深色模式 */
+[data-theme="dark"] {
+  /*
+  --vp-c-brand-1: #8cccd5;
+  --vp-c-brand-2: #6aa1b7;
+  --vp-c-brand-3: #5086a1;
+  --vp-c-brand-soft: rgba(131, 208, 218, 0.314);
+  */
+
+  /*
+  --vp-c-bg: #1b1b1f;
+  --vp-c-bg-alt: #161618;
+  --vp-c-bg-elv: #202127;
+  --vp-c-bg-soft: #202127;
+  */
+
+  /*
+  --vp-c-text-1: rgba(255, 255, 245, 0.86);
+  --vp-c-text-2: rgba(235, 235, 245, 0.6);
+  --vp-c-text-3: rgba(235, 235, 245, 0.38);
+  */
+}
--- a/docs/README.md
+++ b/docs/README.md
@@ -0,0 +1,22 @@
+---
+pageLayout: home
+externalLinkIcon: false
+config:
+  -
+    type: hero
+    full: true
+    background: tint-plate
+    hero:
+      name: Theme Plume
+      tagline: VuePress Next Theme
+      text: 一个简约的，功能丰富的 vuepress 文档&博客 主题
+      actions:
+        -
+          theme: brand
+          text: 博客
+          link: /blog/
+        -
+          theme: alt
+          text: Github →
+          link: https://github.com/pengzhanbo/vuepress-theme-plume
+---
--- a/docs/notes/demo/README.md
+++ b/docs/notes/demo/README.md
@@ -0,0 +1,6 @@
+---
+title: Demo
+---
+
+- [bar](./bar.md)
+- [foo](./foo.md)
--- a/docs/notes/demo/bar.md
+++ b/docs/notes/demo/bar.md
@@ -0,0 +1,5 @@
+---
+title: bar
+---
+
+[foo](./foo.md)
--- a/docs/notes/demo/foo.md
+++ b/docs/notes/demo/foo.md
@@ -0,0 +1,5 @@
+---
+title: foo
+---
+
+[bar](./bar.md)
--- a/docs/preview/custom-component.example.md
+++ b/docs/preview/custom-component.example.md
@@ -0,0 +1,8 @@
+---
+title: 自定义组件
+tags:
+  - 预览
+  - 组件
+---
+
+<CustomComponent />
--- a/docs/preview/markdown.md
+++ b/docs/preview/markdown.md
@@ -0,0 +1,408 @@
+---
+title: Markdown
+tags:
+  - markdown
+---
+
+## 标题H2
+
+### 标题H3
+
+#### 标题H4
+
+##### 标题H5
+
+###### 标题H6
+
+## 标题2 Badge <Badge type="tip" text="Badge" />
+
+### 标题3 Badge <Badge type="warning" text="Badge" />
+
+#### 标题4 Badge <Badge type="danger" text="Badge" />
+
+正文内容。
+
+`@property` CSS at-rule是 [CSS Houdini API](https://developer.mozilla.org/zh-CN/docs/Web/Guide/Houdini)
+的一部分，它允许开发者显式地定义他们的 [CSS 自定义属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/--*),
+允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。
+
+`@property` 的出现，极大的增强了 CSS 的能力。
+
+加粗：**加粗文字**
+
+斜体： _斜体文字_
+
+~~删除文字~~
+
+内容 ==标记==
+
+数学表达式： $-(2^{n-1})$ ~ $2^{n-1} -1$
+
+$\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
+= \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^ Ir \cdots (r-i+1) (\log y)^{ri}} {\omega^i} \right\}$
+
+19^th^
+
+H~2~O
+
+::: center
+内容居中
+:::
+
+::: right
+内容右对齐
+:::
+
+- 无序列表1
+- 无序列表2
+- 无序列表3
+
+1. 有序列表1
+2. 有序列表2
+3. 有序列表3
+
+- [ ] 任务列表1
+- [ ] 任务列表2
+- [x] 任务列表3
+- [x] 任务列表4
+
+| Tables        | Are           | Cool  |
+| ------------- |:-------------:| -----:|
+| col 3 is      | right-aligned | $1600 |
+| col 2 is      | centered      |   $12 |
+| zebra stripes | are neat      |    $1 |
+
+> 引用内容
+>
+> 引用内容
+
+[链接](/)
+
+[外部链接](https://github.com/pengzhanbo)
+
+![plume](/plume.svg)
+
+**Badge：**
+
+- <Badge type="info" text="info badge" />
+- <Badge type="tip" text="tip badge" />
+- <Badge type="warning" text="warning badge" />
+- <Badge type="danger" text="danger badge" />
+
+**图标：**
+
+- home - <Icon name="material-symbols:home" color="currentColor" size="1em" />
+- vscode - <Icon name="skill-icons:vscode-dark" size="2em" />
+- twitter - <Icon name="skill-icons:twitter" size="2em" />
+
+**demo wrapper：**
+
+::: demo-wrapper title="示例" no-padding height="200px"
+<style scoped>
+.open-door {
+  display: flex;
+  gap: 20px;
+  padding: 20px;
+}
+.open-door .main {
+  background: #ccc;
+}
+</style>
+
+<div class="open-door">
+  <div class="main">main</div>
+  <div class="aside">aside</div>
+</div>
+
+:::
+
+**代码：**
+
+```js whitespace
+const a = 1
+const b = 2
+const c = a + b
+
+// [!code word:obj]
+const obj = {
+  toLong: {
+    deep: {
+      deep: {
+        deep: {
+          value: 'this is to long text. this is to long text. this is to long text. this is to long text.', // [!code highlight]
+        }
+      }
+    }
+  }
+}
+```
+
+**Code Blocks TwoSlash：**
+
+```ts twoslash
+// @errors: 2339
+const welcome = 'Tudo bem gente?'
+const words = welcome.contains(' ')
+```
+
+```ts twoslash
+import express from 'express'
+const app = express()
+app.get('/', (req, res) => {
+  res.send
+})
+app.listen(3000)
+```
+
+```ts twoslash
+import { createHighlighter } from 'shiki'
+
+const highlighter = await createHighlighter({ themes: ['nord'], langs: ['javascript'] })
+// @log: Custom log message
+const a = 1
+// @error: Custom error message
+const b = 1
+// @warn: Custom warning message
+const c = 1
+// @annotate: Custom annotation message
+```
+
+```ts twoslash
+// @errors: 2540
+interface Todo {
+  title: string
+}
+
+const todo: Readonly<Todo> = {
+  title: 'Delete inactive users'.toUpperCase(),
+//  ^?
+}
+
+todo.title = 'Hello'
+
+Number.parseInt('123', 10)
+//      ^|
+
+//
+//
+```
+
+```vue twoslash
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const count = ref(0)
+</script>
+
+<template>
+  <p>{{ count }}</p>
+</template>
+```
+
+**代码分组：**
+
+::: code-tabs
+@tab tab1
+
+```js
+const a = 1
+const b = 2
+const c = a + b
+```
+
+@tab tab2
+
+```ts
+const a: number = 1
+const b: number = 2
+const c: number = a + b
+```
+
+:::
+
+**代码块高亮：**
+
+```ts
+function foo() {
+  const a = 1 // [!code highlight]
+
+  console.log(a)
+
+  const b = 2 // [!code ++]
+  const c = 3 // [!code --]
+
+  console.log(a + b + c) // [!code error]
+  console.log(a + b) // [!code warning]
+}
+```
+
+**代码块聚焦：**
+
+```ts
+function foo() {
+  const a = 1 // [!code focus]
+}
+```
+
+::: tip 仅标题
+:::
+
+::: note 注释
+注释内容 [link](https://github.com/pengzhanbo) `inline code`
+
+```js
+const a = 1
+const b = 2
+const c = a + b
+```
+
+:::
+
+::: info 信息
+信息内容 [link](https://github.com/pengzhanbo) `inline code`
+
+```js
+const a = 1
+const b = 2
+const c = a + b
+```
+
+:::
+
+::: tip 提示
+提示内容 [link](https://github.com/pengzhanbo) `inline code`
+
+```js
+const a = 1
+const b = 2
+const c = a + b
+```
+
+:::
+
+::: warning 警告
+警告内容 [link](https://github.com/pengzhanbo) `inline code`
+
+```js
+const a = 1
+const b = 2
+const c = a + b
+```
+
+:::
+
+::: caution 错误
+错误内容 [link](https://github.com/pengzhanbo) `inline code`
+
+```js
+const a = 1
+const b = 2
+const c = a + b
+```
+
+:::
+
+::: important 重要
+重要内容 [link](https://github.com/pengzhanbo) `inline code`
+
+```js
+const a = 1
+const b = 2
+const c = a + b
+```
+
+:::
+
+::: details 详细标题
+
+这里是内容。
+:::
+
+**GFM alert：**
+
+> [!note]
+> note
+
+> [!info]
+> info
+
+> [!tip]
+> tip
+
+> [!warning]
+> warning
+
+> [!caution]
+> caution
+
+> [!important]
+> important
+
+**代码演示：**
+
+:::: demo title="常规示例" desc="一个常规示例"
+
+::: code-tabs
+@tab HTML
+
+```html
+<div id="app">
+  <h3>vuepress-theme-plume</h3>
+</div>
+```
+
+@tab Javascript
+
+```js
+const a = 'So Awesome!'
+const app = document.querySelector('#app')
+app.appendChild(window.document.createElement('small')).textContent = a
+```
+
+@tab CSS
+
+```css
+#app {
+  font-size: 2em;
+  text-align: center;
+}
+```
+
+:::
+::::
+
+**选项卡：**
+
+::: tabs
+@tab 标题1
+内容区块
+
+@tab 标题2
+内容区块
+:::
+
+:::: warning
+::: tabs
+@tab 标题1
+内容区块
+
+@tab 标题2
+内容区块
+:::
+::::
+
+**脚注：**
+
+脚注 1 链接[^first]。
+
+脚注 2 链接[^second]。
+
+行内的脚注^[行内脚注文本] 定义。
+
+重复的页脚定义[^second]。
+
+[^first]: 脚注 **可以包含特殊标记**
+
+    也可以由多个段落组成
+
+[^second]: 脚注文字。