笔记技巧

摘要

为了让读者阅读时，不处于大片黑白的世界里，我们需要掌握更多丰富的笔记表现力😸

2025-03-31 @Teek

使用 emoji 表情

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

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

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

效果如下：

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

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

分享一些 emoji 网站：

Markdown 所有支持的 emoji 列表
emoji 表情备忘录：有很多表情的格式
emoji 表情：有很多表情可以 copy
gitmoji 通过 emoji 表达 git 的操作内容

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

外部链接

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

[Teek 官网](https://teek.tianke99.cn/)

效果：

Teek 官网

文本高亮

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

<mark> 标签可用于文字的突出，如果是一段字符，则使用 `` 包裹起来。

`Teek` 是一款 <mark>轻量 & 简洁高效 & 灵活配置</mark>的 Vitepress 主题。

Teek 是一款轻量 & 简洁高效 & 灵活配置的 Vitepress 主题。

内置徽章

输入：

#### 《沁园春·雪》 <Badge text="摘"/>

北国风光<Badge text="注释" type="warning"/>，千里冰封，万里雪飘。

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

text：显示的文本
type：info | tip | warning | danger，默认是 tip

输出：

《沁园春·雪》摘

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

译文: 北方的风光。

外置徽章

如果想用更多的自定义徽章，可使用 Shields来生成

![stars](https://img.shields.io/github/stars/Kele-Bingtang/vitepress-theme-teek)
![Teek badge](https://img.shields.io/npm/v/vitepress-theme-teek.svg?style=flat-square)
![kbt](https://img.shields.io/badge/teek-天客-green)

Star

NPM Download

想了解更多 Shields 的使用，请访问 Shields。

TODO 待办列表

输出：

吃饭
睡觉
打豆豆

输入：

markdown

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

确保 [ ] 里有一个空格。

提示

支持所有列表语法，如：1.、-、+、* 等。

分享卡片列表

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

输入：

yml

::: shareCard
```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.jsdelivr.net/gh/xugaoyi/image_store@master/blog/20200103123203.jpg
  link: https://xugaoyi.com/
  bgColor: '#B9D59C'
  textColor: '#3B551F'
```
:::

输出：

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

yml

::: shareCard
```yaml
- name: 《静夜思》
  desc: 床前明月光，疑是地上霜。举头望明月，低头思故乡。
  bgColor: '#F0DFB1'
  textColor: '#242A38'

- name: Vdoing
  desc: 🚀一款简洁高效的VuePress 知识管理&博客(blog) 主题
  link: https://github.com/xugaoyi/vuepress-theme-vdoing
  bgColor: '#DFEEE7'
  textColor: '#2A3344'
```
:::

图文卡片列表

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

输入：

yaml

::: imgCard 2
```yaml
- img: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200529162253.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容 # 描述，可选
  author: Teek # 作者，可选
  avatar: https://testingcf.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar1.png # 头像，可选
- img: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100256.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: Teek
  avatar: https://testingcf.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar1.png
- img: https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200530100257.jpg
  link: https://xugaoyi.com/
  name: 标题
  desc: 描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容
  author: Teek
  avatar: https://testingcf.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar1.png
```
:::

输出：

标题

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

标题

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

标题

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

Demo 容器

Demo 容器用于展示编写的 Vue 组件输出，且支持查看源代码、复制源代码、去 Github 编辑、去 Playground 编辑功能：

输出：

markdown

::: demo
button-demo
:::

Demo 容器默认在项目根目录的 examples 目录下寻找 button-demo.vue，目录解构如下：

.
├─ .vitepress       # 默认基于 vitepress（项目根目录）层级下的  examples 目录扫描
├─ examples
│  ├─ button-demo.vue

自定义容器

自定义容器可以通过它们的类型、标题和内容来定义。

默认标题

输入：

::: note
This is an note box.
:::

::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: details
This is a details block.
:::

::: center
Markdown 拓展
:::

::: tip 摘要
很久之前，我决定踏上的这条路，映照了我与未来的因果。
::: right
2021-11-13 @Teek
:::

输出：

NOTE

This is an note box.

信息

This is an info box.

提示

This is a tip.

警告

This is a warning.

危险

This is a dangerous warning.

详细信息

This is a details block.

Markdown 拓展

摘要

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

2021-11-13 @Teek

自定义标题

可以通过在容器的 type 之后附加文本来设置自定义标题。

输入：

::: danger STOP
危险区域，请勿继续
:::

::: details 点我查看代码

```js
console.log("Hello, Vitepress!");
```

:::

输出：

STOP

危险区域，请勿继续

点我查看代码

console.log("Hello, Teek!");

GitHub 风格的警报

VitePress 同样支持以标注的方式渲染 GitHub 风格的警报。

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

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

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

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

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

NOTE

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

TIP

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

IMPORTANT

对用户达成目标至关重要的信息。

WARNING

因为可能存在风险，所以需要用户立即关注的关键内容。

CAUTION

行为可能带来的负面影响。

自定义锚点

要为标题指定自定义锚点而不是使用自动生成的锚点，请向标题添加后缀：

# 使用自定义锚点 {#my-anchor}

这允许将标题链接为 #my-anchor，而不是默认的 #使用自定义锚点。

GitHub 风格的表格

输入：

| Tables        |      Are      |  Cool |
| ------------- | :-----------: | ----: |
| col 3 is      | right-aligned | $1600 |
| col 2 is      |   centered    |   $12 |
| zebra stripes |   are neat    |    $1 |

输出：

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

目录表 (TOC)

输入：

[[toc]]

输出：

可以使用 markdown.toc 选项配置 TOC 的呈现效果。

代码块中的语法高亮

VitePress 使用 Shiki 在 Markdown 代码块中使用彩色文本实现语法高亮。Shiki 支持多种编程语言。需要做的就是将有效的语言别名附加到代码块的开头：

输入：

```js
export default {
  name: 'MyComponent',
  // ...
}
```

```html
<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>
```

输出：

export default {
  name: "MyComponent",
  // ...
};

html

<ul>
  <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
</ul>

在 Shiki 的代码仓库中，可以找到合法的编程语言列表。

在代码块中实现行高亮

输入：

```js{4}
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```

输出：

export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}

除了单行之外，还可以指定多个单行、多行，或两者均指定：

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

输入：

```js{1,4,6-8}
export default { // Highlighted
  data () {
    return {
      msg: `Highlighted!
      This line isn't highlighted,
      but this and the next 2 are.`,
      motd: 'VitePress is awesome',
      lorem: 'ipsum'
    }
  }
}
```

输出：

export default { // Highlighted
  data () {
    return {
      msg: `Highlighted!
      This line isn't highlighted,
      but this and the next 2 are.`,
      motd: 'VitePress is awesome',
      lorem: 'ipsum',
    }
  }
}

也可以使用 // [!code highlight] 注释实现行高亮。

输入：

```js
export default {
  data () {
    return {
      msg: 'Highlighted!' // [!!code highlight]
    }
  }
}
```

输出：

export default {
  data() {
    return {
      msg: "Highlighted!", 
    };
  },
};

代码块中聚焦

在某一行上添加 // [!code focus] 注释将聚焦它并模糊代码的其他部分。

此外，可以使用 // [!code focus:<lines>] 定义要聚焦的行数。

输入：

```js
export default {
  data () {
    return {
      msg: 'Focused!' // [!!code focus]
    }
  }
}
```

输出：

export default {
  data() {
    return {
      msg: "Focused!", 
    };
  },
};

代码块中的颜色差异

在某一行添加 // [!code --] 或 // [!code ++] 注释将会为该行创建 diff，同时保留代码块的颜色。

输入：

```js
export default {
  data () {
    return {
      msg: 'Removed' // [!!code --]
      msg: 'Added' // [!!code ++]
    }
  }
}
```

输出：

export default {
  data () {
    return {
      msg: 'Removed'
      msg: 'Added'
    }
  }
}

高亮“错误”和“警告”

在某一行添加 // [!code warning] 或 // [!code error] 注释将会为该行相应的着色。

输入：

```js
export default {
  data () {
    return {
      msg: 'Error', // [!!code error]
      msg: 'Warning' // [!!code warning]
    }
  }
}
```

输出：

export default {
  data() {
    return {
      msg: "Error", 
      msg: "Warning", 
    };
  },
};

行号

可以通过以下配置为每个代码块启用行号：

export default {
  markdown: {
    lineNumbers: true,
  },
};

可以在代码块中添加 :line-numbers / :no-line-numbers 标记来覆盖在配置中的设置。

还可以通过在 :line-numbers 之后添加 = 来自定义起始行号，例如 :line-numbers=2 表示代码块中的行号从 2 开始。

输入：

```ts {1}
// 默认禁用行号
const line2 = "This is line 2";
const line3 = "This is line 3";
```

```ts:line-numbers {1}
// 启用行号
const line2 = 'This is line 2'
const line3 = 'This is line 3'
```

```ts:line-numbers=2 {1}
// 行号已启用，并从 2 开始
const line3 = 'This is line 3'
const line4 = 'This is line 4'
```

输出：

// 默认禁用行号
const line2 = "This is line 2";
const line3 = "This is line 3";

// 启用行号
const line2 = 'This is line 2'
const line3 = 'This is line 3'

// 行号已启用，并从 2 开始
const line3 = 'This is line 3'
const line4 = 'This is line 4'

代码组

可以像这样对多个代码块进行分组：

输入：

::: code-group

```js [config.js]
/**
 * @type {import('vitepress').UserConfig}
 */
const config = {
  // ...
};

export default config;
```

```ts [config.ts]
import type { UserConfig } from "vitepress";

const config: UserConfig = {
  // ...
};

export default config;
```

:::

输出：

config.jsconfig.ts

/**
 * @type {import('vitepress').UserConfig}
 */
const config = {
  // ...
};

export default config;

import type { UserConfig } from "vitepress";

const config: UserConfig = {
  // ...
};

export default config;

图片懒加载

通过在配置文件中将 lazyLoading 设置为 true，可以为通过 markdown 添加的每张图片启用懒加载。

export default {
  markdown: {
    image: {
      // 默认禁用；设置为 true 可为所有图片启用懒加载。
      lazyLoading: true,
    },
  },
};

笔记技巧 ​

使用 emoji 表情 ​

外部链接 ​

文本高亮 ​

内置徽章 ​

《沁园春·雪》 摘 ​

外置徽章 ​

TODO 待办列表 ​

分享卡片列表 ​

图文卡片列表 ​

Demo 容器 ​

自定义容器 ​

默认标题 ​

自定义标题 ​

GitHub 风格的警报 ​

自定义锚点 ​

GitHub 风格的表格 ​

目录表 (TOC) ​

代码块中的语法高亮 ​

在代码块中实现行高亮 ​

代码块中聚焦 ​

代码块中的颜色差异 ​

高亮“错误”和“警告” ​

行号 ​

代码组 ​

图片懒加载 ​