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

为自述文件添加颜色的一种方法是利用提供 placeholder images 的服务。

例如，可以使用这个 Markdown：

- ![#f03c15](https://via.placeholder.com/15/f03c15/f03c15.png) `#f03c15`
- ![#c5f015](https://via.placeholder.com/15/c5f015/c5f015.png) `#c5f015`
- ![#1589F0](https://via.placeholder.com/15/1589F0/1589F0.png) `#1589F0`

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

#f03c15

#c5f015

#1589F0

---

您可以使用 diff 语言标签生成一些彩色文本：

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

但是，它会将其添加为以 - + ! # 开头或以 @@ 开头和结尾的新行

https://i.stack.imgur.com/cueq5.png

此问题在 GitHub markup #369 中提出，但自那以后（2014 年）他们没有对决定进行任何更改。

---

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

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

```json
   // code for coloring
```
```html
   // code for coloring
```
```js
   // code for coloring
```
```css
   // code for coloring
```
// etc.

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

这在 GitHub Markdown documentation 中进行了介绍（大约在页面的一半处，有一个使用 Ruby 的示例）。 GitHub 使用 Linguist 来识别和突出显示语法 - 您可以在 Linguist's YAML file 中找到支持的语言（以及它们的 markdown 关键字）的完整列表。

---

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

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

虽然某些 Markdown 处理器（例如 Ghost 中使用的那个）允许 HTML，例如 <span style="color:orange;">Word up</span>，但 GitHub 会丢弃任何 HTML。

如果您必须在自述文件中使用颜色，则您的 README.md 文件可以简单地将用户引至 README.html 文件。当然，对此的权衡是可访问性。

---

作为渲染光栅图像的替代方法，您可以嵌入 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

---

如果您可以接受这种有限的颜色和形状（尽管它们在不同的操作系统和浏览器中可能看起来不同），这些表情符号字符也很有用，这是 AlecRust's answer 的替代品，它需要有朝一日可能会停止的外部服务，以及使用 Luke Hutchison's answer 中的表情符号的想法：

🔴🟠🟡🟢🔵🟤⚫⚪🔘🛑⭕

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

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

🔺🔻🔷🔶🔹🔸♦💠💎💧🧊

🏴🏳🚩🏁

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

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

使用示例： This was my use case 已被这些表情符号解决（阅读此处的答案后想到的）

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

🏿 🏾 🏽 🏼 🏻

---

我倾向于同意 with M-Pixel，目前无法为 GitHub Markdown 内容中的文本指定颜色，至少不能通过 HTML。

GitHub 确实允许某些 HTML 元素和属性，但只允许某些元素和属性（请参阅有关其 HTML sanitization 的文档）。它们确实允许 p 和 div 标记，以及 color 属性。但是，当我尝试在 GitHub 上的 Markdown 文档中使用它们时，它不起作用。我尝试了以下（以及其他变体），但它们不起作用：

这是一些红色文字。

这是一些文字！

这些是红色单词。

作为 M-Pixel suggested，如果您确实必须使用颜色，您可以在 README.html 文件中执行此操作并将其引用。

---

在撰写本文时，GitHub Markdown 使用颜色预览呈现 `#ffffff` 等颜色代码（注意反引号！）。只需使用颜色代码并用反引号将其包围。

例如：

https://i.stack.imgur.com/WunTd.png

变成

https://i.stack.imgur.com/GA9Iv.png

---

我使用表情符号 Unicode 字符为 GitHub 标记页面添加了一些颜色，例如💡 或 🛑 - 一些表情符号字符在某些浏览器中是彩色的。

还有一些彩色表情符号字母：血型🅰️🅱️🅾️；停车标志🅿️；地铁标志Ⓜ️;其他一些有两个或更多字母的，例如🆗，以及盒装数字，例如 0️⃣。如果旗帜不可用，旗帜表情符号将显示为字母（通常是彩色）：🇯🇵 🇰🇷 🇩🇪 🇨🇳 🇺🇸 🇫🇷 🇪🇸 🇮🇹 🇷🇺 🇬🇧。

但是，我认为表情符号中没有定义完整的彩色字母表。

---

可以这样做：

https://img.shields.io/static/v1?label=&message=%D0%90%D0%B0%D0%B8&color=green

---

基于 AlecRust's idea，我实现了 PNG 文本服务。

演示在这里：

http://lingtalfi.com/services/pngtext?color=cc0000&size=10&text=Hello%20World

有四个参数：

text：要显示的字符串

字体：未使用，因为在这个演示中我只有 Arial.ttf。

fontSize：一个整数（默认为 12）

颜色：一个六字符的十六进制代码

请不要直接使用此服务（测试除外），而是使用我创建的提供服务的类：

https://github.com/lingtalfi/WebBox/blob/master/Image/PngTextUtil.php

class PngTextUtil
{
    /**
     * Displays a PNG text.
     *
     * Note: this method is meant to be used as a web service.
     *
     * Options:
     * ------------
     * - font: string = arial/Arial.ttf
     *          The font to use.
     *          If the path starts with a slash, it's an absolute path to the font file.
     *          Else if the path doesn't start with a slash, it's a relative path to the font directory provided
     *          by this class (the WebBox/assets/fonts directory in this repository).
     * - fontSize: int = 12
     *          The font size.
     * - color: string = 000000
     *          The color of the text in hexadecimal format (6 characters).
     *          This can optionally be prefixed with a pound symbol (#).
     *
     *
     *
     *
     *
     *
     * @param string $text
     * @param array $options
     * @throws \Bat\Exception\BatException
     * @throws WebBoxException
     */
    public static function displayPngText(string $text, array $options = []): void
    {
        if (false === extension_loaded("gd")) {
            throw new WebBoxException("The gd extension is not loaded!");
        }
        header("Content-type: image/png");
        $font = $options['font'] ?? "arial/Arial.ttf";
        $fontsize = $options['fontSize'] ?? 12;
        $hexColor = $options['color'] ?? "000000";
        if ('/' !== substr($font, 0, 1)) {
            $fontDir = __DIR__ . "/../assets/fonts";
            $font = $fontDir . "/" . $font;
        }
        $rgbColors = ConvertTool::convertHexColorToRgb($hexColor);

        //--------------------------------------------
        // GET THE TEXT BOX DIMENSIONS
        //--------------------------------------------
        $charWidth = $fontsize;
        $charFactor = 1;
        $textLen = mb_strlen($text);
        $imageWidth = $textLen * $charWidth * $charFactor;
        $imageHeight = $fontsize;
        $logoimg = imagecreatetruecolor($imageWidth, $imageHeight);
        imagealphablending($logoimg, false);
        imagesavealpha($logoimg, true);
        $col = imagecolorallocatealpha($logoimg, 255, 255, 255, 127);
        imagefill($logoimg, 0, 0, $col);
        $white = imagecolorallocate($logoimg, $rgbColors[0], $rgbColors[1], $rgbColors[2]); // For font color
        $x = 0;
        $y = $fontsize;
        $angle = 0;
        $bbox = imagettftext($logoimg, $fontsize, $angle, $x, $y, $white, $font, $text); // Fill text in your image
        $boxWidth = $bbox[4] - $bbox[0];
        $boxHeight = $bbox[7] - $bbox[1];
        imagedestroy($logoimg);

        //--------------------------------------------
        // CREATE THE PNG
        //--------------------------------------------
        $imageWidth = abs($boxWidth);
        $imageHeight = abs($boxHeight);
        $logoimg = imagecreatetruecolor($imageWidth, $imageHeight);
        imagealphablending($logoimg, false);
        imagesavealpha($logoimg, true);
        $col = imagecolorallocatealpha($logoimg, 255, 255, 255, 127);
        imagefill($logoimg, 0, 0, $col);
        $white = imagecolorallocate($logoimg, $rgbColors[0], $rgbColors[1], $rgbColors[2]); // For font color
        $x = 0;
        $y = $fontsize;
        $angle = 0;
        imagettftext($logoimg, $fontsize, $angle, $x, $y, $white, $font, $text); // Fill text in your image
        imagepng($logoimg); // Save your image at new location $target
        imagedestroy($logoimg);
    }
}

注意：如果您不使用 Universe framework，则需要替换此行：

$rgbColors = ConvertTool::convertHexColorToRgb($hexColor);

使用此代码：

$rgbColors = sscanf($hexColor, "%02x%02x%02x");

在这种情况下，您的十六进制颜色必须正好是六个字符长（不要将井号 (#) 放在它前面）。

注意：最后我没有使用这个服务，因为我发现字体很丑更糟糕：无法选择文字。但为了讨论，我认为这段代码值得分享......

---

可能不是所问问题的确切答案，但是当我处于 OP 的情况时，我正在寻找以下解决方案：

https://img.shields.io/badge/github-blue?style=for-the-badge

只需：

[![](https://img.shields.io/badge/github-blue?style=for-the-badge)](https://github.com/hamzamohdzubair/redant)
[![](https://img.shields.io/badge/book-blueviolet?style=for-the-badge)](https://hamzamohdzubair.github.io/redant/)
[![](https://img.shields.io/badge/API-yellow?style=for-the-badge)](https://docs.rs/crate/redant/latest)
[![](https://img.shields.io/badge/Crates.io-orange?style=for-the-badge)](https://crates.io/crates/redant)
[![](https://img.shields.io/badge/Lib.rs-lightgrey?style=for-the-badge)](https://lib.rs/crates/redant)

---

对于 GitHub README.md 中的文本着色，您可以使用 SVG <text>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 20" fill="none">
    <text x="0" y="15" fill="#4285f4">G</text>
    <text x="12" y="15" fill="#ea4335">o</text>
    <text x="21" y="15" fill="#fbbc05">o</text>
    <text x="30" y="15" fill="#4285f4">g</text>
    <text x="40" y="15" fill="#389738">l</text>
    <text x="45" y="15" fill="#ea4335">e</text>
</svg>

使用自定义颜色制作自定义文本后，保存 SVG 文件并按照以下步骤操作。

在 GitHub 上打开您的存储库。

单击 README.md 的编辑按钮

将 SVG 文件拖放到打开的在线编辑器中。 GitHub 将生成一个降价图像。类似于以下内容。 

如果要更改 SVG 的原始大小，可以使用生成的 URL 作为 标签的 src 并提供所需的大小。

---

问题是“如何在 github 自述文件中为文本着色”，这很难/不可能

题外话：在 github 问题中，我们可以使用

<span color="red">red</span>

例子：

#!/bin/bash

# Convert ANSI-colored terminal output to GitHub Markdown

# To colorize text on GitHub, we use <span color="red">red</span>, etc.
# Depends on:
#   aha: convert terminal colors to html
#   xclip: copy the result to clipboard
# License: CC0-1.0
# Note: some tools may need other arguments than `--color=always`
# Sample use: colors-to-github.sh diff a.txt b.txt

cmd="$1"
shift # now the arguments are in $@
(
    echo '<pre>'
    $cmd --color=always "$@" 2>&1 | aha --no-header
    echo '</pre>'
) \
| sed -E 's/<span style="[^"]*color:([^;"]+);"/<span color="\1"/g' \
| sed -E 's/ style="[^"]*"//g' \
| xclip -i -sel clipboard

---

这是您可以为彩色文本编写的代码：

<h3 style="color:#ff0000">Danger</h3>

---