如何在Markdown中给文本应用颜色

Question

我想使用Markdown来存储文本信息。但是快速谷歌搜索表明Markdown不支持颜色。同样，在Stack Overflow和GitHub markdown中也不支持颜色。

是否有任何一种Markdown风格可以允许有彩色文本？

- Mahesha999

---

我可以帮忙翻译。举个例子，您可以通过pandoc将它们混合使用：<span style="color:red"> *some emphasized markdown text*</span>。如果您询问的是原生Markdown是否支持颜色处理，我认为是不支持的。请注意，我的翻译尽量保持原意，但会更通俗易懂，没有额外内容或解释。 - scoa

这个答案可能对你有所帮助，因为它对我很有用... - Curiosity

如https://dev59.com/mlsW5IYBdhLWcg3wDzgu#61637203答案中所述，如果使用彩色表情符号，可以在Markdown文档中添加一些颜色，而不必使用HTML和CSS。当然，并非所有情况都适用于此方法，但例如，如果您想将单词“true”着为绿色，将单词“false”着为红色，则可以这样做：✅ true and ❌ false。因此，您仍然可以获得颜色提示，但无需将整个文本字符串染色。 - sideshowbarker

Answer 1

简而言之

Markdown不支持颜色，但是你可以在Markdown中嵌入HTML，例如：

<span style="color:blue">some *blue* text</span>.

更长的答案

正如原始/官方语法规则所述（重点添加）：

Markdown的语法旨在用于一个目的：作为编写网络内容的格式。

Markdown不是HTML的替代品，甚至与之相距甚远。它的语法非常简单，仅对应一小部分HTML标签。这个想法并不是要创建一个使插入HTML标签更容易的语法。我认为，插入HTML标签已经很容易了。Markdown的思路是使散文易于阅读、编写和编辑。HTML是一种发布格式；Markdown是一种编写格式。因此，Markdown的格式化语法只涉及可以用纯文本传达的问题。

对于任何未被Markdown语法覆盖的标记，您只需使用HTML本身。

由于它不是“发布格式”，因此为文本着色提供一种方式超出了Markdown的范围。尽管如此，它并非不可能，因为您可以包含原始HTML（而HTML是一种发布格式）。例如，以下Markdown文本（由@scoa在评论中建议）：

Some Markdown text with <span style="color:blue">some *blue* text</span>.

会生成以下HTML：

<p>Some Markdown text with <span style="color:blue">some <em>blue</em> text</span>.</p>

现在，StackOverflow（以及可能的GitHub）将剥离原始HTML（作为安全措施），因此您会失去颜色，但它应该适用于任何标准的Markdown实现。

另一种可能性是使用最初由Markuru Markdown实现引入的非标准属性列表，后来被少数 其他 采用（可能还有更多或略有不同的实现相同的想法，例如pandoc中的div和span属性）。在这种情况下，您可以为段落或内联元素分配一个类，然后使用CSS为类定义颜色。但是，您绝对必须使用少数支持非标准功能的实现之一，并且您的文档不再可移植到其他系统。

- Waylan

---

谢谢。通过更多的阅读，Markdown是一种特定的语言（比如C语言），属于所谓的“轻量级标记语言”类别。 - user5754355

谢谢。我希望我能在这里发布一个炸薯条的gif图。你的回答非常简洁，简直是<span style="color:green"><i>太棒了</i></span>。 - undefined

Answer 2

当您想要使用纯Markdown（不带嵌套的HTML）时，您可以使用表情符号来突出显示文件中的某个片段，例如⚠️警告⚠️、重要❗或新。

- TeWu

---

这里有一个 Markdown 表情符号速查表，例如使用 :warning: 可以插入警告三角形符号：https://github.com/ikatyang/emoji-cheat-sheet。这些符号可以在许多 Markdown 方言中使用，包括 GitHub 和 Slack。 - Simon Elms

要在VSCode中使用Markdown表情符号，您需要安装Markdown emoji或emojisense扩展之一。 - paolopazzo

@paolopazzo 如果方便的话，您绝对可以使用扩展程序，但并非必须。还有其他选项，例如：1）从网站（如Emojipedia或Unicode Full Emoji List）复制和粘贴表情符号，2）在Windows上，您可以按Windows徽标键+句点键输入表情符号。 - TeWu

是的，完全正确，我认为这可能对阅读您评论的人有用。在任何操作系统上，只需键入：emoji_you_want:，然后就完成了。 - paolopazzo

Answer 3

我已经开始使用Markdown将一些文档发布到内部网站，供公司内部用户使用。这是一种方便的方式，可以共享文档，但查看者无法编辑。

因此，对文字进行彩色标记是“很棒的”。我已经使用了几种类似的工具，效果非常好。

<span style="color:blue">some *This is Blue italic.* text</span>

变成 这是蓝色斜体。

和

<span style="color:red">some **This is Red Bold.** text</span>

变成这是红色加粗。

