Como adicionar cor ao arquivo Github's README.md
Eu tenho um arquivo README.md para o meu projeto underscore-cli, uma ferramenta muito doce para hacking JSON e JS na linha de comando.
Quero documentar o "- cor" bandeira ... que ... colore as coisas. Isso seria muito melhor se eu pudesse realmente mostrar como é a saída. Eu posso'parece que não encontro uma maneira de adicionar cor ao meu README.md. Alguma ideia?
I'já tentei isto:
<span style="color: green"> Some green text </span>E isto:
<font color="green"> Some green text </font>Sem sorte até agora.
Vale a pena mencionar que você pode adicionar alguma cor em um README usando um serviço de imagem de espaço reservado. Por exemplo, se você quisesse fornecer uma lista de cores para referência:
-  `#f03c15`
-  `#c5f015`
-  `#1589F0`Produz:
#f03c15#c5f015#1589F0
Você pode utilizar a tag de idioma diff para gerar algum texto colorido:
```diff
- text in red
+ text in green
! text in orange
# text in gray
No entanto, adiciona-a como uma nova linha que começa com `- + !
#`
[![insira aqui a descrição da imagem][1]][1]
Esta questão foi levantada em [github markup #369][2], mas eles não fizeram nenhuma mudança na decisão desde então (2014).
[1]:
https://i.stack.imgur.com/0buxS.png
[2]:
https://github.com/github/markup/issues/369
Você não pode colorir texto simples em um arquivo GitHub README.md. Você pode, no entanto, adicionar cor às amostras de código com as tags abaixo.
Para fazer isso basta adicionar 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 " pre" ou " código" tags necessárias.
Isto é coberto no GitHub Markdown documentation (cerca de metade da página, lá's um exemplo usando Ruby). GitHub usa Linguist para identificar e destacar a sintaxe - você pode encontrar uma lista completa das linguagens suportadas (assim como suas palavras-chave markdown) no Linguist's YAML file.
Infelizmente, isto não é actualmente possível.
A documentação do GitHub Markdown não tem menção a 'color', 'css', 'html', ou 'style'.
Enquanto alguns processadores Markdown (por exemplo, o utilizado em Ghost) permitem HTML, como <span style="color:orange;">Word up</span>, GitHub's descarta qualquer HTML.
Se é imperativo que você use cores em seu readme, seu README.md poderia simplesmente encaminhar os usuários para um README.html. A contrapartida para isso, é claro, é a acessibilidade.
I'm inclinado a concordar com Qwertman que não é atualmente possível especificar cor para texto na marcação GitHub, pelo menos não através de HTML.
GitHub permite alguns elementos e atributos HTML, mas apenas certos (veja a documentação deles sobre sua sanitização HTML). Eles permitem tags p' ediv', assim como atributos `color'. Entretanto, quando eu tentei utilizá-los em um documento markdown no GitHub, ele não funcionou't funciona. Eu tentei o seguinte (entre outras variações), e eles não funcionaram't:
<p style='color:red'>Isto é algum texto vermelho.</p><font color="red">Isto é algum texto!</font>These are <b style='color:red'>red words</b>.
Como Qwertman sugeriu, se você realmente precisa usar cores, você poderia fazê-lo em um README.html e encaminhá-los para ele.
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 então 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 arquivo `.svg', o texto não é selecionável quando a imagem SVG é embutida.
Demonstração: https://gist.github.com/CyberShadow/95621a949b07db295000
Eu adicionei alguma cor a uma página de marcação do GitHub usando emoji Enicode chars, e.g. 💡 ou 🛑 -- alguns caracteres emoji são coloridos em alguns navegadores. (No entanto não há alfabetos emoji coloridos até onde eu sei).
A partir da escrita, Github Markdown renderiza hexhex com uma pré-visualização colorida.
Com base na ideia @AlecRust, fiz uma implementação do serviço de texto png.
A demonstração está aqui:
http://lingtalfi.com/services/pngtext?color=cc0000&size=10&text=Hello%20World
Há quatro parâmetros:
- texto: a cadeia a exibir
- fonte: não usar porque eu só tenho Arial.ttf nesta demonstração.
- fontSize: um número inteiro (por defeito, até 12)
- de cor: um código hexadecimal de 6 caracteres
Não utilize 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'não usar a estrutura do universo, você precisará substituir esta linha:
$rgbColors = ConvertTool::convertHexColorToRgb($hexColor);Com este código:
$rgbColors = sscanf($hexColor, "%02x%02x%02x");Neste caso a sua cor hexagonal deve ter exactamente 6 caracteres (don't coloque o símbolo hash (#) à sua frente).
Nota: no final, não usei este serviço, porque descobri que a fonte era feia e pior: não foi possível selecionar o texto. Mas para o bem desta discussão achei que este código merecia ser partilhado.
