kzen.dev
  • Perguntas
  • Etiquetas
  • Utilizadores
Notificações
Recompensas
Inscrição
Uma vez registado, será notificado das respostas e comentários às suas perguntas.
Entrar
Se já tem uma conta, inicie sessão para verificar novas notificações.
Haverá recompensas por perguntas, respostas e comentários adicionais.
Mais
Fonte
Editar
Dave Dopson
Dave Dopson
Question

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.

271 2012-07-16T17:55:53+00:00 9
Prateek Gupta
Prateek Gupta
Pergunta editada :em
GitHub - ddopson/underscore-cli: Command-line utility-belt for hacking JSON and Javascript.
Command-line utility-belt for hacking JSON and Javascript. - GitHub - ddopson/underscore-cli: Command-line utility-belt for hacking JSON and Javascript.
github.com
Programação
markdown
github
colors
github-pages
readme
Popular videos
Como personalizar o seu perfil no Github (Readme)
Como personalizar o seu perfil no Github (Readme)
há 1 ano
Documentar un proyecto en github en archivo readme.md
Documentar un proyecto en github en archivo readme.md
há 2 anos
#15 Уроки Git+GitHub - Создание файла README.md синтаксис Markdown
#15 Уроки Git+GitHub - Создание файла README.md синтаксис Markdown
há 2 anos
GitHub: Como fazer um README.md BONITÃO
GitHub: Como fazer um README.md BONITÃO
há 1 ano
📂 Curso GIT e GITHUB - Personalizando o README.md com markdown (inserir gif, vídeo, etc)
📂 Curso GIT e GITHUB - Personalizando o README.md com markdown (inserir gif, vídeo, etc)
há 3 anos
Como adicionar imagem no readme do GitHub • DESBLOGADA
Como adicionar imagem no readme do GitHub • DESBLOGADA
há 1 ano
Getting Started With GitHub, Part 3: Creating a Read Me File in Markdown
Getting Started With GitHub, Part 3: Creating a Read Me File in Markdown
há 5 anos
Personalizando o perfil do GitHub (Readme)
Personalizando o perfil do GitHub (Readme)
há 1 ano
🤔COMO FAZER um README INCRÍVEL para seu GITHUB - O GUIA COMPLETO🤩
🤔COMO FAZER um README INCRÍVEL para seu GITHUB - O GUIA COMPLETO🤩
há 1 ano
Curso Git e GitHub - Arquivo readme.md
Curso Git e GitHub - Arquivo readme.md
há 4 anos
Como fazer um README para portfolio no Github
Como fazer um README para portfolio no Github
há 2 anos
Como personalizar o seu perfil no Github (Readme) ATUALIZADO 2022
Como personalizar o seu perfil no Github (Readme) ATUALIZADO 2022
há 1 ano
Next Level GitHub Profile README (NEW) | How To Create An Amazing Profile ReadMe With GitHub Actions
Next Level GitHub Profile README (NEW) | How To Create An Amazing Profile ReadMe With GitHub Actions
há 2 anos
Dicas para seu Profile README.md do Github
Dicas para seu Profile README.md do Github
há 2 anos
Novo Read Me do Github - Aprenda a fazer o seu
Novo Read Me do Github - Aprenda a fazer o seu
há 2 anos
« Anterior
Próximo »
 AlecRust
