如何爲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`

產地：