vuepress-theme-vdoing vuepress-theme-vdoing
首页
  • 主题初衷与诞生
  • 介绍
  • 快速上手
  • 目录结构
  • 核心配置和约定
  • 自动生成front matter
  • Markdown 容器
  • Markdown 中使用组件
  • 相关文章

    • 使目录栏支持h2~h6标题
    • 如何让你的笔记更有表现力
    • 批量操作front matter工具
    • 部署
    • 关于写文章和H1标题
    • 关于博客搭建与管理
    • 在线编辑和新增文章的方法
  • 主题配置
  • 首页配置
  • front matter配置
  • 目录页配置
  • 添加摘要
  • 修改主题颜色和样式
  • 评论栏
资源
案例
问答
赞助
GitHub (opens new window)
首页
  • 主题初衷与诞生
  • 介绍
  • 快速上手
  • 目录结构
  • 核心配置和约定
  • 自动生成front matter
  • Markdown 容器
  • Markdown 中使用组件
  • 相关文章

    • 使目录栏支持h2~h6标题
    • 如何让你的笔记更有表现力
    • 批量操作front matter工具
    • 部署
    • 关于写文章和H1标题
    • 关于博客搭建与管理
    • 在线编辑和新增文章的方法
  • 主题配置
  • 首页配置
  • front matter配置
  • 目录页配置
  • 添加摘要
  • 修改主题颜色和样式
  • 评论栏
资源
案例
问答
赞助
GitHub (opens new window)
npm

(进入注册为作者充电)

  • 指南

    • 主题初衷与诞生
    • 介绍
    • 快速上手
    • 目录结构
    • 构建结构化站点的核心配置和约定
    • 自动生成front matter
    • Markdown 容器
    • Markdown 中使用组件
      • 标记
        • 《沁园春·雪》
      • 代码块选项卡
  • 相关文章

    • 使目录栏支持h2~h6标题
    • 如何让你的笔记更有表现力
    • 批量操作front matter工具
    • 部署
    • 关于写文章和一级标题
    • 关于博客搭建与管理
    • 在线编辑和新增文章的方法
目录

Markdown 中使用组件

主题的内置组件可以直接在Markdown文件中以类似html标签的方式使用。

# 标记

  • Props:

    • text- string
    • type - string, 可选值: tip | warning | error,默认: tip
    • vertical - string, 可选值: top | middle,默认: top
  • Usage:

你可以在标题或其他内容中使用标记:

#### 《沁园春·雪》 <Badge text="摘"/>
北国风光<Badge text="注释" type="warning"/>,千里冰封,万里雪飘。

> <Badge text="译文" type="error" vertical="middle"/>: 北方的风光。

效果:

# 《沁园春·雪》 摘

北国风光注释,千里冰封,万里雪飘。

译文: 北方的风光。

# 代码块选项卡 v1.8.0 +

在<code-group>中嵌套<code-block>来配合使用。在<code-block>标签添加title来指定tab标题,active指定当前tab:

<code-group>
  <code-block title="YARN" active>
  ```bash
  yarn add vuepress-theme-vdoing -D
  ```
  </code-block>

  <code-block title="NPM">
  ```bash
  npm install vuepress-theme-vdoing -D
  ```
  </code-block>
</code-group>

效果:

    yarn add vuepress-theme-vdoing -D
    
    npm install vuepress-theme-vdoing -D
    
    // Make sure to add code blocks to your code group

    注意

    • 请在<code-group>标签与markdown内容之间使用空行隔开,否则可能会解析不出来。
    • 该组件只适用于放置代码块,放其他内容在体验上并不友好。如您确实需要放置其他内容的选项卡,推荐使用vuepress-plugin-tabs (opens new window)插件。
    上次更新: 2023/07/09, 11:40:24
    Markdown 容器
    使目录栏支持h2~h6标题

    ← Markdown 容器 使目录栏支持h2~h6标题→

    Theme by Vdoing | Copyright © 2019-2024 Evan Xu | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式