AlecRust
20º dezembro 2016 в 5:21
2016-12-20T17:21:13+00:00
Mais
Fonte
Editar
#16703546

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](https://placehold.it/15/f03c15/000000?text=+) `#f03c15`
- ![#c5f015](https://placehold.it/15/c5f015/000000?text=+) `#c5f015`
- ![#1589F0](https://placehold.it/15/1589F0/000000?text=+) `#1589F0`

Produz:

  • #f03c15 #f03c15
  • #c5f015 #c5f015
  • #1589F0 #1589F0
 Community
Community
Resposta editada :em
293
0
 craigmichaelmartin
craigmichaelmartin
9º setembro 2016 в 2:23
2016-09-09T14:23:03+00:00
Mais
Fonte
Editar
#16703545

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
Noam Manos
Noam Manos
Resposta editada :em
143
0
 totallytotallyamazing
totallytotallyamazing
11º junho 2014 в 4:26
2014-06-11T16:26:19+00:00
Mais
Fonte
Editar
#16703507

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.

 totallytotallyamazing
totallytotallyamazing
Resposta editada :em
GitHub - github/linguist: Language Savant. If your repository&#39;s language is being reported incorrectly, send us a pull request!
Language Savant. If your repository&#39;s language is being reported incorrectly, send us a pull request! - GitHub - github/linguist: Language Savant. If your repository&#39;s language is being reported incorrectly, send us a pull request!
github.com
linguist/languages.yml at master · github/linguist · GitHub
Language Savant. If your repository&#39;s language is being reported incorrectly, send us a pull request! - linguist/languages.yml at master · github/linguist
github.com
72
0
 M-Pixel
M-Pixel
11º junho 2014 в 11:45
2014-06-11T23:45:17+00:00
Mais
Fonte
Editar
#16703542

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.

Ghost: Turn your audience into a business
The world's most popular modern publishing platform for creating a new media platform. Used by Apple, SkyNews, Buffer, OpenAI, and thousands more.
ghost.org
40
0
Scott H
Scott H
29º agosto 2014 в 3:29
2014-08-29T15:29:36+00:00
Mais
Fonte
Editar
#16703543

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.

GitHub - github/markup: Determines which markup library to use to render a content file (e.g. README) on GitHub
Determines which markup library to use to render a content file (e.g. README) on GitHub - GitHub - github/markup: Determines which markup library to use to render a content file (e.g. README) on GitHub
github.com
21
0
Vladimir Panteleev
Vladimir Panteleev
20º março 2016 в 2:31
2016-03-20T02:31:28+00:00
Mais
Fonte
Editar
#16703544

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

Vladimir Panteleev
Vladimir Panteleev
Resposta editada :em
colortext.svg · GitHub
GitHub Gist: instantly share code, notes, and snippets.
gist.github.com
20
0
Luke Hutchison
Luke Hutchison
26º julho 2018 в 5:48
2018-07-26T05:48:30+00:00
Mais
Fonte
Editar
#16703547

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

Luke Hutchison
Luke Hutchison
Resposta editada :em
4
0
 bwindels
bwindels
24º setembro 2019 в 3:30
2019-09-24T15:30:19+00:00
Mais
Fonte
Editar
#16703549

A partir da escrita, Github Markdown renderiza hexhex com uma pré-visualização colorida.

 Leonel
Leonel
Resposta editada :em
2
0
 ling
ling
22º fevereiro 2019 в 7:32
2019-02-22T19:32:42+00:00
Mais
Fonte
Editar
#16703548

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.

WebBox/PngTextUtil.php at master · lingtalfi/WebBox · GitHub
Some tools to build common php based webservices. Contribute to lingtalfi/WebBox development by creating an account on GitHub.
github.com
GitHub - karayabin/universe-snapshot: A snapshot of lingtalfi&#39;s universe&#39;s php classes
A snapshot of lingtalfi&#39;s universe&#39;s php classes. Contribute to karayabin/universe-snapshot development by creating an account on GitHub.
github.com
1
0
Adicionar pergunta
Categorias
Todos
Tecnologia
Cultura / Recreação
Vida / Artes
Ciência
Profissional
Negócios
Utilizadores
Todos
Novo
Popular
1
Mansur Zakirov
Registrado há 1 dia
2
Тагир Мамедов
Registrado há 3 dias
3
Алексей Толманов
Registrado há 3 dias
4
Valeriu Vodnicear
Registrado há 1 semana
5
Alex Johnson
Registrado há 2 semanas
DE
ES
ID
JA
KO
PT
RO
RU
TR
© kzen.dev 2023
Fonte
stackoverflow.com
sob licença cc by-sa 3.0 com atribuição