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

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

以下是预览效果:

可选字体：

mathcal - mathbb - mathscr - mathfrak - mathcal

可选颜色：

black, blue, brown, cyan, darkgray, gray, green, lightgray, lime, magenta, olive, orange, pink, purple, red, teal, violet, white, yellow

• 使用$..$表示内联代码，$$..$$表示居中代码
• 您可以使用\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）

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

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

$\color[gray]{0.3} hello$

请记得在$之后换行，否则它将无法被处理。

参考资料： https://en.wikibooks.org/wiki/LaTeX/

可以做类似于这样的事情：


也许不是完全回答了提问者的问题，但当我处于 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)

参考资料

参考GitHub支持的颜色模型，他们明确指出：

注：

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

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

所以，虽然它们不通过GitHub标记语言进行支持，但是如果您参考GitHub文档中的数学表达式部分，他们明确指出：

为了清晰地传达数学表达式，GitHub 支持在 Markdown 中使用 LaTeX 格式的数学公式。更多信息请参见Wikibooks上的LaTeX / Mathematics。

这意味着GitHub不支持在README.md文件中使用颜色模型，但支持LaTeX / Mathematics，而LaTeX / Mathematics支持在README.md中使用颜色模型。

如果您参考LaTeX / Mathematics提供的网站，将找到一个名为Color的部分。它提供的有限的信息，但是提供了一个链接LaTeX / Colors，其中包含有关如何使用 LaTeX 颜色的所有有用信息。

要使用LaTeX / Colors，您应该在GitHub README中使用数学表达式，因此请参考之前GitHub文档中的数学表达式部分，他们明确指出：

• 要将数学表达式内联到文本中，请用美元符号$界定表达式。

• 要将数学表达式添加为块，请启动新行并用两个美元符号$$界定表达式。

例如，如果您在LaTeX / Colors中找到一个表达式，如下所示：

\textcolor{declared-color}{text}

为了按照GitHub的文档在GitHub上执行此操作，您应该像这样执行：

$\color{green}{test}$

以下是输出结果：

---

示例

参考LaTeX/Colors，下面是一些包含图像输出的示例：

输入彩色文本

在README.md文件中以\作为跳过退格的代码：

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

Github中的输出:

为文本输入有色背景

README.md文件中的代码，其中\用于跳过退格：

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

在 GitHub 中输出：

为部分文本更改颜色

在 README.md 文件中的代码，其中使用 \ 跳过回车：

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

在 GitHub 中输出：

等等，您可以自行尝试其余部分。

此外，他们说明：

预定义的颜色名称为

black、blue、brown、cyan、darkgray、gray、green、lightgray、lime、magenta、olive、orange、pink、purple、red、teal、violet、white、yellow。

您也可以自定义颜色，请参考上述LaTeX/Colors并自己尝试。

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

还有一些带有颜色的表情符号字母：血型️️️；停车标志️；地铁标志Ⓜ️；还有一些带有两个或更多字母的表情符号，例如 ，以及带有方框数字的表情符号如0️⃣。如果国旗不可用，则国旗表情符号将显示为字母（通常是彩色的）: 。

然而，我认为没有一个完整的彩色表情符号字母表被定义在emoji中。

要在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文件并按照以下步骤进行操作。

• Open your repository on GitHub.

• Click on the Edit button of the README.md

  

• Drag and drop the SVG file to the opened online editor. GitHub will generate a markdown image. Something like the following.

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

• If you want to change the original sizes of the SVG you can use the generated URL as src of <img/> tag and give the needed sizes.

  <img height="100px" src="https://user-images.githubusercontent.com/000/000-aaa.svg" alt=""/>
  

  

参考AlecRust的想法，我实现了PNG文本服务。

示例在这里:

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

有四个参数：

• text：要显示的字符串
• font：未使用，因为我的演示只有Arial.ttf。
• fontSize：整数（默认为12）
• color：六位十六进制码

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

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");

如果您的十六进制颜色必须正好为六个字符长度（不要在其前面加上井号（#））。

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

如果你想给超过一个单词着色，那么我发现在Github中使用Latex给文本着色是最方便的方法。

$\color{lightblue}{\textrm{Red Nimetaga 3 kõige suuremat pilveteenuste pakkujat}}$  

我在 github 文档页面上找到了解决这个问题的答案。

你可以添加一个可选的语言标识符来启用围栏式代码块的语法高亮。

语法高亮会改变源代码的颜色和样式，使其更易于阅读。

例如，要对 Ruby 代码进行语法高亮：

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
``

这将显示带有语法高亮的代码块： 高亮结果

希望对您的业务有所帮助。 点击此处访问Github文档页面上的解决方案。

更新： 我现在简化了彩色文字，你现在可以这样做： https://server.powerupstudio.eu/svg/text?text=Hello!&color=green&fontSize=50px&fontWeight=100&padding=5&x=10&y=60&fontFamily=Arial 这是你可以与此端点一起使用的所有查询参数，请注意，来自URL的自定义字体不起作用，并且很多SVG功能将受到限制，但仍然有用于轻松生成彩色文本。 请注意，填充参数需要是没有单位的数字，例如px或em。

---

我知道这篇帖子很旧，但如果你需要解决方案，你可以使用我为显示SVG而创建的端点： https://server.powerupstudio.eu/svg?c=(在此处插入SVG内容)
其中(SVG CONTENT HERE)是SVG内容，在这里是一个使用它来显示彩色文本的示例：

<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg"><text x="10" y="30" fill="green" font-family="Arial">Green</text></svg>

转换为URI组件：

%3Csvg%20width%3D%22100%22%20height%3D%2250%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctext%20x%3D%2210%22%20y%3D%2230%22%20fill%3D%22green%22%20font-family%3D%22Arial%22%3EGreen%3C%2Ftext%3E%3C%2Fsvg%3E

并将其与URL一起放置。

https://server.powerupstudio.eu/svg?c=%3Csvg%20width%3D%22100%22%20height%3D%2250%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctext%20x%3D%2210%22%20y%3D%2230%22%20fill%3D%22green%22%20font-family%3D%22Arial%22%3EGreen%3C%2Ftext%3E%3C%2Fsvg%3E

嵌入到Markdown中时，将生成绿色文本“Green”。

![SVG](https://server.powerupstudio.eu/svg?c=%3Csvg%20width%3D%22100%22%20height%3D%2250%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctext%20x%3D%2210%22%20y%3D%2230%22%20fill%3D%22green%22%20font-family%3D%22Arial%22%3EGreen%3C%2Ftext%3E%3C%2Fsvg%3E)

任何类型的svg都可以使用，终端点不会很快挂掉，因为我也会使用它，随意使用吧。