web-dev-qa-db-fra.com

Comment ajouter de la couleur au fichier README.md de Github

J'ai un fichier README.md pour mon projet nderscore-cli , un outil très pratique pour pirater JSON et JS en ligne de commande.

Je veux documenter le drapeau "--color" ... qui ... colore les choses. Cela irait beaucoup mieux si je pouvais réellement montrer à quoi ressemble la sortie. Je n'arrive pas à trouver un moyen d'ajouter de la couleur à mon fichier README.md. Des idées?

J'ai essayé ceci:

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

Et ça:

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

Pas de chance jusqu'à présent.

colorsgithubmarkdowngithub-pages
256
Dave Dopson

Il est à noter que vous pouvez ajouter de la couleur dans un README en utilisant un service d’image substituable. Par exemple, si vous souhaitez fournir une liste de couleurs à titre de référence:

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

Produit:

  • #f03c15 #f03c15
  • #c5f015 #c5f015
  • #1589F0 #1589F0
281
AlecRust

Vous pouvez utiliser la balise de langage diff pour générer du texte coloré:

```diff
- text in red
+ text in green
! text in orange
# text in gray
```

Cependant, il l'ajoute comme une nouvelle ligne commençant par - + ! #

enter image description here

Cette question a été soulevée dans github markup # 369 , mais ils n'ont apporté aucun changement de décision depuis (2014).

132
craigmichaelmartin

Vous ne pouvez pas colorier du texte brut dans un fichier GitHub README.md. Vous pouvez cependant ajouter de la couleur aux exemples de code avec les balises ci-dessous.

Pour ce faire, ajoutez simplement des balises telles que ces exemples à votre fichier README.md:

 `` `json 
 // code pour la coloration 
` `` 
. `` `html 
 // code pour la coloration 
 `` `
` `` js 
 // code pour la coloration 
 `“ `
` `` css 
 // code pour la coloration 
 `` `
 // etc.

Aucune balise "pre" ou "code" nécessaire.

Ceci est couvert dans le documentation GitHub Markdown (à peu près au milieu de la page, un exemple utilisant Ruby). GitHub utilise Linguist pour identifier et mettre en surbrillance la syntaxe. Vous pouvez trouver une liste complète des langues prises en charge (ainsi que leurs mots-clés de démarque) dans Fichier YAML du linguiste .

71
totallytotallyamazing

Malheureusement, ce n'est actuellement pas possible.

Le documentation GitHub Markdown ne fait aucune mention de 'couleur', 'css', 'html' ou 'style'.

Alors que certains processeurs Markdown (par exemple celui utilisé dans Ghost ) autorisent le HTML, tel que <span style="color:orange;">Word up</span>, GitHub supprime tout HTML.

S'il est impératif que vous utilisiez la couleur dans votre fichier Lisez-moi, votre fichier README.md pourrait simplement renvoyer les utilisateurs vers un fichier README.html. Le compromis pour cela, bien sûr, est l'accessibilité.

40
M-Pixel

Je suis enclin à convenir avec Qwertman qu'il n'est actuellement pas possible de spécifier une couleur pour le texte dans GitHub Markdown, du moins pas via HTML.

GitHub autorise certains éléments et attributs HTML, mais seulement certains (voir la documentation sur leur nettoyage du code HTML ). Ils autorisent les balises p et div, ainsi que l'attribut color. Cependant, lorsque j'ai essayé de les utiliser dans un document de démarquage sur GitHub, cela n'a pas fonctionné. J'ai essayé les solutions suivantes (parmi d'autres variantes) et elles n'ont pas fonctionné:

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

Comme Qwertman l'a suggéré, si vous devez vraiment utiliser la couleur, vous pouvez le faire dans un fichier README.html et le renvoyer.

21
Scott H

Au lieu de rendre une image raster, vous pouvez incorporer un fichier SVG:

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

Vous pouvez ensuite ajouter du texte couleur au fichier SVG comme d'habitude:

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

Malheureusement, même si vous pouvez sélectionner et copier du texte lorsque vous ouvrez le fichier .svg, vous ne pouvez pas sélectionner le texte lorsque l'image SVG est incorporée.

Démo: https://Gist.github.com/CyberShadow/95621a949b07db2950

20
Vladimir Panteleev

J'ai ajouté de la couleur à une page de balisage GitHub en utilisant des caractères emoji Enicode, par exemple. ???? ou ???? - certains caractères emoji sont colorés dans certains navigateurs. (Il n'y a pas d'alphabet emoji coloré pour autant que je sache.)

2
Luke Hutchison

Sur la base de l’idée de @AlecRust, j’ai implémenté le service texte png.

La démo est ici:

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

Il y a quatre paramètres:

  • text: la chaîne à afficher
  • police: ne pas utiliser car je n'ai que Arial.ttf de toute façon sur cette démo.
  • fontSize: un entier (valeur par défaut de 12)
  • couleur: code hexadécimal de 6 caractères

N'utilisez pas ce service directement (sauf pour les tests), mais utilisez la classe que j'ai créée et qui fournit le service:

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);
    }
}

Remarque: si vous n'utilisez pas le framework d'univers , vous devrez remplacer cette ligne:

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

Avec ce code:

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

Dans ce cas, votre couleur d'hex doit avoir exactement 6 caractères (ne mettez pas le symbole dièse (#) devant celui-ci).

Note: au final, je n’ai pas utilisé ce service, car j’ai trouvé que la police était moche et pire: il n’était pas possible de sélectionner le texte. Mais pour le plaisir de cette discussion, j'ai pensé que ce code valait la peine d'être partagé ...

1
ling