tutorial font examples color code colors github markdown github-pages

colors - examples - md bold font



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

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 la bandera "--color" ... que ... colorea las cosas. Eso sería mucho mejor si pudiera mostrar cómo se ve la salida. Parece que no puedo encontrar una manera de agregar color a mi 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 hay suerte hasta ahora.


Agregué algo de color a una página de marcas de GitHub usando caracteres emoji Enicode, por ejemplo, 💡 o 🛑 - algunos caracteres emoji están coloreados en algunos navegadores. (No hay alfabetos de emoji de colores por lo que sé, sin embargo).


Como alternativa a la representación de una imagen rasterizada, donde puede incrustar un archivo SVG en el código Markdown como:

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

Entonces el archivo 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, aunque puede seleccionar y copiar texto cuando abre el archivo .svg , el texto no se puede seleccionar cuando la imagen SVG está incrustada.

Vea la demostración: https://gist.github.com/CyberShadow/95621a949b07db295000


Desafortunadamente, esto no es posible actualmente.

La documentación de GitHub Markdown no menciona "color", "css", "html" o "estilo".

Mientras que algunos procesadores Markdown (por ejemplo, el que se usa 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 README.md podría simplemente remitir a los usuarios a un archivo README.html. La compensación para esto, por supuesto, es la accesibilidad.


Me inclino a estar de acuerdo con Qwertman en que actualmente no es posible especificar el color del texto en el markdown de GitHub, al menos no a través de HTML.

GitHub permite algunos elementos y atributos de HTML, pero solo algunos (consulte la documentación sobre el github.com/github/markup/tree/master#html-sanitization ). Permiten las etiquetas p y div , así como el atributo de color . Sin embargo, cuando intenté usarlos en un documento de rebajas en GitHub, no funcionó. Intenté lo siguiente (entre otras variaciones), y no funcionaron:

  • <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 usar el color, puede hacerlo en un archivo README.html y referirse a él.


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

Para hacer esto, simplemente agregue 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 se necesitan etiquetas "pre" o "código".

Esto se trata en la documentación de GitHub Markdown (aproximadamente a la mitad de la página, hay un ejemplo que utiliza 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 archivo YAML del Linguist .


Puede usar la etiqueta de idioma diff para generar texto resaltado en verde y rojo:

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


Vale la pena mencionar que puede agregar algo de color en un README utilizando un servicio de imagen de marcador de posición. Por ejemplo, si desea proporcionar una lista de colores para 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