开发工具
程序员日常

Markdown技巧笔记优质

笔记

如果想拥有更多丰富的笔记表现力，让自己阅读时，不处于大片黑白的世界里，本内容会让你的笔记句句深入记忆的深处😸

# 使用 emoji 表情

阅读大片大片的文字难免产生视觉疲劳，而使用 emoji 表情，不仅缓解精神的渐眠，也会胜过千言。

在 markdown 里，使用 :表情: 输入表情，如

你好:smile:，我喜欢:dog:，我小时候经常拿:100:分哦~~~，欢迎来到我的博客:heart:，一起学习吧:muscle:

效果如下：

你好😄，我喜欢🐶，我小时候经常拿💯分哦~~~，欢迎来到我的博客❤️，一起学习吧💪

很多指令肯定是记不了的，我们可以也可以去特定的网站获取表情的格式。也可以 copy 一个表情过来，markdown 自动解析表情。

分享一些 emoji 网站：

emoji 表情备忘录 (opens new window)：有很多表情的格式(:表情:)
emoji 表情 (opens new window)：有很多表情可以copy
gitmoji (opens new window) 通过 emoji 表达 git 的操作内容

windows 系统下按 Win + . 快速打开表情选择框（不是右侧小键盘的 .）

# 外部链接

使用外部链接，文字会变色，并且可以点击跳转，格式如下：

