Como adicionar cores ao arquivo README.md do Github


309

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.


1
Se você não conseguir colorir o texto por meio de descontos, incorporar uma captura de tela funcionará?
girasquid

SIM. Pensei nisso logo após publicar esta pergunta. Acho que a captura de tela pode ser minha melhor resposta de fallback, embora claramente não seja o ideal.
Dave Dopson

1
então ainda não é possível adicionar cor ao texto no arquivo de remarcação?
9134 Nam Nguyen #

2
Não - e seu
ffs de

Respostas:


353

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

Isso funciona muito bem em cartões dentro de um projeto GitHub e aqueles pode ser usado para marcar os cartões e cor-los
Ziad Akiki

1
@BinarWeb, onde você está colocando isso? Funcionará no GitHub, por exemplo, que suporta imagens no Markdown.
AlecRust

3
como a questão perguntou, eu queria colorir o texto, para não ter uma imagem na frente do texto
Binar Web

4
O que eu descrevi funciona. Você também pode colocar texto colorido na imagem, por exemplo:https://placehold.it/150/ffffff/ff0000?text=hello
AlecRust 28/08

Informações muito úteis, úteis ao criar aplicativos da web no back-end.
O que você

193

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

insira a descrição da imagem aqui

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


1
Ele também colore o texto cercado por @@roxo (e negrito). O Codecov tira proveito disso nos comentários do bot de integração do GitHub, por exemplo: github.com/zeit/now/pull/2570#issuecomment-512585770
Jacob Ford

79

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 .


4
@NielsAbildgaard Thank you! :) A resposta é que você não pode colorir texto sem formatação nos arquivos .md do GitHub, pelo menos no momento. Eu afirmei isso e passei cerca de 4 horas pesquisando. De qualquer forma Obrigado por apontar minhas úteis tags de código .md, eu agradeço!
totallytotallyamazing

1
Eu não poderia fazê-lo funcionar, quer, mas é estranho porque o atributo de cor é lista de autorizações: github.com/github/markup/tree/master#html-sanitization
dotMorten

@dotMorten não tem certeza, mas acho que você queria deixar seu último comentário no post de Scott H logo acima do meu?
totallytotallyamazing

1
Eu usei ´´´´ Deprecated´´´´. Funcionou bem, para adicionar tags descontinuadas aos documentos.
MRodrigues 27/07/2015

4
Você pode usar a tag de idioma `` diff```` para gerar texto destacado em verde e vermelho.
Craigmichaelmartin 9/09/16

42

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.


11
Ele não descarta HTML em geral, hr, br, p, b, ie outros fazer o trabalho!
CodeManX

Se você encaminhar para um README.html, convém manter uma cópia dele no repositório para não perder o histórico de confirmação. Se você estiver se sentindo particularmente astuto, você pode até incluí-lo nas suas páginas gh.
Sandy Gifford

2
Veja o código-fonte do jch / html-pipeline para obter as tags e atributos HTML reais permitidos pelo GitHub.
Jason Antman

21

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


20

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.


6
Sim, infelizmente não funciona no Github, como minha resposta diz.
Scott Scott H

Veja o código-fonte do jch / html-pipeline para obter as tags e atributos HTML reais permitidos pelo GitHub.
Jason Antman

5

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


3

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:

Marcação do GitHub com códigos de cores

torna-se

renderização GitHub markdown com códigos de cores


5
Eu tentei isso, e não parece funcionar. Você pode criar um link para um exemplo?
Dave Dopson

2
Incluindo aspas, como`#hexhex`
bwindels 27/09/19

2

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.