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

Question

我有一个README.md文件,用于我的项目underscore-cli,这是一个非常好用的工具,用于在命令行上攻击JSON和JS.

我想记录"--color"标志......哪些......颜色的东西.如果我真的可以显示输出的样子,那会好得多.我似乎无法找到一种方法来为我的README.md添加颜色.有任何想法吗？

我试过这个:

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

还有这个:

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

到目前为止没有运气.

Answer 1

值得一提的是,您可以使用占位符图像服务在README中添加一些颜色.例如,如果您想提供颜色列表以供参考:

- ![#f03c15](https://placehold.it/15/f03c15/000000?text=+) `#f03c15`
- ![#c5f015](https://placehold.it/15/c5f015/000000?text=+) `#c5f015`
- ![#1589F0](https://placehold.it/15/1589F0/000000?text=+) `#1589F0`

生产:

• #f03c15
• #c5f015
• #1589F0

Answer 2

您可以使用diff语言标记生成绿色和红色突出显示的文本:

```diff
- text in red
+ text in green
! text in orange
# text in gray
```

Answer 3

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

要执行此操作,只需将这些示例等标记添加到README.md文件中:

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

不需要"预"或"代​​码"标签.

这在GitHub Markdown文档中有所介绍(大约在页面的一半,有一个使用Ruby的例子).GitHub使用Linguist来识别和突出显示语法 - 您可以在Linguist的YAML文件中找到支持的语言(以及它们的降价关键字)的完整列表.

Answer 4

现在从 2022 年 5 月开始，Github 可以接受Markdown 上的 LATEX 代码\color{namecolor}，因此您可以在 Block内部使用$$$$，如下例所示：

基本的

代码	出现
$${\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 上的这段代码：

Answer 5

不幸的是,这目前是不可能的.

在GitHub的降价文件没有提及"颜色","样式表","HTML",或"风格"的.

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

如果您在自述文件中使用颜色是必要的,那么您的README.md可以简单地将用户引用到README.html.当然,对此的权衡是可访问性.

Answer 6

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.

其外观如下：

Answer 7

我倾向于同意Qwertman的说法,目前无法在GitHub markdown中为文本指定颜色,至少不能通过HTML.

GitHub允许一些HTML元素和属性,但只允许某些HTML元素和属性(请参阅有关其HTML清理的文档).它们允许p和div标记,以及color属性.但是,当我尝试在GitHub上的降价文档中使用它们时,它不起作用.我尝试了以下(以及其他变体),但它们不起作用:

• <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>.

正如Qwertman建议的那样,如果你真的必须使用颜色,你可以在README.html中进行,并将它们引用到它.

Answer 8

作为渲染光栅图像的替代方法,您可以嵌入SVG文件:

<a><img src="http://dump.thecybershadow.net/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/Cyber​​Shadow/95621a949b07db295000

Answer 9

如果您对这种有限的颜色和形状种类感到满意（尽管它们在不同的操作系统/浏览器中看起来可能不同），这些表情符号字符也很有用，这是AlecRust 答案的替代方案，它需要一个可能有一天会出现故障的外部服务，并且使用Luke Hutchison 的回答中的表情符号的想法：

？？？

？？？？？？

???????

?

????????????

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

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

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

Answer 10

这是使用 MathJaX 更改 GFM 中文本字体、颜色和大小的解决方法

这是它的预览：

可能的字体：

mathcal - mathbb - mathscr - mathfrak - mathcal

可能的颜色：

黑色、蓝色、棕色、青色、深灰色、灰色、绿色、浅灰色、石灰、洋红色、橄榄色、橙色、粉色、紫色、红色、青色、紫罗兰色、白色、黄色

• 用于$..$内联代码和$$..$$居中
• 你可以使用\color 或\textcolor
• 你可以\在文本之间使用空格（或\ \双倍空格）

$\mathcal{\color{purple}{this \ is \ a \ paragraph} \ \color{cyan}{in \ another \ font}}$

$\mathbb{\color{teal}{this \ is \ a } \ \color{magenta}{paragraph \ in \ another \ font}}$

$\mathscr{\color{red}{this} \ \ \color{blue}{is \ \ a \ \ paragraph} \ \ \color{yellow}{in \ \ another \ \ font}}$

$\mathfrak{\color{lime}{this \ is \ a \ paragraph \ in \ another \ font}}$

$\mathscr{\color{red}{mon}\color{white}{day}}$

$\textcolor{olive}{\TeX} \ \textcolor{darkgray}{workaround \ found \ by \ Dassalem \ Mohammed \ Yasser}$

$\textit{hello}$  #italic

$\text{hello}$    #normal

$\Large{hello}$$   #Bigger text size

$$\LaTeX$$

颜色标记：

$\colorbox{red}{text}$

Text inside bordered Box 

$\fbox{Hello there}$

您可以使用着色文本进行高级操作：可能的模型：灰色 - rgb - RGB

模型	描述	价值观
灰色的	灰色阴影	0.1至1.0
RGB	红、绿、蓝	[0-255]{3}
RGB	红、绿、蓝	[0-255]{3}

$\color[rgb]{1,0,1} hello$

$\color[RGB]{155,127,0} hello$

$\color[gray]{0.3} hello$

记得要换行，否则$不会被处理

参考文献： https: //en.wikibooks.org/wiki/LaTeX/

Answer 11

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

例如：

变成

Answer 12

可以这样做：

\n

\n

\n

Answer 13

参考

请参阅GitHub 模型中支持的颜色模型，因为它们明确指出：

笔记：

• 支持的颜色模型在反引号内不能有任何前导或尾随空格。

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

因此 GitHub markdown 语言不支持它们，但如果您参考在 GitHub 文档中编写数学表达式，他们指出：

为了能够清晰地传达数学表达式，GitHub 在 Markdown 中支持 LaTeX 格式的数学。有关更多信息，请参阅Wikibook 中的LaTeX/数学。

这意味着 GitHub 不支持README.md文件中的颜色模型，但它支持文件LaTeX/Mathematics中的颜色模型，而文件中的颜色模型又支持README.md.

所以如果你参考LaTeX/Mathematics 提供的这个网站，你会发现一个名为Color的部分。它没有提供太多有用的信息，但它提供了LaTeX/Colors的链接，其中包含有关如何使用乳胶颜色的所有有用信息。

要使用LaTeX/Colors，您应该在 GitHub README 中使用数学表达式，因此请参阅在 GitHub 文档中编写数学表达式，如前所述：

• 要在文本中包含内联数学表达式，请使用美元符号 $ 分隔表达式。

• 要将数学表达式添加为块，请另起一行并使用两个美元符号 $$ 分隔表达式。

例如，如果您在LaTeX/Colors中找到这样的表达式：

\textcolor{declared-color}{text}

为了根据 GitHub 文档在 GitHub 中执行此操作，您应该执行以下操作：

$\color{green}{test}$

这是输出：

例子

通过参考LaTeX/Colors，以下是一些示例，其输出为 GitHub 上的图像：

输入彩色文本

README.mdfile中的代码，其中\用于跳过退格键：

## $\textcolor{yellow}{This\ is\ a\ Big\ Title}$

GitHub 中的输出：

输入文本的彩色背景

README.mdfile中的代码，其中\用于跳过退格键：

## $\colorbox{green}{{\color{white}{This\ is\ a\ Big\ Title}}}$

GitHub 中的输出：

仅更改部分文本的颜色

README.mdfile中的代码，其中\用于跳过退格键：

# ${This\ is\ a\ {\color{red}Big}}\ Title$

GitHub 中的输出：

等等，剩下的你可以自己尝试。

他们还表示：

预定义的颜色名称是

黑色、蓝色、棕色、青色、深灰色、灰色、绿色、浅灰色、青柠色、品红色、橄榄色、橙色、粉色、紫色、红色、青色、紫罗兰色、白色、黄色。

你可以定义你的颜色，参考上面的LaTeX/Colors并自己尝试。

Answer 14

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

简单地完成：

[![](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)

Answer 15

在阅读以下方法之前，我建议您先阅读我的研究，了解 GitHub 为何放弃对彩色文本的支持，以及如何才能使其在 GitHub Flavored Markdown（又名：GFM）中再次发挥作用。

要为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 将生成一个 Markdown 图像。像下面这样的东西。

  ![google](https://user-images.githubusercontent.com/000/000-aaa.svg)
  

• 如果您想更改 SVG 的原始大小，您可以使用生成的 URL as srcof<img/>标签并给出所需的大小。

  ![google](https://user-images.githubusercontent.com/000/000-aaa.svg)
  

  

Answer 16

我使用 emoji Enicode 字符为 GitHub 标记页面添加了一些颜色，例如，或者 - 某些 emoji 字符在某些浏览器中被着色。

还有一些彩色的表情符号字母：血型？？？；停车标志？地铁标志??; 其他一些带有两个或更多字母的，例如 ，和盒装数字，例如 0??。如果标志不可用，标志表情符号将显示为字母（通常是彩色的）：。

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

Answer 17

基于AlecRust的想法，我实现了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框架，则需要替换此行：

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

有了这个代码：

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

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

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