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

Resuelto Dave Dopson asked hace 12 años • 23 respuestas

Tengo un README.mdarchivo para mi proyecto underscore-cli y quiero documentar la --colorbandera.

Actualmente, la única forma de hacerlo es con una captura de pantalla (que se puede almacenar en el repositorio del proyecto):

ejemplo.png

Pero las capturas de pantalla no son texto, lo que impide que los lectores copien y peguen el comando en la captura de pantalla. También son difíciles de crear, editar y mantener, y su carga para los navegadores es más lenta. La web moderna utiliza estilos de texto, no un montón de imágenes de texto renderizadas.

Si bien algunos analizadores de Markdown admiten estilos HTML en línea, GitHub no; esto no funciona:

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

Esto no funciona:

<font color="green"> Some green text </font>
Dave Dopson avatar Jul 17 '12 00:07 Dave Dopson
Aceptado

Una forma de agregar color a un archivo LÉAME es mediante la utilización de un servicio que proporcione imágenes de marcador de posición .

Por ejemplo, se puede utilizar este Markdown:

- ![#f03c15](https://placehold.co/15x15/f03c15/f03c15.png) `#f03c15`
- ![#c5f015](https://placehold.co/15x15/c5f015/c5f015.png) `#c5f015`
- ![#1589F0](https://placehold.co/15x15/1589F0/1589F0.png) `#1589F0`

Para crear una lista de los colores que desee:

  • #f03c15 #f03c15
  • #c5f015 #c5f015
  • #1589F0 #1589F0
Alec Rust avatar Dec 20 '2016 17:12 Alec Rust

Puede utilizar la diffetiqueta de idioma para generar texto en color:

```diff
- text in red
+ text in green
! text in orange
# text in gray
@@ text in purple (and bold)@@
```

Sin embargo, lo agrega como una nueva línea que comienza con - + ! #o comienza y termina con@@

Ingrese la descripción de la imagen aquí

Este problema se planteó en el marcado de GitHub #369 , pero no han realizado ningún cambio en la decisión desde entonces (2014).

craigmichaelmartin avatar Sep 09 '2016 14:09 craigmichaelmartin

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

Para hacer esto, simplemente agregue etiquetas como estas de muestra a su archivo README.md:

```json
   // codigo para colorear
```
```html
   // codigo para colorear
```
```js
   // codigo para colorear
```
```css
   // codigo para colorear
```
// 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 usa 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 rebajas) en el archivo YAML de Linguist .

totallytotallyamazing avatar Jun 11 '2014 16:06 totallytotallyamazing

Ahora, desde mayo de 2022, Github puede aceptar código LATEX en Markdown , por lo que puede usar el \color{namecolor}interior del $$$$bloque, como en el siguiente ejemplo:

Básico

Código apareciendo
$${\color{red}Red}$$ $${\color{rojo}Rojo}$$
$${\color{green}Green}$$ $${\color{verde}Verde}$$
$${\color{lightgreen}Light \space Green}$$ $${\color{verde claro}Verde \espacio claro}$$
$${\color{blue}Blue}$$ $${\color{azul}Azul}$$
$${\color{lightblue}Light \space Blue}$$ $${\color{azul claro}Azul claro \espacio}$$
$${\color{black}Black}$$ $${\color{negro}Negro}$$
$${\color{white}White}$$ $${\color{blanco}Blanco}$$

Más de un color

  • Código
$${\color{red}Welcome \space \color{lightblue}To \space \color{orange}Stackoverflow}$$
  • Visualización

$${\color{red}Bienvenido \space \color{lightblue}A \space \color{orange}Stackoverflow}$$

  • Este código en Github:

Prueba en vivo de Github

F4NT0 avatar Sep 05 '2022 19:09 F4NT0