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

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

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

#1 楼

值得一提的是，您可以使用占位符图像服务在自述文件中添加一些颜色。例如，如果您想提供颜色列表供参考：

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

产品：



#f03c15


#c5f015


#1589F0

#2 楼

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

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

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



在github标记＃369中提出了此问题，但自那时以来（2014年）以来，他们没有做出任何更改。

#3 楼

您无法在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文档中进行了介绍（大约在页面的一半，有一个使用Ruby的示例）。 GitHub使用Linguist识别并突出显示语法-您可以在Linguist的YAML文件中找到支持的语言的完整列表（及其markdown关键字）。

#4 楼

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

GitHub Markdown文档中没有提及'color'，'css'，'html'或'style'。

一些Markdown处理器（例如，在Ghost中使用的处理器）允许HTML，例如<span style="color:orange;">Word up</span>，GitHub会丢弃任何HTML。用户使用README.html。当然，要权衡的是可访问性。

#5 楼

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

#6 楼

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

GitHub确实允许一些HTML元素和属性，但仅允许某些元素和属性（请参阅有关HTML清理的文档）。它们确实允许使用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>.

就像Qwertman所建议的那样，如果您真的必须使用颜色，则可以在README.html中进行设置，然后将其引用。

#7 楼

在撰写本文时，Github Markdown使用颜色预览呈现了诸如`#ffffff`（请注意反引号！）之类的颜色代码。只需使用颜色代码并用反引号将其括起来即可。

例如：

#8 楼

我使用表情符号Enicode字符向GitHub标记页面添加了一些颜色，例如💡或🛑-一些浏览器中的表情符号字符是彩色的。
也有一些彩色的表情符号字母：血液类型🅰️🅱️🅾️;停车标志🅿️;地铁标志Ⓜ️;其他一些带有两个或多个字母（例如🆗）和带框的数字（例如0️⃣）。如果没有可用的标志，表情符号表情符号将显示为字母（通常是彩色的）。
但是，我认为那里没有是用表情符号定义的完整彩色字母。

#9 楼

如果您可以接受有限的各种颜色和形状（尽管它们在不同的操作系统/浏览器中可能看起来有所不同），则这些表情符号字符也很有用。这是@AlecRust答案的替代方法（它需要外部服务，有一天可能会关闭） ）：
🔴🟠🟡🟢🔵🟣🟤⚫⚪🔘🛑
🟥🟧🟨🟩🟦🟪🟫⬛⬜🔲🔳
❤️🧡💛💚💜💙🤎🖤🤍♥️💔💖💘💝 💗💓💟💕❣️♡◻️◼️◾️◽️▪️️️️️
还有许多彩色的矩形字符带有字母数字/箭头/其他符号可能对您有用。
这些是肤色修饰剂，其肤色在此矩形的形状内（单独使用，否则它们可能会修改同级表情符号的输出）

评论

---

这是我的用例，通过这种方法解决了（在这里阅读答案后才想到）：gist.github.com/unicornist/60c70a8fd02bf8721969b7ce6b425982

–独角兽
20 Dec 7'0:00

---

这是一个很好的技巧！它不能解决最初导致我提出问题的语法突出显示需求，但它可能可以满足多种其他需求。

–戴夫·多普森
20 Dec 9'在23:45

---

#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框架，则需要替换以下行：

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

使用此代码：

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

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

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

#11 楼

<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, 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=""
shift
(
    echo '<pre>'
    $cmd --color=always "$@" 2>&1 | aha --no-header
    echo '</pre>'
) \
| sed -E 's/<span style="[^"]*color:([^;"]+);"/<span color=""/g' \
| sed -E 's/ style="[^"]*"//g' \
| xclip -i -sel clipboard
 

平凡的:)

#12 楼

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

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