Question

我的项目underscore-cli有一个README.md文件，这是一个非常好的工具，用于在命令行上攻击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
+ this will be highlighted in green
- this will be highlighted in red
```

在https://github.com/craigmichaelmartin/sql-toolkit

中可以看到在自述文件中使用它的示例

Answer 3

您无法在GitHub README.md文件中为纯文本添加颜色。但是，您可以使用下面的标记为代码示例添加颜色。

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

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

否＆＃34; pre＆＃34;或＆＃34;代码＆＃34;标签需要。

这在GitHub Markdown documentation中有所涉及（大约在页面的一半，有一个使用Ruby的例子）。 GitHub使用Linguist来识别和突出显示语法 - 您可以在Linguist's YAML file中找到支持的语言的完整列表（以及降价关键字）。

Answer 4

不幸的是，这目前无法实现。

GitHub Markdown documentation没有提到'color'，'css'，'html'或'style'。

虽然某些Markdown处理器（例如Ghost中使用的处理器）允许使用HTML，例如Word up，但GitHub会丢弃任何HTML。

如果您在自述文件中使用颜色是必要的，那么您的README.md可以简单地将用户引用到README.html。当然，这种权衡取决于可访问性。

Answer 5

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

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

This is some red text.
This is some text!
These are red words.

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

Answer 6

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

Answer 7

撰写本文时，Github Markdown使用颜色预览呈现`#hexhex`。

Answer 8

如果您可以接受有限的各种颜色和形状（尽管它们在不同的OS /浏览器中可能看起来有所不同），这些表情符号字符也很有用（这是@AlecRust答案的替代方法）（它需要外部服务可能会有一天下去）：

???????⚫⚪??

???????⬛⬜??

❤️????????♥️????????❣️♡

??????

◻️◼️◾️◽️️▫️

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

这些是肤色修饰符，其肤色在这种矩形的形状内（单独使用，否则它们可能会修改同级表情符号的输出）

??

Answer 9

我使用emoji Enicode字符向GitHub标记页面添加了一些颜色，例如或-有些表情符号在某些浏览器中会带有颜色。（据我所知，没有彩色的表情符号字母。）

Answer 10

基于@AlecRust的想法，我实现了png文本服务。

演示在这里：

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

有四个参数：

text：要显示的字符串
字体：不使用，因为在此演示中我只有Arial.ttf。
fontSize：一个整数（默认为12）
颜色：6个字符的十六进制代码

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

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 webservice.
     *
     * 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 chars).
     *          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");

在这种情况下，您的十六进制颜色必须正好为6个字符长（不要在其前面加上井号（＃））。

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

Answer 11

#!/bin/bash # convert ansi-colored terminal output to github markdown # to colorize text on github, we use red etc # depends on: aha, xclip # 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 ( 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

'bought on (.*) in (.*?):\s+'

琐碎：）

Answer 12

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

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

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

12 个答案: