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

168

我的项目underscore-cli有一个README.md文件，这是一个在命令行上黑客JSON和JS的漂亮工具。如何为Github的README.md文件添加颜色

我想记录“--color”标志...哪些颜色的东西。如果我真的能够显示输出结果的话，那会更好一些。我似乎无法找到添加颜色到我的README.md的方法。有任何想法吗？到目前为止

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

没有运气：

我已经试过这样：

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

这。

来源

2012-07-16 Dave Dopson

如果你不能c通过降价让你的文字更加完美，会嵌入截图工作吗？ – girasquid 2012-07-16 17:57:04

是的。我在发布这个问题之后想到了这一点。我认为截图可能是我最好的回退答案，尽管这显然不理想。 – 2012-07-16 18:01:54

所以现在还不可能在降价文件中为文本添加颜色？ – 2014-04-13 07:42:52

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

要做到这一点只需添加标签，如这些样品您README.md文件：

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

否“前”或需要“代码”标签。

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

来源

2014-06-11 16:26:19 totallytotallyamazing

虽然这不是一个问题的答案，这是非常有趣的:) – 2014-09-04 11:02:06

@NielsAbildgaard谢谢！ :)答案是，至少在这个时候，你不能在GitHub .md文件中着色纯文本。我确实说过，花了大约4个小时来研究它。无论如何谢谢你指出我有用的.md代码标签，我很感激它！ – totallytotallyamazing 2014-09-04 15:24:59

我也无法使它工作，但它很奇怪，因为颜色属性列入白名单：https://github.com/github/markup/tree/master#html-sanitization – dotMorten 2015-02-12 17:05:11

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

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

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

如果您在自述文件中使用颜色势在必行，那么您的README.md可以简单地将用户引用到README.html。这当然是取舍的。

来源

2014-06-11 23:45:17

它通常不会丢弃HTML，'hr'，'br'，'p'，'b'，'i'等都可以工作！ – CoDEmanX 2015-09-08 20:10:00

如果您转发到README.html，您可能需要将其副本保存在存储库中，以免丢失其提交历史记录。如果你感觉特别狡猾，你甚至可以将它包含在你的gh页面中。 – 2016-01-20 21:21:59

请参阅[jch/html-pipeline]的源代码（https://github.com/jch/html-pipeline/blob/master/lib/html/pipeline/sanitization_filter.rb#L44-L106）了解实际的HTML标签和GitHub允许的属性。 – 2017-12-14 12:35:35

我倾向于同意Qwertman，目前无法为GitHub降价中的文本指定颜色，至少不能通过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中执行并将它们引用到它。

来源

2014-08-29 15:29:36

看起来我的答案最近得到了一些反对票。我会很感激对答案的任何反馈，以便我可以改进这个问题，或者总体上提供更好的答案。 – 2015-07-30 20:05:21

它工作，但不在github！ – Salar 2015-09-12 18:04:30

是的，不幸的是它在Github中不起作用，正如我的回答所述。 – 2015-09-14 19:17:41

作为替代渲染光栅图像，在那里你可以嵌入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

来源

2016-03-20 02:31:28

您可以使用diff语言标记来生成绿色和红色突出显示的文本：

```diff 
+ this will be highlighted in green 
- this will be highlighted in red 
```

来源

2016-09-09 14:23:03 craigmichaelmartin

是的，但那只是两种（也许是三种）颜色... – 2017-12-18 22:55:47

128

值得一提的是，你可以在一个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`

产地：