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


308

README.md为我的项目underscore-cli提供了一个文件,这是一个非常不错的工具,可以在命令行上破解JSON和JS。

我要记录--color标志...可以给东西着色。如果我可以实际显示输出的样子,那将会更好。我似乎无法找到一种为我的作品增色的方法README.md。有任何想法吗?

我已经试过了:

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

和这个:

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

到目前为止没有运气。


1
如果您无法通过Markdown为文本着色,则嵌入屏幕截图会起作用吗?
girasquid

是。我发布这个问题后就想到了这一点。我认为屏幕截图可能是我最好的后备答案,尽管显然这并不理想。
戴夫·多普森

1
因此尚无法为markdown文件中的文本添加颜色?
南阮

2
nope-

Answers:


352

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

- ![#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 #f03c15
  • #c5f015 #c5f015
  • #1589F0 #1589F0

这卡GitHub的项目中的伟大工程,这些可以被用来标记牌和彩色他们
齐亚德Akiki

1
@BinarWeb你在哪里放这个?例如将在GitHub上运行,它支持Markdown中的图像。
AlecRust

3
正如所提出的问题一样,我想给文本加上颜色,而不要在文本前面加上图片
Binar Web

4
我所描述的有效。您还可以在图像中放置彩色文本,例如https://placehold.it/150/ffffff/ff0000?text=hello
AlecRust

非常有用的信息,在后端创建Web应用程序时非常有用。
Tropicalrambler

193

您可以使用difflanguage标签生成一些彩色文本:

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

但是,它将其添加为以以下任一行开头的新行 - + ! #

在此处输入图片说明

这个问题在github标记#369中提出,但自那时以来(2014),他们就没有做出任何决定。


1
它还用紫色(和粗体)为包围的文本上色@@。Codecov在其GitHub集成机器人的注释中利用了这一点,例如:github.com/zeit/now/pull/2570#issuecomment-512585770
Jacob Ford

79

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

为此,只需将诸如以下示例的标签添加到您的README.md文件中:

json
   //着色代码
```
html
   //着色代码
```
```js
   //着色代码
```
```css
   //着色代码
```
//等

不需要“ pre”或“ code”标签。

GitHub Markdown文档中对此进行了介绍(大约在页面的中间,有一个使用Ruby的示例)。GitHub使用Linguist来识别和突出显示语法-您可以在Linguist的YAML文件中找到支持的语言的完整列表(及其markdown关键字)。


4
@NielsAbildgaard谢谢!:)答案是,至少当前您不能为GitHub .md文件中的纯文本着色。我确实声明了这一点,并花了大约4个小时研究它。无论如何,谢谢您指出我有用的.md代码标签,我对此表示感谢!
2014年

1
我也无法正常工作,但是很奇怪,因为color属性已列入白名单:github.com/github/markup/tree/master#html-sanitization
dotMorten 2015年

@dotMorten不确定,但我想您是想对Scott H的职位发表最后的评论?
ttotoallyamazing 2015年

1
我用了Deprecated´´´´´´´´。正常工作,用于添加不推荐使用的文档标签。
MRodrigues

4
您可以使用`diff``语言标记生成绿色和红色突出显示的文本。
craigmichaelmartin's

42

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

GitHub的降价文件没有提及“颜色”,“样式表”,“HTML”,或“风格”的。

虽然某些Markdown处理器(例如Ghost中使用的处理器)允许使用HTML,例如<span style="color:orange;">Word up</span>,但是GitHub放弃了任何HTML。

如果必须在自述文件中使用颜色,则README.md可以简单地将用户引向README.html。当然,要权衡的是可访问性。


11
它没有一般丢弃HTML, ,hrbr,,p 和别人做的工作!bi
CodeManX

如果确实转至README.html,则可能要在存储库中保留它的副本,以免丢失其提交历史记录。如果您感觉特别狡猾,甚至可以将其包括在gh页中。
桑迪·吉福德

2
有关GitHub允许的实际HTML标记和属性,请参见jch / html-pipeline的源代码。
杰森·安特曼

21

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


20

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

GitHub确实允许一些HTML元素和属性,但只允许某些(请参阅有关HTML清理的文档)。它们确实允许pdiv标记,以及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中进行设置并将其引用。


6
是的,很不幸,正如我的回答所说,它在Github中不起作用。
Scott H

有关GitHub允许的实际HTML标记和属性,请参见jch / html-pipeline的源代码。
杰森·安特曼

5

我使用emoji Enicode字符(例如💡或🛑)向GitHub标记页面添加了一些颜色-一些浏览器中为一些emoji字符着色。(据我所知,没有彩色的表情符号字母。)


3

在撰写本文时,Github Markdown `#ffffff`使用颜色预览来呈现颜色代码(请注意反引号!)。只需使用颜色代码,并用引号将其括起来即可。

例如:

带有颜色代码的GitHub markdown

变成

用颜色代码渲染GitHub markdown


5
我试过了,似乎没有用。您可以链接到示例吗?
戴夫·多普森

2
包括反引号,例如`#hexhex`
bwindels

2

基于@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个字符长(不要在其前面加上井号(#))。

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.