Markdown 拓展

Markdown 拓展

周五 8月 08 2025
1091 字 · 7 分钟

试试右下角的主题颜色切换

TODO 列表

  • [ ] 吃饭
  • [ ] 睡觉
  • [x] 打豆豆

导航卡片

::: navCard 2

YAML
- name: 百度
  desc: 百度——全球最大的中文搜索引擎及最大的中文网站,全球领先的人工智能公司
  link: http://www.baidu.com/
  img: https://img.tukuppt.com/png_preview/00/10/46/IHk8cns6Re.jpg!/fw/780
  badge: 搜索引擎
- name: Google
  desc: 全球最大的搜索引擎公司
  link: http://www.google.com/
  img: https://ts1.cn.mm.bing.net/th/id/R-C.58c0f536ec073452434270fb559c3f8c?rik=SnOUNtUtPLX6ww&riu=http%3a%2f%2fwww.sz4a.cn%2fPublic%2fUploads%2fimage%2f20230303%2f1677839482835474.png&ehk=J1lqoeszPGEWzDOSZQ3JxzXsklfd0QzgrJu6ZVvESKk%3d&risl=&pid=ImgRaw&r=0
  badge: 搜索引擎
  badgeType: tip

:::

分享卡片

::: shareCard 3

YAML
- name: George Chan
  desc: 让我给你讲讲他的传奇故事吧
  avatar: https://z3.ax1x.com/2021/09/30/4oKMVI.jpg
  link: https://cyc0819.top/
  bgColor: "#FFB6C1"
  textColor: "#621529"

- name: butcher2000
  desc: 即使再小的帆,也能远航
  avatar: https://jsd.cdn.zzko.cn/gh/Kele-Bingtang/static/user/20211029181901.png
  link: https://blog.csdn.net/weixin_46827107
  bgColor: "#CBEAFA"
  textColor: "#6854A1"

- name: Evan's blog
  desc: 前端的小学生
  avatar: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103123203.jpg
  link: https://xugaoyi.com/
  bgColor: "#B9D59C"
  textColor: "#3B551F"

- name: 二丫讲梵
  desc: 💻学习📝记录🔗分享
  avatar: https://wiki.eryajf.net/img/logo.png
  link: https://wiki.eryajf.net/
  bgColor: "#FBEBEC"
  textColor: "#603420"

:::

图文卡片

::: imgCard

YAML
- img: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200529162253.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容 # 描述,可选
  author: Evan Xu # 作者,可选
  avatar: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103123203.jpg # 头像,可选
- img: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200530100256.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: Evan Xu
  avatar: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103123203.jpg
- img: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200530100257.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: Evan Xu
  avatar: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103123203.jpg

:::

图文卡片配置风格

::: imgCard

YAML
config:
  cardNum: 2 # 【每行显示的卡片数量,默认为 3】,可在容器名字后面添加,如 ::: imgCard 2。导航卡片和分享卡片都支持该配置项
  target: _blank # 【跳转方式,默认为 _blank,仅支持 _blank | _self】。导航卡片和分享卡片都支持该配置项
  lineClamp: 2 # 【显示描述信息的行数,默认为 2】。导航卡片支持该配置项,分享卡片不支持
  cardGap: 10 # 【每行卡片之间的间隔,默认为 20】。导航卡片和分享卡片都支持该配置项
  imgHeight: 200px # 【图片宽度,默认为 auto】。仅图文卡片支持该配置项
  objectFit: fill # 【设置图片的填充方式,支持 cover | fill | contain | scale-down | none,默认为 cover】。仅图文卡片支持该配置项
  showCode: true # 【是否显示代码块,默认为 false】。导航卡片和分享卡片都支持该配置项

data:
  - img: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200529162253.jpg
    link: https://xugaoyi.com/
    name: 标题
    desc: 描述内容描述内容描述内容描述内容 # 描述,可选
    author: Evan Xu # 作者,可选
    avatar: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103123203.jpg # 头像,可选
  - img: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200530100256.jpg
    link: https://xugaoyi.com/
    name: 标题
    desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
    author: Evan Xu
    avatar: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103123203.jpg
  - img: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200530100257.jpg
    link: https://xugaoyi.com/
    name: 标题
    desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
    author: Evan Xu
    avatar: https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200103123203.jpg

:::

mark 标签

<mark></mark> 标签,可以添加高亮效果。

效果:

  • Teek

使用:

HTML
-
<mark>Teek</mark>

Teek 内置容器

NOTE 容器

::: note 这是一个 note 容器 :::

内容居中容器

::: center 测试 Center :::

::: center

测试标题

(测试二级标题) :::

内容居右容器

居右的内容字体为 14px

::: right 测试 right :::

::: note 摘要

很久之前,我决定踏上的这条路,映照了我与未来的因果。

::: right

2021-11-13 @Teek

:::

VP 容器风格

::: info 这是一个 info 容器 :::

::: tip 这是一个 tip 容器 :::

::: warning 这是一个 warning 容器 :::

::: danger 这是一个 danger 容器 :::

::: details 这是一个 details 容器 :::

Github 容器风格

[!NOTE] 强调用户在快速浏览文档时也不应忽略的重要信息。

[!TIP] 有助于用户更顺利达成目标的建议性信息。

[!IMPORTANT] 对用户达成目标至关重要的信息。

[!WARNING] 因为可能存在风险,所以需要用户立即关注的关键内容。

[!CAUTION] 行为可能带来的负面影响。


Thanks for reading!

Markdown 拓展

周五 8月 08 2025
1091 字 · 7 分钟
-
-

Comments

cover

安和桥

宋冬野