二丫讲梵 二丫讲梵
首页
  • 最佳实践
  • 迎刃而解
  • Nginx
  • Php
  • Zabbix
  • AWS
  • Prometheus
  • Grafana
  • CentOS
  • Systemd
  • Docker
  • Rancher
  • Ansible
  • Ldap
  • Gitlab
  • GitHub
  • Etcd
  • Consul
  • RabbitMQ
  • Kafka
  • MySql
  • MongoDB
  • OpenVPN
  • KVM
  • VMware
  • Other
  • ELK
  • K8S
  • LLM
  • Nexus
  • Jenkins
  • 随写编年
  • 家人物语
  • 追忆青春
  • 父亲的朋友圈
  • 电影音乐
  • 效率工具
  • 博客相关
  • Shell
  • 前端实践
  • Vue学习笔记
  • Golang学习笔记
  • Golang编程技巧
  • 学习周刊
  • Obsidian插件周刊
关于
友链
  • 本站索引

    • 分类
    • 标签
    • 归档
  • 本站页面

    • 导航
    • 打赏
  • 我的工具

    • 备忘录清单 (opens new window)
    • json2go (opens new window)
    • gopher (opens new window)
    • 微信MD编辑 (opens new window)
    • 国内镜像 (opens new window)
    • 出口IP查询 (opens new window)
    • 代码高亮工具 (opens new window)
  • 外站页面

    • 开往 (opens new window)
    • ldapdoc (opens new window)
    • HowToStartOpenSource (opens new window)
    • vdoing-template (opens new window)
GitHub (opens new window)

二丫讲梵

行者常至,为者常成
首页
  • 最佳实践
  • 迎刃而解
  • Nginx
  • Php
  • Zabbix
  • AWS
  • Prometheus
  • Grafana
  • CentOS
  • Systemd
  • Docker
  • Rancher
  • Ansible
  • Ldap
  • Gitlab
  • GitHub
  • Etcd
  • Consul
  • RabbitMQ
  • Kafka
  • MySql
  • MongoDB
  • OpenVPN
  • KVM
  • VMware
  • Other
  • ELK
  • K8S
  • LLM
  • Nexus
  • Jenkins
  • 随写编年
  • 家人物语
  • 追忆青春
  • 父亲的朋友圈
  • 电影音乐
  • 效率工具
  • 博客相关
  • Shell
  • 前端实践
  • Vue学习笔记
  • Golang学习笔记
  • Golang编程技巧
  • 学习周刊
  • Obsidian插件周刊
关于
友链
  • 本站索引

    • 分类
    • 标签
    • 归档
  • 本站页面

    • 导航
    • 打赏
  • 我的工具

    • 备忘录清单 (opens new window)
    • json2go (opens new window)
    • gopher (opens new window)
    • 微信MD编辑 (opens new window)
    • 国内镜像 (opens new window)
    • 出口IP查询 (opens new window)
    • 代码高亮工具 (opens new window)
  • 外站页面

    • 开往 (opens new window)
    • ldapdoc (opens new window)
    • HowToStartOpenSource (opens new window)
    • vdoing-template (opens new window)
GitHub (opens new window)
  • 随写编年

  • 家人物语

  • 追忆青春

  • 父亲的朋友圈

  • 电影音乐

  • 效率工具

  • 博客相关

    • 原生文档

      • Markdown 中使用组件
        • 标记
          • 《沁园春·雪》
        • 代码块选项卡
      • 如何让你的笔记更有表现力
    • 个人折腾

    • 转载推广

目录

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"/>: 北方的风光。
1
2
3
4

效果:

# 《沁园春·雪》 摘

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

译文: 北方的风光。

# 代码块选项卡 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>
1
2
3
4
5
6
7
8
9
10
11
12
13

效果:

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

    注意

    • 请在<code-group>标签与markdown内容之间使用空行隔开,否则可能会解析不出来。
    • 该组件只适用于放置代码块,放其他内容在体验上并不友好。如您确实需要放置其他内容的选项卡,推荐使用vuepress-plugin-tabs (opens new window)插件。
    微信 支付宝
    上次更新: 2024/04/25, 22:08:24
    近期发现的一些优秀的工具提名(一)
    如何让你的笔记更有表现力

    ← 近期发现的一些优秀的工具提名(一) 如何让你的笔记更有表现力→

    最近更新
    01
    学习周刊-总第213期-2025年第22周
    05-29
    02
    学习周刊-总第212期-2025年第21周
    05-22
    03
    从赵心童世锦赛夺冠聊聊我的斯诺克情缘
    05-16
    更多文章>
    Theme by Vdoing | Copyright © 2017-2025 | 点击查看十年之约 | 浙ICP备18057030号
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式