Cómo agregar color al archivo README.md de Github

Question

Tengo un archivo README.md para mi proyecto underscore-cli, una herramienta bastante dulce para hackear JSON y JS en la línea de comandos.

Quiero documentar el indicador "--color" ... que ... colorea cosas. Eso sería mucho mejor si realmente pudiera mostrar cómo se ve la salida. Parece que no puedo encontrar una forma de agregar color a mi archivo README.md. ¿Algunas ideas?

He intentado esto:

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

Y esto:

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

No hubo suerte hasta ahora.

Answer 1

No se puede colorear texto sin formato en un archivo GitHub README.md. Sin embargo, puede agregar color a muestras de código con las etiquetas a continuación.

Para hacer esto sólo tiene que añadir etiquetas como estas muestras a su archivo README.md:

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

No "pre" o "código" etiquetas necesarias.

Esto está cubierto en el GitHub Markdown documentation (aproximadamente a la mitad de la página, hay un ejemplo con Ruby). GitHub usa Linguist para identificar y resaltar la sintaxis; puede encontrar una lista completa de los idiomas admitidos (así como sus palabras clave de reducción) en el Linguist's YAML file.

Answer 2

Desafortunadamente, esto no es posible actualmente.

El GitHub Markdown documentation no menciona "color", "css", "html" o "estilo".

Mientras que algunos procesadores Markdown (por ejemplo, el usado en Ghost) permiten HTML, como <span style="color:orange;">Word up</span>, GitHub descarta cualquier HTML.

Si es imperativo que use color en su archivo Léame, su archivo README.md podría simplemente referir a los usuarios a un archivo README.html. La compensación para esto, por supuesto, es la accesibilidad.

Answer 3

Estoy de acuerdo con Qwertman en que actualmente no es posible especificar el color para el texto en el marcado de GitHub, al menos no a través de HTML.

GitHub permite algunos elementos y atributos de HTML, pero solo algunos (consulte su documentación acerca de su HTML sanitization). Permiten etiquetas p y div, así como el atributo color. Sin embargo, cuando traté de usarlos en un documento de rebajas en GitHub, no funcionó. He intentado lo siguiente (entre otras variaciones), y que no funcionó:

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

Como sugirió Qwertman, si realmente debe utilizar el color que pudiera hazlo en un archivo README.html y remítelos a él.

Answer 4

Como alternativa a proporcionar una imagen de mapa de bits, donde se puede incrustar un archivo SVG en código de rebajas como:

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

Entonces Imagen SVG puede verse como:

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

Desafortunadamente, a pesar de puede seleccionar y copiar texto cuando abre el archivo .svg, el texto no se puede seleccionar cuando la imagen SVG está incrustada.

Ver la demo: https://gist.github.com/CyberShadow/95621a949b07db295000

Answer 5

Usted puede utilizar la etiqueta diff lenguaje para generar verde y rojo texto resaltado:

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

Answer 6

Vale la pena mencionar que se puede añadir un poco de color en un README usando un marcador de posición servicio de imágenes. Por ejemplo, si desea proporcionar una lista de colores de referencia:

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

Produce:

• #f03c15
• #c5f015
• #1589F0