如何在Markdown中应用颜色？

Question

我想使用Markdown来存储文本信息.但快速的谷歌搜索说Markdown不支持颜色.StackOverflow也不支持颜色.与GitHub降价的情况相同.

有没有允许彩色文字的降价风格？

Answer 1

由于原始/官方语法规则状态(强调添加):

Markdown的语法用于一个目的:用作为Web编写的格式.

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实现.

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

Answer 2

当你想使用纯 Markdown（没有嵌套的 HTML）时，你可以使用Emojis来引起对文件某些片段的注意，即 ?? 警告？？，重要的？或新。

Answer 3

作为替代方案，文本中颜色的任何目的都可以使用彩色 Unicode 字符来实现，例如 U+1F534“大红色圆圈”。

\n

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

\n

 red: +5V\n orange: +3.3V\n\xe2\x9a\xab black: ground\n\xe2\x9a\xaa white: ground (pull-down)\n purple: I2C signal\n green: clock signal\n yellow: WS2812 signal\n blue: resistor bridge (analogue) input\n

\n

也许这对您的文档也很有用。您可以将此示例复制并粘贴到文本中，或者在网络上搜索“unicode Purple square”等字符串。它们也被认为是表情符号。

\n

Answer 4

我已经开始使用Markdown将我的一些文档发布到内部用户的内部网站.这是一种简单的方法来共享文档但不能由查看者编辑.

因此,这种颜色文本标记是"伟大的".我有几个像这样使用,并且工作得很好.

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

变成了这是蓝色的斜体.

和

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

变成红色大胆.

我喜欢灵活性和易用性.

Answer 5

现在，自 2022 年 5 月起，Github 可以在 Markdown 上使用 LATEX，您可以使用 LATEX 代码在您的存储库上使用某种颜色，如下例所示：

基本的

代码	出现
$${\color{red}Red}$$	$${\color{红色}红色}$$
$${\color{green}Green}$$	$${\颜色{绿色}绿色}$$
$${\color{lightgreen}Light \space Green}$$	$${\color{浅绿色}浅\太空绿色}$$
$${\color{blue}Blue}$$	$${\颜色{蓝色}蓝色}$$
$${\color{lightblue}Light \space Blue}$$	$${\color{浅蓝色}浅\太空蓝}$$
$${\color{black}Black}$$	$${\颜色{黑色}黑色}$$
$${\color{white}White}$$	$${\颜色{白色}白色}$$

不止一种颜色

• 代码

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

• 可视化

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

• Github上的看法：

• 如果您想了解更多信息，Github 博客将解释新的支持，如果您愿意，还可以查看我的要点:)

Answer 6

短篇小说：链接。利用类似的东西：

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

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

（以上 HTML 用于演示目的）

在你的 MD 源中：

[Look, ma! Red!](red)

Answer 7

感谢该线程中的所有答案。

\n

我同意，最终目的是强调和区分文本。以下是我从该帖子中学到的答案与个人喜好的整合（通过粘贴到 MD 编辑器中查看）：

\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

风格	降价
\xe2\x9a\xab \xe2\x9a\xaa	相同的
\xe2\x9c\x85 true 和 \xe2\x9d\x8cfalse	相同的
强调	<u>下划线</u>
~~中风~~	~~中风~~
斜体	*斜体*
==亮点==	==亮点==
大胆的	**大胆的 **
red color	‘红色’
蓝色	<a>蓝色</a>
其他颜色	<font color=#0fb503>其他颜色</font>

\n

Answer 8

你可能可以使用乳胶风格：

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

为了保持单词之间的空格，您还需要包含波浪号~。

Answer 9

我喜欢重新定义现有标签的想法，如果它们没有被使用，因为文本更干净，以牺牲现有标签为代价。内联样式有效，但在阅读原始文本时会产生很多噪音。

使用 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-ish 应用内笔记记录，但我想它可能在其他地方工作？

Answer 10

虽然Markdown不支持颜色，但是如果您不需要太多颜色，则可以随时牺牲一些受支持的样式，并使用CSS重新定义相关标签以使其变为颜色，以及是否删除格式。

例：

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


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

另请参阅：如何将em标签重新设置为粗体而不是斜体

然后在您的降价文字中

~~This is green~~
_this is blue_

Answer 11

这应该更短：

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

Answer 12

在Jekyll我能够为粗体元素添加一些颜色或其他样式（也应该与所有其他元素一起使用）。

我开始“造型”{:并结束它}。元素和大括号之间不允许有空格！

**My Bold Text, in red color.**{: style="color: red; opacity: 0.80;" }

将被翻译成 html：

**My Bold Text, in red color.**{: style="color: red; opacity: 0.80;" }

Answer 13

这在乔普林笔记中有效：

<span style="color:red">text in red</span>

Answer 14

似乎kramdown支持某种形式的颜色。

Kramdown允许内联 html：

This is <span style="color: red">written in red</span>.

它还有另一种语法来包含内联 css 类：

This is *red*{: style="color: red"}.

这个页面进一步解释了 GitLab 如何利用更紧凑的方式在 Kramdown 中应用 css 类：

将blue类应用于文本：

This is a paragraph that for some reason we want blue.
{: .blue}

将blue类应用于标题：

#### A blue heading
{: .blue}

应用两个类：

A blue and bold paragraph.
{: .blue .bold}

应用 ID：

#### A blue heading
{: .blue #blue-h}

这产生：

<h4 class="blue" id="blue-h">A blue heading</h4>

在上面的链接中解释了很多其他内容。您可能需要检查一下。

此外，正如其他答案所说， Kramdown 也是Jekyll 背后的默认降价渲染器。因此，如果您在 github 页面上创作任何内容，上述功能可能是开箱即用的。

Answer 15

在 zeppelin 段落中运行以下内容

%md ### <span style="color:red">text</span>