[VuePress官网](https://vuepress.vuejs.org/zh/)

效果：

VuePress官网 (opens new window)

# 文本高亮

使用 <mark> 标签或者 `` 让文本高亮。

<mark> 标签我经常用于文字的突出，如果是一段字符串，我是用的是 `` 包裹起来。

`Vdoing` 是一款简洁高效的 <mark>知识管理&博客</mark> 主题

Vdoing 是一款简洁高效的知识管理&博客主题

# 代码高亮

突出代码块的某些行，使用 {行数-行数}、{行数,行数} 格式，如

输入：

``` js {2,5-7,13}
return {
      // 数据
      options,
      activeKey,
      sourceLabels,
      sourceForm,
      addForm,
      addRules,
      sourceRules,
      // 函数
      displayRender,
      submitProdoce,
      onAddClose,
    };
```

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

输出：

return {
      // 数据
      options,
      activeKey,
      sourceLabels,
      sourceForm,
      addForm,
      addRules,
      sourceRules,
      // 函数
      displayRender,
      submitProdoce,
      onAddClose,
    };

1
2
3
4
5
6
7
8
9
10
11
12
13
14

行数区间: 例如 {5-8}, {3-10}, {10-17}
多个单行: 例如 {4,7,9}
行数区间与多个单行: 例如 {4,7-13,16,23-27,40}

# 徽章

# 内置

官方自带。详细使用可前往官网 Badge (opens new window)。

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

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

1
2
3
4

type 有三个参数：tip、warning、error。默认是 tip
vertical 有两个参数：top、middle。默认是 top

直接在 markdown 文件使用，效果如下：

# 《沁园春·雪》摘

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

译文: 北方的风光。

# 外置

如果想用更多的自定义徽章，可使用 Shields (opens new window)来生成

![stars](https://img.shields.io/github/stars/Kele-Bingtang/notes-blog)
![stars](https://img.shields.io/github/stars/Kele-Bingtang/notes-blog?style=social)
![kbt](https://img.shields.io/badge/kbt-冰糖-green)

1
2
3

访问量

如果没接触过 Shields，Shields 教程传送门

# 信息框容器

以下一些内容是 Vdoing 主题提供，并非官方提供。

输入：

::: tip
这是一条提示
:::

::: warning
这是一条注意
:::

::: danger
这是一条警告
:::

::: note
这是笔记容器，主题自带，官方没有
:::

::: tip 我的自定义标题
自定义标题的提示框
:::

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

输出：

提示

这是一条提示

注意

这是一条注意

警告

这是一条警告

笔记

这是笔记容器，主题自带，官方没有

我的自定义标题

自定义标题的提示框

如果想要折叠的容器，如下：也可以自定义标题

::: details
这是一个详情块，在 IE / Edge 中不生效
```js
console.log('这是一个详情块')
```
:::

1
2
3
4
5
6

点击查看

这是一个详情块，在 IE / Edge 中不生效

console.log('这是一个详情块')

# 布局容器

::: center
  ### 我是居中的内容
  （可用于标题、图片等的居中）
:::

::: right
  [我是右浮动的内容](https://cdn.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar2.png)
:::

::: theorem VuePress
Vue 驱动的静态网站生成器
::: right
来自 [官网](https://vuepress.vuejs.org/zh/)
:::

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 我是居中的内容

（可用于标题、图片等的居中）

我是右浮动的内容 (opens new window)

VuePress

Vue 驱动的静态网站生成器

来自 VuePress官网 (opens new window)

提示

没有 left 和 top、bottom

# 代码块选项卡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

npm install vuepress-theme-vdoing -D

// Make sure to add code blocks to your code group

注意

请在 <code-group> 标签与 markdown 内容之间使用空行隔开，否则可能会解析不出来。

提示

Vdoing 解释该组件仅适用于放置代码块，放其他内容在体验上并不友好。经过测试，我放入文字也是可以的。

而且 <code-block> 放在 <code-group> 里时，首行需要缩进两个空格，经过测试，四个空格出问题。

如果你喜欢 ::: tabs 代替 <code-group>，那么我们可以下载 vuepress-plugin-tabs 插件。点击跳到 Tabs 插件安装。

# 普通卡片列表

如果想使用友链功能，但是 vdoing 主题并没有直接在首页实现该功能，要么使用 卡片列表，要么自己手动实现html。而 卡片列表 目前只能使用在 markdown 文档里，下方介绍。

普通卡片列表容器，可用于 友情链接、项目推荐、诗词展示 等。

输入：

::: cardList
```yaml
- name: George Chan
  desc: 让我给你讲讲他的传奇故事吧
  avatar: https://z3.ax1x.com/2021/09/30/4oKMVI.jpg
  link: https://cyc0819.top/
  bgColor: '#FFB6C1' # 可选，默认 var(--bodyBg)。颜色值有 # 号时请添加单引号
  textColor: '#621529' # 可选，默认 var(--textColor)
  
- name: butcher2000
  desc: 即使再小的帆，也能远航
  avatar: https://cdn.jsdelivr.net/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://cdn.staticaly.com/gh/xugaoyi/image_store@master/blog/20200103123203.jpg
  link: https://xugaoyi.com/
  bgColor: '#B9D59C'
  textColor: '#3B551F'
```
:::

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

输出：

George Chan

让我给你讲讲他的传奇故事吧

butcher2000

即使再小的帆，也能远航

Evan's blog

前端的小学生

- name: George Chan
  desc: 让我给你讲讲他的传奇故事吧
  avatar: https://z3.ax1x.com/2021/09/30/4oKMVI.jpg
  link: https://cyc0819.top/
  bgColor: '#FFB6C1' # 可选，默认 var(--bodyBg)。颜色值有 # 号时请添加单引号
  textColor: '#621529' # 可选，默认 var(--textColor)
  
- name: butcher2000
  desc: 即使再小的帆，也能远航
  avatar: https://cdn.jsdelivr.net/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://cdn.staticaly.com/gh/xugaoyi/image_store@master/blog/20200103123203.jpg
  link: https://xugaoyi.com/
  bgColor: '#B9D59C'
  textColor: '#3B551F'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 普通卡片语法

::: cardList <每行显示数量>
``` yaml
- name: 名称
  desc: 描述
  avatar: https://xxx.jpg # 头像，可选
  link: https://xxx/ # 链接，可选
  bgColor: '#CBEAFA' # 背景色，可选，默认var(--bodyBg)。颜色值有#号时请添加引号
  textColor: '#6854A1' # 文本色，可选，默认var(--textColor)
```
:::

1
2
3
4
5
6
7
8
9
10

<每行显示数量>：一行内显示多少个卡片，值范围 1~4，默认是 3 个，上方的卡片正好是三个，如果再多一个卡片，就会被换到下一行
代码块需指定语言为 yaml
代码块内是一个 yaml 格式的数组列表
数组成员的属性有：
- name：名称
- desc：描述
- avatar：头像，可选
- link：链接，可选
- bgColor：背景色，可选，默认 var(--bodyBg)。颜色值有 # 号时请添加引号
- textColor：文本色，可选，默认 var(--textColor)

不指定颜色，默认为白色，如下演示：

::: cardList 2
```yaml
- name: 《静夜思》
  desc: 床前明月光，疑是地上霜。举头望明月，低头思故乡。
  bgColor: '#F0DFB1'
  textColor: '#242A38'
  
- name: Vdoing
  desc: 🚀一款简洁高效的VuePress 知识管理&博客(blog) 主题
  link: https://github.com/xugaoyi/vuepress-theme-vdoing
  bgColor: '#DFEEE7'
  textColor: '#2A3344'
```
:::

1
2
3
4
5
6
7
8
9
10
11
12
13
14

《静夜思》

床前明月光，疑是地上霜。举头望明月，低头思故乡。

Vdoing

🚀一款简洁高效的VuePress 知识管理&博客(blog) 主题

- name: 《静夜思》
  desc: 床前明月光，疑是地上霜。举头望明月，低头思故乡。
  
- name: Vdoing
  desc: 🚀一款简洁高效的VuePress 知识管理&博客(blog) 主题
  link: https://github.com/xugaoyi/vuepress-theme-vdoing
  bgColor: '#DFEEE7'
  textColor: '#2A3344'

1
2
3
4
5
6
7
8

# 图文卡片列表v1.1.0 +

图文卡片列表容器，可用于 项目展示、产品展示 等。

先看效果：

标题

描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容

Young Kbt

标题

描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容

Young Kbt

标题

描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容

Young Kbt

- img: https://cdn.staticaly.com/gh/xugaoyi/image_store@master/blog/20200529162253.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容 # 描述，可选
  author: Young Kbt # 作者，可选
  avatar: https://cdn.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar2.png # 头像，可选
  
- img: https://cdn.staticaly.com/gh/xugaoyi/image_store@master/blog/20200530100256.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: Young Kbt
  avatar: https://cdn.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar2.png
  
- img: https://cdn.staticaly.com/gh/xugaoyi/image_store@master/blog/20200530100257.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: Young Kbt
  avatar: https://cdn.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar2.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

::: cardImgList
```yaml
- img: https://cdn.staticaly.com/gh/xugaoyi/image_store@master/blog/20200529162253.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容 # 描述，可选
  author: Young Kbt # 作者，可选
  avatar: https://cdn.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar2.png # 头像，可选
  
- img: https://cdn.staticaly.com/gh/xugaoyi/image_store@master/blog/20200530100256.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: Young Kbt
  avatar: https://cdn.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar2.png
  
- img: https://cdn.staticaly.com/gh/xugaoyi/image_store@master/blog/20200530100257.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: Young Kbt
  avatar: https://cdn.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar2.png
```
:::

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 图文卡片语法

::: cardImgList <每行显示数量>
``` yaml
- img: https://xxx.jpg # 图片地址
  link: https://xxx.com # 链接地址
  name: 标题
  desc: 描述 # 可选
  author: 作者名称 # 可选
  avatar: https://xxx.jpg # 作者头像，可选
```
:::

1
2
3
4
5
6
7
8
9
10

<每行显示数量> 数字，表示每行最多显示多少个，选值范围 1~4，默认 3。在小屏时会根据屏幕宽度减少每行显示数量。
代码块需指定语言为 yaml
代码块内是一个 yaml 格式的数组列表
数组成员的属性有：
- img：图片地址
- link：链接地址
- name：标题
- desc：描述，可选
- author：作者名称，可选
- avatar：作者头像，可选

# Tabs插件

官网：https://github.com/pskordilakis/vuepress-plugin-tabs (opens new window)

安装插件：

:::: tabs :options="{ useUrlFragment: false }"

::: tab yarn

yarn add vuepress-plugin-tabs vue-tabs-component

:::

::: tab npm

npm install vuepress-plugin-tabs vue-tabs-component

:::

::::

在 .vuepress/styles/index.styl 添加如下内容：

@require '~vuepress-plugin-tabs/dist/themes/default.styl'

在 .vuepress/config.js 中添加如下内容：

module.exports = {
  plugins: [ 'tabs' ]
}

1
2
3

启动项目，下面是使用的 demo。

:::: tabs cache-lifetime="5" :options="{ useUrlFragment: false }"
::: tab title 
**markdown content**
:::
::: tab javascript 
``` javascript
() => {
  console.log('Javascript code example')
}
```
:::
::::

1
2
3
4
5
6
7
8
9
10
11
12

cache-lifetime 是存活时间，默认 5 分钟，即关闭网页五分钟内回来，当时选中的哪个 tabs，就会显示该内容，5 分钟后默认回到到第一个 tabs。

:options="{ useUrlFragment: false }" 建议写上，不然每次点击任意 tabs，都会刷新一次当前页面，没有必要。

效果：

:::: tabs cache-lifetime="5" :options="{ useUrlFragment: false }" ::: tab title markdown content ::: ::: tab javascript

() => {
  console.log('Javascript code example')
}

1
2
3

::: ::::

# Demo插件（因为兼容问题，目前已经不使用）

为了更直观的展示一些代码的效果，博客添加了 demo 模块插件，可查看 demo、源码，以及跳转到 codepen 在线编辑。目前支持 vue、react 或 native js 示例。 demo 目前支持 [vanilla] 、[React]、[Vue]，如果不填写 []，默认是 [vue]。

插件官网：https://github.com/xiguaxigua/vuepress-plugin-demo-block/ (opens new window)

演示代码：

<!-- Vue 的 demo -->
::: demo
```html
<template>
  <div class="box-vue">Vue {{ message }}</div>
</template>
<script>
export default {
  data: () => ({ message: 'Hello World' })
}
</script>
<style>
.box-vue { color: red; }
</style>
```
:::

<!-- React 的 demo -->
::: demo [react]
```js
export default class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = { message: 'Hello World' }
  }
  render () {
    return (
      <div className="box-react">
        React {this.state.message}
      </div>
    )
  }
}
App.__style__ = `
  .box-react { color: red; }   
`
```
:::

<!-- vanilla 的 demo -->
::: demo [vanilla]
```html
<html>
  <div id="vanilla-box"></div>
</html>
<script>
  var box = document.getElementById('vanilla-box')
  box.innerHTML = 'Hello World! Welcome to EB'
</script>
<style>
#vanilla-box {
  color: #11a8cd;   /* 标题颜色 */
}
</style>

```
:::

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

输出结果：

编辑此页

上次更新: 2025/01/05, 02:09:04

← MarkDown语法总览解决Win11右键菜单问题→

Markdown技巧笔记优质

# 使用 emoji 表情

# 外部链接

# 文本高亮

# 代码高亮

# 徽章

# 内置

# 《沁园春·雪》 摘

# 外置

# 信息框容器

# 布局容器

# 我是居中的内容

# 代码块选项卡v1.8.0+

# 普通卡片列表

# 普通卡片语法

# 图文卡片列表v1.1.0 +

# 图文卡片语法

# Tabs插件

# Demo插件（因为兼容问题，目前已经不使用）

# 《沁园春·雪》摘