README.md我的项目underscore-cli有一个文件，我想记录该--color标志。
目前，唯一的方法是使用屏幕截图（可以存储在项目存储库中）：
但截图不是文本，防止读者在截图中复制/粘贴命令。它们的创建/编辑/维护也很痛苦，并且浏览器加载速度较慢。现代网络使用文本样式，而不是一堆渲染的文本图像。
虽然一些 Markdown 解析器支持内联 HTML 样式，但 GitHub 不支持；这不起作用：
<span style="color: green"> Some green text </span>
这不起作用：
<font color="green"> Some green text </font>
为自述文件添加颜色的一种方法是利用提供占位符图像的服务。
例如，可以使用这个 Markdown：
-  `#f03c15`
-  `#c5f015`
-  `#1589F0`
要创建您喜欢的任何颜色的列表：
#f03c15#c5f015#1589F0您可以使用diff语言标签生成一些彩色文本：
```diff
- text in red
+ text in green
! text in orange
# text in gray
@@ text in purple (and bold)@@
```
但是，它将它添加为一个以要么开头的新行，要么- + ! #以开头和结尾@@
这个问题是在GitHub 标记 #369中提出的，但自那以后（2014 年）他们没有对决定做出任何改变。
您不能在 GitHubREADME.md文件中为纯文本着色。但是，您可以使用以下标签为代码示例添加颜色。
为此，只需将这些示例之类的标签添加到您的 README.md 文件中：
```json // 着色代码 ``` ```html // 着色代码 ``` ```js // 着色代码 ``` ```css // 着色代码 ``` // ETC。
不需要“pre”或“code”标签。
这在GitHub Markdown 文档中有介绍（大约在页面的一半处，有一个使用 Ruby 的示例）。GitHub 使用Linguist来识别和突出语法 - 您可以在Linguist 的 YAML 文件中找到支持的语言（以及它们的 markdown 关键字）的完整列表。
不幸的是，目前这是不可能的。
GitHub Markdown 文档没有提到“颜色”、“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 的答案的替代方案，它需要有朝一日可能会停止的外部服务，并考虑使用Luke Hutchison 的回答中的表情符号：
⚫⚪⭕</p>
⬛⬜⏹☑✅❎
❤️♥️❣️♡</p>
♦</p>
◻️◼️◾️◽️▪️▫️
还有许多带有字母数字、箭头和其他符号的彩色矩形字符可能适合您。
示例用法： 这是我用这些表情符号解决的用例（在阅读此处的答案后想到）
此外，以下表情符号是肤色修饰符，仅在某些设备上具有这种矩形形状内的肤色。例如，在 Windows 中，它们甚至没有颜色。不要使用它们！因为它们不应该单独使用，所以它们应该与其他表情符号一起使用来修改其兄弟表情符号的输出。而且它们在单独使用时在不同的操作系统、版本、浏览器和版本组合中呈现出如此大的差异。
我倾向于同意M-Pixel的观点，即目前无法为 GitHub Markdown 内容中的文本指定颜色，至少不能通过 HTML。
GitHub 确实允许一些 HTML 元素和属性，但只允许某些（请参阅他们的有关其HTML sanitization的文档）。它们确实允许p和div标记，以及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文件中执行此操作并将其引用。
在撰写本文时，GitHub Markdown`#ffffff`使用颜色预览呈现颜色代码（注意反引号！）。只需使用颜色代码并用反引号将其包围。
例如：
变成
我使用 emoji Unicode 字符为 GitHub 标记页面添加了一些颜色，例如，或者 - 在某些浏览器中，某些 emoji 字符是彩色的。
还有一些彩色的表情符号字母：血型️️️；停车标志️; 地铁标志Ⓜ️; 其他一些有两个或多个字母的，例如 ，和框数字，例如 0️⃣。如果标志不可用，标志表情符号将显示为字母（通常是彩色）：.
但是，我认为表情符号中没有定义完整的彩色字母表。
基于AlecRust 的想法，我做了一个 PNG 文本服务的实现。
演示在这里：
http://lingtalfi.com/services/pngtext?color=cc0000&size=10&text=Hello%20World
有四个参数：
请不要直接使用此服务（测试除外），而是使用我创建的提供服务的类：
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");
在这种情况下，您的十六进制颜色必须正好是六个字符长（不要将井号 (#) 放在它前面）。
注意：最后我没有使用这个服务，因为我发现字体很丑更糟糕：无法选择文字。但为了讨论，我认为这段代码值得分享......
可能不是所问问题的确切答案，但是当我处于 OP 的情况时，我正在寻找以下解决方案：
只需：
[](https://github.com/hamzamohdzubair/redant)
[](https://hamzamohdzubair.github.io/redant/)
[](https://docs.rs/crate/redant/latest)
[](https://crates.io/crates/redant)
[](https://lib.rs/crates/redant)
问题是“如何在 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>