在 Markdown 中实现颜色字体和高亮

Aqua_chang

已于 2025-04-08 14:26:14 修改

阅读量1.6k

点赞数 27

分类专栏： markdown教程文章标签：青少年编程 css html 学习 notion onenote

于 2025-04-08 12:28:09 首次发布

本文链接：https://blog.csdn.net/Aqua_chang/article/details/147003887

版权

markdown教程专栏收录该内容

4 篇文章

订阅专栏

在 Markdown 中实现颜色字体和高亮，需要结合 HTML/CSS，但无需记忆大量色号，一些markdown编辑器也提供富文本支持，如typora，notion，onenote等，有些编辑器需要下载插件实现富文本支持。

1.使用内联样式

改变文字颜色
可以使用内联样式中的color属性来改变文字颜色。
例如：
这是红色的文字。
效果：
这是红色的文字。
高亮文本
Markdown原生并不支持文本高亮功能，但你可以通过内联样式结合HTML标签来实现这一效果。
例如：

这是<span style="background-color: yellow;">黄色高亮</span>的文本，
这是<span style="background-color: pink;">粉色高亮</span>的文本，
这是<span style="background-color: blue;">蓝色高亮</span>的文本，
这是<span style="background-color: green;">绿色高亮</span>的文本。

效果：
这是黄色高亮的文本，
这是粉色高亮的文本，
这是蓝色高亮的文本，
这是绿色高亮的文本。

2. 专用工具简化操作

Typora：
- 使用内联公式改变文字颜色
1. 首先，确保在Typora的偏好设置中勾选了“内联公式”选项。
2. 然后，在需要改变颜色的文字前后分别输入 $，并按下 E sc 键， T y p or a 会自动在两个$ 之间插入公式。
3. 在公式中输入LaTeX颜色代码，例如{\color{red} 红色文字}，这样文字就会变成红色。
- 高亮文本
1. 打开高亮功能
  在Typora的偏好设置中的Markdown选项卡中，勾选“高亮”选项（尽管这个选项名称可能有些误导，但它实际上启用了高亮功能）。
  2.使用高亮语法
  一旦高亮功能打开，你就可以在文档中使用==高亮文本==这样的语法来标记需要高亮的文字了。
VS Code + Markdown All in One：
通过快捷键或命令面板插入颜色代码。
Notion：
- 使用高亮块
  Notion提供了高亮块（Callout）功能，你可以通过添加高亮块来突出显示特定的文本。高亮块通常具有不同的颜色和图标，可以帮助你快速识别重要的信息。要添加高亮块，你可以将鼠标悬停在某行上，点击“+”号，在弹出的菜单中选择“Callout”，然后输入你的文本。
- 使用快捷键
  在Notion中，你也可以使用快捷键来快速改变文字颜色。例如，你可以使用⌘/Ctrl + /（Mac/Windows）来打开颜色选择器，然后选择你想要的颜色。不过，请注意，这种方法可能因Notion的版本和更新而有所不同。
- 通过插件或第三方工具
  此外，你还可以探索一些插件或第三方工具来增强Notion的高亮和颜色更改功能。这些工具可能提供了更丰富的选项和更直观的操作界面。
CSDN
- CSDN可以通过markdown扩展语法实现高亮，具体做法是用==包裹需要高亮的文字，但这种语法不是所有编辑器通用
 例如：
 这是需要==高亮==的文字
 效果：
 这是需要高亮的文字
- 使用标签（兼容性更高）设置字体颜色。是HTML语言的旧版标签，兼容性仅限于 HTML4 及以下，HTML5 中已废弃，推荐使用 CSS 替代。
 例如：
 这是红色的文字
 效果：
 这是红色的文字

3. 使用 CSS 变量（进阶方法）

在文档开头用CSS自定义属性（CSS Variables）的语法，定义颜色变量，后续直接调用变量名，无需记忆具体色号：

变量定义层

<style>
  :root {
    --red: #ff0000;
    --blue: #0000ff;
    --highlight-yellow: #ffff0033; /* 33 是透明度 */
  }
  .text-red { color: var(--red); }
  .highlight { background-color: var(--highlight-yellow); }
</style>

–:root表示文档根元素（即 <html>），在此定义变量具有全局作用域

–变量名以 – 开头（如 --red），这是 CSS 变量的命名规范

–值可以是任何合法的 CSS 值（颜色、尺寸、字体等），这里存储了三种颜色定义

变量使用层

这是一段<span class="text-red">红色文字</span>，  
这是<span class="highlight">高亮内容</span>。

–通过 var() 函数调用变量（如 var(--red)）

–支持变量值的动态继承（如果子元素重新定义同名变量，会覆盖父级值）

–浏览器会自动处理颜色格式转换（如将十六进制转为 RGB）

HTML 应用层

<span class="text-red">红色文字</span>
<span class="highlight">高亮内容</span>

– 通过 class 名直接应用预定义的样式规则

– 修改颜色时只需改动 :root 中的变量值，实现全局生效

4. 预定义样式类（进阶方法）

在 CSS 中定义常用样式类，定义之后可以直接复用：

–样式定义层：

<style>
.note {
  background-color: #f8f9fa; /* 浅灰色背景 */
  border: 1px solid #dee2e6; /* 灰色边框 */
  border-radius: 4px; /* 圆角 */
  padding: 12px; /* 内边距 */
  margin: 10px 0; /* 外边距 */
  color: #555; /* 文字颜色 */
} /*这个.note定义了一个全局样式*/
  .note h3 {
  color: #007bff; /* 蓝色标题 */
  margin-top: 0; /* 去除标题顶部外边距 */
} /*这个.note定义了3级标题的样式*/
</style>

–样式使用层：

<span class="note">这是一个预定义的灰色高亮样式</span>

作用：直接为 .note 类定义具体的全局样式，这些样式会应用到所有添加了 class="note" 的元素上。这种方法适用于一些为一些特定类设置样式，比如.note h3 {}是为所有3级标题设置样式。

5. 用工具生成色号

在线工具：
使用 Adobe Color 或 Coolors 生成配色方案，直接复制色号，可以把样式改变成任何你想要的颜色。
编辑器插件：
在 VS Code 或 Typora 中安装颜色选择器插件（如 Color Picker），点击选择颜色。

总结

无需记忆色号：通过变量、预定义类或工具生成颜色。
灵活性与效率：结合 CSS 可实现精细控制，但日常笔记用预定义类或工具选择颜色更高效。
推荐工具流：Typora（所见即所得） + VS Code（代码级控制），按需选择。