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

309

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

Quiero documentar el --color bandera ... que ... colorea 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>

Sin suerte hasta ahora.

Dave Dopson
fuente
1
Si no puede colorear su texto mediante una reducción, ¿incrustar una captura de pantalla funcionaría?
girasquid
SI. Pensé en eso justo después de publicar esta pregunta. Creo que la captura de pantalla podría ser mi mejor respuesta alternativa, aunque claramente no es la ideal.
Dave Dopson
1
¿Entonces todavía no es posible agregar color al texto en el archivo de descuento?
Nam Nguyen
2
no - y es julio de 2014
ffs

Respuestas:

353

Vale la pena mencionar que puede agregar algo de color en un archivo README utilizando un servicio de imagen de marcador de posición. Por ejemplo, si desea proporcionar una lista de colores para referencia:

- ![#f03c15](https://via.placeholder.com/15/f03c15/000000?text=+) `#f03c15`
- ![#c5f015](https://via.placeholder.com/15/c5f015/000000?text=+) `#c5f015`
- ![#1589F0](https://via.placeholder.com/15/1589F0/000000?text=+) `#1589F0`

Produce:

  • # f03c15 #f03c15
  • # c5f015 #c5f015
  • # 1589F0 #1589F0
AlecRust
fuente
Esto funciona muy bien en las tarjetas dentro de un proyecto de GitHub y se pueden usar para etiquetar las tarjetas y colorearlas
Ziad Akiki
1
@BinarWeb, ¿dónde estás poniendo esto? Funcionará en GitHub, por ejemplo, que admite imágenes en Markdown.
AlecRust
3
a medida que se preguntaba, quería colorear el texto, no tener una imagen delante del texto
Binar Web
44
Lo que he descrito funciona. También puede poner texto en color en la imagen, por ejemplohttps://placehold.it/150/ffffff/ff0000?text=hello
AlecRust
Información muy útil, útil al crear aplicaciones web en el backend.
Tropicalrambler
193

Puede usar 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 cualquiera - + ! #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
fuente
1
También colorea el texto rodeado de @@púrpura (y negrita). Codecov aprovecha esto en los comentarios de su robot de integración de GitHub, por ejemplo: github.com/zeit/now/pull/2570#issuecomment-512585770
Jacob Ford
79

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

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

`` `json
   // código para colorear
`` `
`` `HTML
   // código para colorear
`` `
`` `js
   // código para colorear
`` `
`` `css
   // código para colorear
`` `
// etc.

No se necesitan etiquetas "pre" o "code".

Esto está cubierto en la documentación de GitHub Markdown (aproximadamente a la mitad de la página, hay un ejemplo usando 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 del Linguist .

totalmente total
fuente
44
@NielsAbildgaard ¡Gracias! :) La respuesta es que no se puede colorear el texto sin formato en archivos .md de GitHub al menos en este momento. Lo dije y pasé unas 4 horas investigándolo. De todos modos, gracias por señalar mis útiles etiquetas de código .md, ¡lo aprecio!
Totaltotallyamazing
1
No pude hacerlo funcionar tampoco, pero es extraño porque el atributo de color está en la lista blanca: github.com/github/markup/tree/master#html-sanitization
dotMorten
@dotMorten no estoy seguro, pero creo que querías dejar tu último comentario en la publicación de Scott H justo encima de la mía.
Totaltotallyamazing
1
Solía ​​´´´´ Deprecated´´´´. Funcionó bien, para agregar etiquetas en desuso a los documentos.
MRodrigues
44
Puede usar la etiqueta de idioma `` diff```` para generar texto resaltado en verde y rojo.
craigmichaelmartin
42

Desafortunadamente, esto no es posible actualmente.

La documentación de GitHub Markdown no menciona 'color', 'css', 'html' o 'style'.

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

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

M-Pixel
fuente
11
No se descarta HTML en general, hr, br, p, b, iy otros hacen el trabajo!
CodeManX
Si reenvía un archivo README.html, es posible que desee mantener una copia del mismo en el repositorio para no perder su historial de confirmación. Si te sientes particularmente astuto, incluso podrías incluirlo en tus páginas gh.
Sandy Gifford
2
Consulte el código fuente de jch / html-pipeline para conocer las etiquetas y atributos HTML reales que permite GitHub.
Jason Antman
21

Como alternativa a representar una imagen ráster, puede incrustar un archivo SVG:

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

Luego puede agregar texto en color al archivo SVG como de costumbre:

<?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 .svgarchivo, el texto no se puede seleccionar cuando la imagen SVG está incrustada.

Demostración: https://gist.github.com/CyberShadow/95621a949b07db295000

Vladimir Panteleev
fuente
20

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

GitHub permite algunos elementos y atributos HTML, pero solo algunos (consulte su documentación sobre su desinfección HTML ). Permiten py divetiquetas, así como coloratributos. Sin embargo, cuando intenté usarlos en un documento de descuento 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 referirlo a él.

Scott H
fuente
66
Sí, desafortunadamente no funciona en Github, como dice mi respuesta.
Scott H
Consulte el código fuente de jch / html-pipeline para conocer las etiquetas y atributos HTML reales que permite GitHub.
Jason Antman
5

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

Luke Hutchison
fuente
3

Al momento de escribir, Github Markdown renderiza códigos de color como `#ffffff`(¡tenga en cuenta los backticks!) Con una vista previa de color. Simplemente use un código de color y envuélvalo con comillas.

Por ejemplo:

Descuento de GitHub con códigos de colores

se convierte

reducción de GitHub procesada con códigos de color

bwindels
fuente
55
Lo intenté y no parece funcionar. ¿Puedes vincular a un ejemplo?
Dave Dopson
2
Incluyendo comillas inversas, como`#hexhex`
bwindels
2

Basado en la idea de @AlecRust, hice una implementación del servicio de texto png.

La demo está aquí:

http://lingtalfi.com/services/pngtext?color=cc0000&size=10&text=Hello%20World

Hay cuatro parámetros:

  • texto: la cadena a mostrar
  • fuente: no uso porque solo tengo Arial.ttf de todos modos en esta demostración.
  • fontSize: un entero (el valor predeterminado es 12)
  • color: un código hexadecimal de 6 caracteres

No use este servicio directamente (excepto para las pruebas), pero use la clase que creé que proporciona el servicio:

https://github.com/lingtalfi/WebBox/blob/master/Image/PngTextUtil.php

class PngTextUtil
{
    /**
     * Displays a png text.
     *
     * Note: this method is meant to be used as a webservice.
     *
     * Options:
     * ------------
     * - font: string = arial/Arial.ttf
     *          The font to use.
     *          If the path starts with a slash, it's an absolute path to the font file.
     *          Else if the path doesn't start with a slash, it's a relative path to the font directory provided
     *          by this class (the WebBox/assets/fonts directory in this repository).
     * - fontSize: int = 12
     *          The font size.
     * - color: string = 000000
     *          The color of the text in hexadecimal format (6 chars).
     *          This can optionally be prefixed with a pound symbol (#).
     *
     *
     *
     *
     *
     *
     * @param string $text
     * @param array $options
     * @throws \Bat\Exception\BatException
     * @throws WebBoxException
     */
    public static function displayPngText(string $text, array $options = []): void
    {
        if (false === extension_loaded("gd")) {
            throw new WebBoxException("The gd extension is not loaded!");
        }
        header("Content-type: image/png");
        $font = $options['font'] ?? "arial/Arial.ttf";
        $fontsize = $options['fontSize'] ?? 12;
        $hexColor = $options['color'] ?? "000000";
        if ('/' !== substr($font, 0, 1)) {
            $fontDir = __DIR__ . "/../assets/fonts";
            $font = $fontDir . "/" . $font;
        }
        $rgbColors = ConvertTool::convertHexColorToRgb($hexColor);
        //--------------------------------------------
        // GET THE TEXT BOX DIMENSIONS
        //--------------------------------------------
        $charWidth = $fontsize;
        $charFactor = 1;
        $textLen = mb_strlen($text);
        $imageWidth = $textLen * $charWidth * $charFactor;
        $imageHeight = $fontsize;
        $logoimg = imagecreatetruecolor($imageWidth, $imageHeight);
        imagealphablending($logoimg, false);
        imagesavealpha($logoimg, true);
        $col = imagecolorallocatealpha($logoimg, 255, 255, 255, 127);
        imagefill($logoimg, 0, 0, $col);
        $white = imagecolorallocate($logoimg, $rgbColors[0], $rgbColors[1], $rgbColors[2]); //for font color
        $x = 0;
        $y = $fontsize;
        $angle = 0;
        $bbox = imagettftext($logoimg, $fontsize, $angle, $x, $y, $white, $font, $text); //fill text in your image
        $boxWidth = $bbox[4] - $bbox[0];
        $boxHeight = $bbox[7] - $bbox[1];
        imagedestroy($logoimg);
        //--------------------------------------------
        // CREATE THE PNG
        //--------------------------------------------
        $imageWidth = abs($boxWidth);
        $imageHeight = abs($boxHeight);
        $logoimg = imagecreatetruecolor($imageWidth, $imageHeight);
        imagealphablending($logoimg, false);
        imagesavealpha($logoimg, true);
        $col = imagecolorallocatealpha($logoimg, 255, 255, 255, 127);
        imagefill($logoimg, 0, 0, $col);
        $white = imagecolorallocate($logoimg, $rgbColors[0], $rgbColors[1], $rgbColors[2]); //for font color
        $x = 0;
        $y = $fontsize;
        $angle = 0;
        imagettftext($logoimg, $fontsize, $angle, $x, $y, $white, $font, $text); //fill text in your image
        imagepng($logoimg); //save your image at new location $target
        imagedestroy($logoimg);
    }
}

Nota: si no utiliza el marco de universo , deberá reemplazar esta línea:

$rgbColors = ConvertTool::convertHexColorToRgb($hexColor);

Con este código:

$rgbColors = sscanf($hexColor, "%02x%02x%02x");

En cuyo caso, su color hexadecimal debe tener exactamente 6 caracteres de largo (no ponga el símbolo hash (#) delante de él).

Nota: al final, no utilicé este servicio, porque descubrí que la fuente era fea y peor: no era posible seleccionar el texto. Pero por el bien de esta discusión, pensé que valía la pena compartir este código ...

abadejo
fuente