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

Question

我的项目有一个

README.md

文件 underscore-cli，我想记录

--color

标志。

目前，唯一的方法是使用屏幕截图（可以存储在项目存储库中）：

但屏幕截图不是文本，导致读者无法在屏幕截图中复制/粘贴命令。它们的创建/编辑/维护也很痛苦，并且浏览器加载速度较慢。现代网络使用文本样式，而不是一堆渲染的文本图像。

虽然一些 Markdown 解析器支持内联 HTML 样式，但 GitHub 不支持；这不起作用：

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

这不起作用：

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

Answer 1

为自述文件添加颜色的一种方法是利用提供占位符图像的服务。

例如可以使用这个 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

• 

  #c5f015

• 

  #1589F0

Answer 2

您可以使用

diff

语言标签来生成一些彩色文本：

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

但是，它会将其添加为以

- + ! #

开头或以

@@

开头和结尾的新行

此问题是在 GitHub 标记 #369 中提出的，但自那时起（2014 年）他们没有对决定做出任何更改。

Answer 3

您无法为 GitHub

README.md

文件中的纯文本着色。但是，您可以使用下面的标签为代码示例添加颜色。

为此，只需将这些示例等标签添加到您的 README.md 文件中即可：

```json
   // 着色代码
````
````html
   // 着色代码
````
````js
   // 着色代码
````
````CSS
   // 着色代码
````
// ETC。

不需要“pre”或“code”标签。

这在 GitHub Markdown 文档中有介绍（大约在页面的一半处，有一个使用 Ruby 的示例）。 GitHub 使用 Linguist 来识别和突出显示语法 - 您可以在 Linguist 的 YAML 文件中找到支持的语言（及其 Markdown 关键字）的完整列表。

Answer 4

不幸的是，目前这是不可能的。

GitHub Markdown 文档 没有提及“颜色”、“CSS”、“HTML”或“样式”。

虽然某些 Markdown 处理器（例如 Ghost 中使用的处理器）允许使用 HTML，例如

<span style="color:orange;">Word up</span>

，但 GitHub 会丢弃任何 HTML。

如果您必须在自述文件中使用颜色，则您的 README.md 文件可以简单地将用户引向 README.html 文件。当然，这样做的代价是可访问性。

Answer 5

如果您接受这种有限的颜色和形状（尽管它们在不同的操作系统和浏览器中看起来可能有所不同），这些表情符号字符也很有用，这是 AlecRust 的答案 的替代方案，它需要可能会失败的外部服务有一天，并想到使用Luke Hutchison的答案中的表情符号：

🔴🟠🟡🟢🔵🟣🟤⚫⚪🔘🛑⭕

🟥🟧🟨🟩🟦🟪🟫⬛⬜🔲🔳⏹☑✅❎

❤️🧡💛💚💜💙🤎🖤🤍♥️💔💖💘💝💗💓💟💕❣️♡

🔺🔻🔷🔶🔹🔸♦💠💎💧🧊

🏴🏳🚩🏁

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

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

---

示例用法：这是我的用例，通过这些表情符号解决了（在阅读此处的答案后想到的）

---

此外，以下表情符号是肤色修饰符，仅在某些设备上在此矩形形状内具有肤色。例如，在 Windows 中，它们甚至没有颜色。不要使用它们！因为它们不应该单独存在，所以它们应该与其他表情符号一起使用来修改其兄弟表情符号的输出。而且单独使用时，它们在不同的操作系统、版本、浏览器和版本组合中呈现出很大的不同。

🏿🏾🏽🏼🏻

Answer 6

作为渲染光栅图像的替代方法，您可以嵌入 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 图像时，文本仍不可选择。

演示：https://gist.github.com/CyberShadow/95621a949b07db295000

Answer 7

现在自 2022 年 5 月起，Github 可以在 Markdown 上接受 LATEX 代码，因此您可以在

\color{namecolor}

块内使用

$$$$

，如下例所示：

基本

代码	出现
$${\color{red}Red}$$	$$