我喜欢它的灵活性和易用性。

- Elton

---

这个解决方案在托管在Github上的markdown文件中无效。 - undefined

Answer 4

我喜欢重新定义现有标签的想法，如果它们未被使用，则可以使文本更清晰，但以现有标签为代价。内联样式起作用，但在阅读原始文本时会产生很多噪音。

使用VSCode，我发现自定义单字母标签，配合顶部一个小的<style>部分很好地工作，并且产生最少的噪音，特别是对于点色彩，例如：

<style>
r { color: Red }
o { color: Orange }
g { color: Green }
</style>

# TODOs:

- <r>TODO:</r> Important thing to do
- <o>TODO:</o> Less important thing to do
- <g>DONE:</g> Breath deeply and improve karma

我的使用情况类似于在开发过程中使用 orgmode 的应用内记事功能，但我猜它可能在其他地方也适用？

- Robin Macharg

---

这个能在 Obsidian 这样的应用程序中使用吗？ - rinogo

简洁而聪明。 - Jacob M. Barnard

Answer 5

虽然Markdown不支持颜色，但如果你不需要太多颜色，你可以牺牲一些支持的样式，并重新定义相关标签使用CSS来设置颜色，同时去掉格式化或保留。

示例：

// resets
s { text-decoration:none; } //strike-through
em { font-style: normal; font-weight: bold; } //italic emphasis


// colors
s { color: green }
em { color: blue }

参见: 如何重新定义em标签，使其加粗而不是斜体

接着在你的Markdown文本中

~~This is green~~
_this is blue_

- Simon B.

Answer 6

这应该更简短：

<font color='red'>test blue color font</font>

- Galaxy

Answer 7

作为一种替代方案，您的文本中颜色所起到的任何作用都可以通过彩色Unicode字符来实现，例如 U+1F534 '大红圆形'。

例如，当我记录电线颜色时，我会使用这样的字符，当硬件伴随我的GitHub软件项目时也是如此。

 red: +5V
 orange: +3.3V
⚫ black: ground
⚪ white: ground (pull-down)
 purple: I2C signal
 green: clock signal
 yellow: WS2812 signal
 blue: resistor bridge (analogue) input

也许这对你的文档也有用处。你可以将此示例复制并粘贴到你的文本中，或者通过搜索像“unicode purple square”这样的字符串来查找它们。它们也被认为是表情符号。

也许这对你的文档也有用处。你可以将此示例复制并粘贴到你的文本中，或者通过搜索像“unicode紫色正方形”这样的字符串来查找它们。它们也被认为是表情符号。

- Michael Scheper

---

非常酷 -- 学到了一些不算新的，但是完全已经忘记的东西。 :-) - Petter Hesselberg

Answer 8

你可以使用 LaTeX 样式：

$\color{color-code}{your-text-here}$

为了保留单词之间的空白，您还需要包含波浪线~。

- Y.Du

Answer 9

自2022年5月以来，Github支持在Markdown中使用LaTeX语法，你可以使用LaTeX代码为你的项目添加颜色，例如以下示例：

基础用法

代码	效果
$${\color{red}红色}$$	$${\color{red}红色}$$
$${\color{green}绿色}$$	$${\color{green}绿色}$$
$${\color{lightgreen}浅绿色}$$	$${\color{lightgreen}浅绿色}$$
$${\color{blue}蓝色}$$	$${\color{blue}蓝色}$$
$${\color{lightblue}浅蓝色}$$	$${\color{lightblue}浅蓝色}$$
$${\color{black}黑色}$$	$${\color{black}黑色}$$
$${\color{white}白色}$$	$${\color{white}白色}$$

多种颜色混用

• 代码

$${\color{red}Welcome \space \color{lightblue}To \space \color{orange}Stackoverflow}$$

• 可视化

$${\color{red}欢迎 \space \color{lightblue}来到 \space \color{orange}Stackoverflow}$$

• Github 上的视图：

• 如果您想了解更多，请查看GitHub博客中的新支持说明，以及我的Gist（如果需要）。

- F4NT0

---

为什么它是斜体？不能只是普通文本吗？ - smerllo

这是来自 Github 上 KATEX 的标准字体，但你可以在 KATEX 文档网站上使用一些可用的字体。 - F4NT0

使用$ ... $或$$ ... $$可以使用TeX数学模式。您可以尝试$\textsf{\color{red}红色文本}$。\textsf代表无衬线字体；\textrm可用于罗马字体，\texttt可用于打字机字体。我还在大括号内使用\large来获得更大的字体。 - Jander

Answer 10

简短的故事：链接。可以使用类似下面这样的内容：

a[href='red'] {
    color: red;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

<a href="red">Look, ma! Red!</a>

（以上HTML仅供演示）

在你的md源文件中：

[看，妈妈！变红了！]（red）

- user3193330

---

聪明！这里有很多潜力可以进行任意样式设计。 - rinogo