Cómo agregar color al archivo README.md de GitHub
Tengo un README.md
archivo para mi proyecto underscore-cli y quiero documentar la --color
bandera.
Actualmente, la única forma de hacerlo es con una captura de pantalla (que se puede almacenar en el repositorio del proyecto):
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>
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
-
#c5f015
-
#1589F0
Puede utilizar la diff
etiqueta 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@@
Este problema se planteó en el marcado de GitHub #369 , pero no han realizado ningún cambio en la decisión desde entonces (2014).
No puedes colorear texto sin formato en un README.md
archivo 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 .
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: