Como adicionar cores ao arquivo README.md do Github

Eu tenho um README.mdarquivo para o meu projeto underscore-cli , uma ferramenta muito boa para invadir JSON e JS na linha de comando.

Quero documentar a --colorbandeira ... que ... pinta as coisas. Isso seria muito melhor se eu pudesse realmente mostrar como é a saída. Não consigo encontrar uma maneira de adicionar cor ao meu README.md. Alguma ideia?

Eu tentei isso:

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

E isto:

<font color="green"> Some green text </font>

Sem sorte até agora.

Vale ressaltar que você pode adicionar um pouco de cor em um README usando um serviço de imagem de espaço reservado. Por exemplo, se você deseja fornecer uma lista de cores para referência:

- ![#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`

Produz:

• #f03c15
• #c5f015
• #1589F0

Você pode usar a difftag language para gerar algum texto colorido:

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

No entanto, ele é adicionado como uma nova linha começando com ou - + ! #ou começa e termina com@@

Esse problema foi levantado na marcação no github # 369 , mas eles não fizeram nenhuma alteração na decisão desde então (2014).

Você não pode colorir texto sem formatação em um README.mdarquivo do GitHub . No entanto, você pode adicionar cores às amostras de código com as tags abaixo.

Para fazer isso, adicione tags como essas amostras ao seu arquivo README.md:

`` json
   // código para colorir
`` ``
`` html
   // código para colorir
`` ``
`` js
   // código para colorir
`` ``
`` css
   // código para colorir
`` ``
// etc.

Não são necessárias tags "pré" ou "código".

Isso é abordado na documentação do GitHub Markdown (na metade da página, há um exemplo usando o Ruby). O GitHub usa o Linguist para identificar e destacar a sintaxe - você pode encontrar uma lista completa dos idiomas suportados (bem como as palavras-chave de remarcação) no arquivo YAML do Linguist .

Infelizmente, no momento isso não é possível.

A documentação do GitHub Markdown não menciona 'color', 'css', 'html' ou 'style'.

Enquanto alguns processadores Markdown (por exemplo, o usado no Ghost ) permitem HTML, como o <span style="color:orange;">Word up</span>GitHub, descarta qualquer HTML.

Se for imperativo que você use cores em seu leia-me, o arquivo README.md poderá simplesmente encaminhar os usuários para um README.html. A compensação por isso, é claro, é acessibilidade.

Como alternativa à renderização de uma imagem raster, você pode incorporar um arquivo SVG:

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

Você pode adicionar texto colorido ao arquivo SVG como de costume:

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

Infelizmente, mesmo que você possa selecionar e copiar texto ao abrir o .svgarquivo, o texto não é selecionável quando a imagem SVG é incorporada.

Demonstração: https://gist.github.com/CyberShadow/95621a949b07db295000

Estou inclinado a concordar com Qwertman que atualmente não é possível especificar cores para texto na marcação do GitHub, pelo menos não através de HTML.

O GitHub permite alguns elementos e atributos HTML, mas apenas alguns (consulte a documentação sobre a higienização do HTML ). Eles permitem pe divmarcam, além de coloratributos. No entanto, quando tentei usá-los em um documento de remarcação no GitHub, não funcionou. Tentei o seguinte (entre outras variações) e elas não funcionaram:

• <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 Qwertman sugeriu, se você realmente deve usar cores, pode fazê-lo em um arquivo README.html e encaminhá-las para ele.

Adicionei um pouco de cor a uma página de marcação do GitHub usando caracteres Enicode emoji, por exemplo, 💡 ou 🛑 - alguns caracteres emoji são coloridos em alguns navegadores. (Não existem alfabetos emoji coloridos até onde sei.)

No momento da escrita, o Github Markdown renderiza códigos de cores como `#ffffff`(observe os bastidores!) Com uma visualização de cores. Basta usar um código de cores e cercá-lo com retalhos.

Por exemplo:

torna-se

Com base na idéia do @AlecRust, fiz uma implementação do serviço de texto png.

A demo está aqui:

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

Existem quatro parâmetros:

• texto: a sequência a ser exibida
• font: não use porque só tenho Arial.ttf nesta demonstração.
• fontSize: um número inteiro (o padrão é 12)
• cor: um código hexadecimal de 6 caracteres

Por favor, não use este serviço diretamente (exceto para testes), mas use a classe que eu criei que fornece o serviço:

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: se você não usar a estrutura do universo , precisará substituir esta linha:

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

Com este código:

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

Nesse caso, sua cor hexadecimal deve ter exatamente 6 caracteres (não coloque o símbolo de hash (#) na frente).

Nota: no final, não usei esse serviço, porque achei que a fonte era feia e pior: não era possível selecionar o texto. Mas, para o bem desta discussão, pensei que valia a pena compartilhar esse código ...