Jak dodać kolor do pliku README.md Github

Question

Mam plik README.md dla mojego projektu underscore-cli, całkiem słodkie narzędzie do hackowania JSON i JS w linii poleceń.

Chcę udokumentować flagę "--color" ... która ... koloruje rzeczy. Byłoby o wiele lepiej, gdybym mógł pokazać, jak wygląda wynik. Nie mogę znaleźć sposobu na dodanie koloru do pliku README.md. Jakieś pomysły?

Próbowałem to:

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

a to:

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

nie ma szczęścia do tej pory.

Answer 1

Nie można kolorować zwykłego tekstu w pliku GitHub README.md. Możesz jednak dodać kolor do próbek kodu za pomocą poniższych tagów.

Aby to zrobić wystarczy dodać tagi, takie jak te próbki do pliku README.md:

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

No "pre" lub "kod" tagów potrzebne.

Jest to objęte GitHub Markdown documentation (mniej więcej w połowie strony znajduje się przykład użycia Ruby). GitHub używa Linguist do identyfikacji i podświetlania składni - możesz znaleźć pełną listę obsługiwanych języków (oraz ich słów kluczowych ze zniżkami) w Linguist's YAML file.

Answer 2

Niestety, obecnie nie jest to możliwe.

W nazwie nie ma wzmianki o "kolorze", "css", "html" ani "stylu".

Podczas gdy niektóre procesory Markdown (np. Używane w Ghost) pozwalają na HTML, takie jak <span style="color:orange;">Word up</span>, GitHub odrzuca wszelkie HTML.

Jeśli konieczne jest użycie koloru w pliku readme, plik README.md może po prostu odesłać użytkowników do pliku README.html. Kompromisem w tym jest oczywiście dostępność.

Answer 3

Jestem skłonny zgodzić się z Qwertmanem, że nie jest obecnie możliwe określenie koloru tekstu w teście GitHub, przynajmniej nie przez HTML.

GitHub zezwala na niektóre elementy HTML i atrybuty, ale tylko niektóre (zobacz ich dokumentację na temat ich HTML sanitization). Zezwalają one na znaczniki p i div, a także na atrybut color. Jednak gdy próbowałem ich używać w dokumencie na GitHubie, nie działało. Próbowałem następujące (między innymi zmianami) i nie działa:

• <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>.

Jak sugeruje Qwertman, jeśli naprawdę muszą używać koloru mogłeś zrób to w pliku README.html i skieruj go do niego.

Answer 4

Jako alternatywę do renderowania obrazu rastrowego, w którym można osadzić plik SVG w kodzie Markdown jak:

<a><img src="http://dump.thecybershadow.net/6c736bfd11ded8cdc5e2bda009a6694a/colortext.svg"/></a> 

Następnie plik SVG może wyglądać następująco:

<?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> 

Niestety, mimo można wybrać i skopiować tekst po otwarciu pliku .svg, tekst nie jest dostępny do wyboru po osadzeniu obrazu SVG.

Zobacz Demo: https://gist.github.com/CyberShadow/95621a949b07db295000

Answer 5

Można użyć tagu diff języka do generowania zielony i czerwony podświetlony tekst:

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

Answer 6

Warto wspomnieć, że można dodać trochę koloru w README stosując zastępczy usługa obrazu. Na przykład, jeśli chcesz dostarczyć listę kolorów dla odniesienia:

- ![#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` 

produkuje:

• #f03c15
• #c5f015
• #1589F0