方法一：CSS style 属性 ⚓︎

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 基础用法：设置字体颜色 -->
<p style="color: red;">这段文字是红色的</p>

<!-- 使用十六进制颜色码（更精准） -->
<p style="color: #1E90FF;">这段文字是深蓝色的（道奇蓝）</p>

<!-- 使用 RGB/RGBA（支持透明度） -->
<p style="color: rgb(255, 165, 0);">这段文字是橙色的</p>
<p style="color: rgba(0, 128, 0, 0.7);">这段文字是半透明的绿色</p>

<!-- 结合加粗等样式 -->
<p style="color: purple; font-weight: bold;">这段紫色文字是加粗的</p>

效果：

这段文字是红色的

这段文字是深蓝色的（道奇蓝）

这段文字是橙色的

这段文字是半透明的绿色

这段紫色文字是加粗的

屏幕颜色拾取器

如果你需要某一颜色的 HEX、RGB、RGBA、HSL、HSLA、HSV、HSVA、CMYK、CMYKA 格式颜色码，可以使用下方工具来提取。

屏幕颜色拾取器

方法二：JavaScript 脚本 ⚓︎

在 Hexo 根目录创建一个 scripts 文件夹，在文件夹里创建一个名为 color-text.js 的 JavaScript 文件，并将下面的代码写入。或者点击 下载 color-text.js 文件。

1
2
3
4
hexo.extend.tag.register('color', function (args, content) {
    const color = args[0] || 'black';
    return `<span style="color: ${color};">${content}</span>`;
}, { ends: true });

之后在 Markdown 中就可以这样用：

1
2
3
{% color red %}这段文字是红色的{% endcolor %}
{% color #FF69B4 %}这段文字是粉色的{% endcolor %}
{% color green %}这段文字是绿色的{% endcolor %}

效果：

这段文字是红色的
这段文字是粉色的
这段文字是绿色的

扩展：支持颜色 + 字号双参数（下载 color-text-extension.js 文件）

1
2
3
4
5
6
7
hexo.extend.tag.register('color', function (args, content) {
    const color = args[0] || 'black';
    const size = args[1] || '';
    let style = `color: ${color};`;
    if (size) style += `font-size:${size};`
    return `<span style="${style}">${content}</span>`;
}, { ends: true });

使用格式：

1
{% color red 27px %}这段文字是红色的 27 号字{% endcolor %}

效果：

这段文字是红色的 27 号字