@wilboerht/blog-template

--- title: Markdown 示例 date: 2024-01-20 tags: ['Markdown', '教程'] description: 展示 VitePress 中 Markdown 的各种用法 --- # Markdown 示例本文将展示在 VitePress 中使用 Markdown 的各种方式。 ## 基础语法 ### 标题 ```markdown # h1 标题 ## h2 标题 ### h3 标题 ``` ### 强调 - **粗体** - *斜体* - ***粗斜体*** - ~~删除线~~ ### 列表有序列表： 1. 第一项 2. 第二项 3. 第三项无序列表： - 项目一 - 项目二 - 项目三 ### 引用 > 这是一段引用文本。 > > 这是引用的第二段。 ## 扩展语法 ### 表格 | 表头1 | 表头2 | 表头3 | |-------|-------|-------| | 单元格1 | 单元格2 | 单元格3 | | 单元格4 | 单元格5 | 单元格6 | ### 代码块 ```javascript function hello() { console.log('Hello, VitePress!') } ``` ### 任务列表 - [x] 已完成任务 - [ ] 未完成任务 - [ ] 待办事项 ## 特殊功能 ### 提示框 ::: tip 提示这是一个提示框 ::: ::: warning 警告这是一个警告框 ::: ::: danger 危险这是一个危险提示框 ::: ::: info 信息这是一个信息框 ::: ### 代码组 ::: code-group ```js [config.js] export default { data: 'Hello' } ``` ```ts [config.ts] export default { data: 'Hello' } as const ``` ::: ### 图片展示 ![Vue Logo](/images/common/vue-logo.svg) ### 自定义容器 ::: details 点击查看更多这是一些隐藏的内容，点击后才会显示。 ::: ## 数学公式使用 KaTeX 渲染数学公式： $E = mc^2$ $$ \frac{n!}{k!(n-k)!} = \binom{n}{k} $$ ## 总结这些示例展示了 VitePress 中 Markdown 的主要用法。你可以根据需要组合使用这些功能来创建丰富的文档内容。