如何给GitHub的README.md文件添加颜色

526

我的项目 underscore-cli 有一个 README.md 文件,我想要记录 --color 标志。

目前,唯一的方法是使用截图(可以存储在项目仓库中):

example.png

但是截图并非文本,使阅读者无法复制/粘贴其中的命令。它们也很难创建/编辑/维护,并且加载速度比较慢。现代的网页使用文本样式,而不是文本的渲染图像。

虽然一些Markdown解析器支持内联HTML样式,但GitHub不支持;这种方式不起作用:

<span style="color: green"> Some green text </span>

这个不起作用:

<font color="green"> Some green text </font>

2
如果您无法通过Markdown着色文本,嵌入屏幕截图是否可行? - girasquid
1
目前还无法在Markdown文件中添加文本颜色吗? - Nam Nguyen
2
不行 - 这是2014年7月,真是该死。 - lfender6445
2023解决方案 ${\textsf{\color{lightgreen} 你好,世界!}}$ - undefined
显示剩余5条评论
23个回答

564

一种在 README 中添加颜色的方法是利用提供占位图像的服务。

例如,可以使用以下 Markdown:

- ![#f03c15](https://placehold.co/15x15/f03c15/f03c15.png) `#f03c15`
- ![#c5f015](https://placehold.co/15x15/c5f015/c5f015.png) `#c5f015`
- ![#1589F0](https://placehold.co/15x15/1589F0/1589F0.png) `#1589F0`

要创建您喜欢的任何颜色列表:

  • #f03c15 #f03c15
  • #c5f015 #c5f015
  • #1589F0 #1589F0

2
这在 GitHub 项目中的卡片中非常有效,可以用来标记卡片并为其着色。 - Ziad Akiki
24
根据问题要求,我想着色文本,而不是在文本前面放置图像。 - Binar Web
14
我所描述的方法是有效的。您还可以在图像中添加彩色文本,例如 https://placehold.it/150/ffffff/ff0000?text=hello - AlecRust
8
参考:https://emojipedia.org/large-red-square/ - Alex Szücs
5
这个答案可能在2022年不适用了。GitHub正在使用匿名化URL(https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/about-anonymized-urls)来保护阅读Readme文件的用户,现在所有对外部站点的请求都会通过它的`github-camo`服务器进行。另一方面,placeholder.com将拒绝超过每个IP地址一个月内超过100,000次的请求(请参见此页面上的“使用限制”规则)。谢天谢地,StackOverflow没有代理请求,所以您仍然可以在上面的答案中看到图片。 - Jatin Sanghvi
显示剩余9条评论

409
你可以使用 diff 语言标签来生成一些有颜色的文本:

diff 标签可以用来在文本上添加高亮颜色的效果。

diff 标签内的文字会被渲染成两种不同的颜色,一般是红色和绿色,用于表示文本的差异。

注意:这个标签主要用于版本控制系统中的代码比较,因此在实际应用中需要结合具体的场景进行使用。

```diff
- text in red
+ text in green
! text in orange
# text in gray
@@ text in purple (and bold)@@
```

然而,它会将其作为新行添加,以- + !#开头或以@@开头和结尾

Enter image description here

这个问题曾在GitHub markup #369中提出,但自那时以来(2014年)他们没有改变决定。


8
它还会将被@@包围的文本着色为紫色(且加粗)。例如,Codecov在其GitHub集成机器人的评论中利用了这一点,链接如下:https://github.com/zeit/now/pull/2570#issuecomment-512585770 - Jacob Ford
2
如果你能在回答中加入我在 Github 问题中看到的巧妙技巧,使用类似“-!警告!-”的文本来包含/隐藏触发颜色的初始字符,那么你的回答会更有说服力。 - Dave Dopson
1
这正是我想要的用例,我想在问题评论中突出显示差异,并提供一个快速的解决方法。 - nmz787
1
这种解决方案的缺点是它将彩色文本包围在一个代码块中。 - C RICH

114
您无法在GitHub的README.md文件中为普通文本着色。但是,您可以使用以下标记为代码示例添加颜色。
只需将此类标记添加到您的README.md文件中:
```json // 用于着色的代码 ``` ```html // 用于着色的代码 ``` ```js // 用于着色的代码 ``` ```css // 用于着色的代码 ``` 等等。
不需要“pre”或“code”标记。
这在GitHub Markdown文档中有详细介绍(页面中部有一个使用Ruby的示例)。 GitHub使用Linguist识别和突出语法 - 您可以在Linguist的YAML文件中找到支持的语言的完整列表(以及它们的markdown关键字)。

5
@NielsAbildgaard 谢谢你! :) 答案是目前至少无法在GitHub的.md文件中着色纯文本。我确实已经说明了这一点并花了大约4个小时进行研究。无论如何,感谢您指出我的有用.md代码标签,我很感激! - totallytotallyamazing
1
我也无法让它工作,但很奇怪,因为颜色属性已经被列入白名单: https://github.com/github/markup/tree/master#html-sanitization - dotMorten
1
我使用了“已弃用”的标记。这对于将“已弃用”标签添加到文档中非常有效。 - MRodrigues
7
你可以使用 diff 语言标签来生成绿色和红色的高亮文本。 - craigmichaelmartin
1
@Bahman.A 我不这么认为。看看这个StackOverflow - totallytotallyamazing
显示剩余9条评论

55

如果您可以接受这些表情符号的有限颜色和形状(尽管它们在不同的操作系统和浏览器中可能会看起来不同),这些表情符号也很有用。这是对AlecRust's答案的替代方案,该答案需要一个可能会在某一天关闭的外部服务,而使用Luke Hutchison's答案中的表情符号的想法如下:

⚫⚪⭕

⬛⬜⏹☑✅❎

❤️♥️❣️♡

◻️◼️◾️◽️▪️▫️

还有许多带有字母数字、箭头和其他符号的彩色矩形字符,可能适合您。


使用示例: 这就是我的用例,这些表情符号解决了我的问题(在阅读这里的答案后想到了它们)


此外,以下表情符号是肤色修饰符,在某些设备上,它们的肤色只在这个类似矩形的形状内部。例如,在Windows中,它们甚至没有颜色。不要使用它们!因为它们不应该单独使用,它们应该与其他表情符号一起使用来修改其兄弟表情符号的输出。而且,当它们被单独使用时,它们在不同的操作系统、版本、浏览器和版本组合下的呈现方式也非常不同。


1
这是一个很棒的技巧!它并没有解决我最初发布问题时提到的语法高亮的需求,但它可能可以解决其他各种需求。 - Dave Dopson
感谢 @DaveDopson - Unicornist
1
@Unicornist,FYI,我不确定为什么,但是对我来说,2、3、4、6、7号圆圈以及前7个正方形和一些心形无法呈现。 - jberryman
1
你不必限制自己在任何形式上。相反,您可以创建一个单独的 .svg 文件,并根据 id 查询不同颜色的元素。例如, 表中的所有图像都来自同一个 SVG。也可以插入像这样的彩色文本。 - xamid

54

很遗憾,目前无法实现。

GitHub Markdown文档中未提到“color”、“CSS”、“HTML”或“style”。

虽然一些Markdown处理器(例如在Ghost中使用的处理器)允许使用HTML,例如<span style="color:orange;">Word up</span>,但GitHub会丢弃任何HTML。

如果您的readme必须使用颜色,则您的README.md文件可以简单地引用用户到一个README.html文件。当然,这样做会牺牲可访问性。


31
通常情况下,它不会忽略HTML标记,hrbrpbi等标记是有效的! - CodeManX
如果您要转到README.html,您可能希望在存储库中保留其副本,以便不会丢失其提交历史记录。如果您感觉特别狡猾,甚至可以将其包含在gh-pages中。 - Sandy Gifford
5
请查看 jch/html-pipeline 的源代码,以获取 GitHub 允许的实际 HTML 标签和属性。 - Jason Antman
如果它概述了一个端到端的模式,这个答案可能会更加强大:使用README.html.md作为源代码,通过Ghost呈现为README.html,这是在Github页面上呈现的内容。 README.html是否默认显示,还是用户必须点击才能访问它? - Dave Dopson
更新:我尝试了这个方法,但不幸的是整个故事无法实现,因为Github不能自动呈现README.html文件;它显示为纯文本。这也许是你建议链接它的原因。现在我更好地理解了你对“可访问性”的评论。 - Dave Dopson
哇,这真是个救命稻草!它完美地运作,并且正好满足了我所期望的! - Chris Ze Third

52

自从2022年5月以来,Github可以接受Markdown中的LATEX代码,因此您可以在$$$$块内使用\color{namecolor},如下面的示例所示:

基础

代码 显示效果
$${\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 live test


3
嗨,为什么文字显示在中间? - Farkhod Abdukodirov
3
嗨,为什么文字显示在中间? - undefined
@FarkhodAbdukodirov 在开头和结尾使用一个(1)美元符号以保持文本左对齐。 - Jeff Brower
@F4NT0 很好,截至2022年9月,这应该是被接受的答案。请允许我指出一个问题,${}$结构似乎无法换行,所以如果你输入一长串文本,在移动应用上页面会显得左侧压缩。这个问题可以通过将长行分成几行来解决,但在这种情况下,每行之间会有相当多的空白间隔。你知道如何去除连续的${}$之间的空白间隔吗? - Jeff Brower
3
使用${\textsf{\color{lightgreen}Green}}$这样的方式来匹配Markdown字体,使其更好地内联。 - undefined

38

除了使用位图图像渲染,您还可以嵌入SVG文件:

<a><img src="https://dump.cy.md/6c736bfd11ded8cdc5e2bda009a6694a/colortext.svg"/></a>

您可以像往常一样向SVG文件添加彩色文本:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100" height="50"
>
  <text font-size="16" x="10" y="20">
    <tspan fill="red">Hello</tspan>,
    <tspan fill="green">world</tspan>!
  </text>
</svg>

很不幸的是,尽管您可以在打开 .svg 文件时选择和复制文本,但在嵌入SVG图像时,该文本是不可选择的。

Demo: https://gist.github.com/CyberShadow/95621a949b07db295000


34
在撰写本文时,GitHub Markdown 使用颜色代码(注意反引号!)呈现颜色预览。只需使用颜色代码并用反引号括起来即可。
例如:

GitHub Markdown with color codes

变成

rendered GitHub Markdown with color codes

这个功能的可用性有限,正如文档所述:

颜色的可视化仅在问题拉取请求讨论中受支持。


17
我尝试了那个方法,但好像不起作用。你能提供一个示例链接吗? - Dave Dopson
2
包括反引号,如 \``#hexhex`` - bwindels
1
这应该是被接受的答案。它很简单,不需要外部网站或HTML。 - moxi
14
问题是如何给文本上色,但这并没有解决它。此外,在 .MD 文件中不再支持该颜色预览功能。 - Zack
2
这似乎不再起作用了。 - jeremie bergeron

30

我倾向于同意M-Pixel的观点,即目前无法通过HTML在GitHub Markdown内容中为文本指定颜色。

GitHub允许某些HTML元素和属性,但仅限于某些元素和属性(请参阅它们关于HTML消毒的文档)。它们允许pdiv标记,以及color属性。但是,在GitHub上尝试在Markdown文档中使用它们时,它们无效。我尝试了以下(以及其他变化),但它们都没有起作用:

  • <p style='color:red'>This is some red text.</p>
  • <font color="red">This is some text!</font>
  • These are <b style='color:red'>red words</b>.

正如M-Pixel建议的那样,如果您确实必须使用颜色,则可以在README.html文件中实现,并将其链接到Markdown文件中。


13
很遗憾,正如我的回答所述,这在Github上不起作用。 - Scott H
请查看 jch/html-pipeline 的源代码以获取 GitHub 允许的实际 HTML 标签和属性。 - Jason Antman

24
GitHub在https://github.com/orgs/community/discussions/16925中发布了对以下Markdown的支持:
> [!note]  
> Highlights information that users should take into account, even when skimming.

> [!important]  
> Crucial information necessary for users to succeed.

> [!warning]  
> Critical content demanding immediate user attention due to potential risks.

这是它的样子:

enter image description here


我尝试了一下,但结果没有相应的符号图标和颜色。 - A.R.S.D.
4
哦!它是大小写敏感的,应该是“__Warning__”而不是“__warning__”才能起作用。谢谢。 - A.R.S.D.
1
是的,我认为它仍然处于实验阶段,但我喜欢它 :D - blackjacx
1
这是在当时在https://github.com/orgs/community/discussions/16925上公开宣传的,而不是悄悄添加的。 - Harmon758

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接