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

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.

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
• #c5f015
• #1589F0

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

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

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.

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

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.

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é).

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:

se convierte

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