Cum de a adăuga culoare la Github's README.md fișier

Am un README.md fișier pentru proiectul meu subliniere-cli, destul de dulce instrument de hacking JSON și JS pe linia de comandă.

Vreau să-document "--culoare" pavilion ... care ... culori lucruri. Asta ar merge mult mai bine dacă am putea arăta de fapt, ceea ce ieșire se pare. Pot't par să găsească o modalitate de a adăuga culoare pentru a-mi README.md. Orice idei?

Am'am incercat asta:

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

Și acest lucru:

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

Nici un noroc până acum.

Comentarii la întrebare (7)

L's de remarcat faptul că puteți adăuga unele de culoare într-un README folosind o imagine substituent de servicii. De exemplu, dacă ai vrut pentru a oferi o listă de culori pentru referință:

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

Produce:

  • #f03c15
  • #c5f015
  • #1589F0
Comentarii (7)

Puteți utiliza diff tagul de limba pentru a genera un text colorat:

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



Cu toate acestea, se adaugă ca pe o nouă linie de pornire, fie cu `- + ! #`

[![introduceți descrierea imaginii aici][1]][1]

Această problemă a fost ridicată în [github markup #369][2], dar n-au&#39;t a făcut nici o schimbare în decizia de atunci (2014).

[1]: https://i.stack.imgur.com/0buxS.png
[2]: https://github.com/github/markup/issues/369
Comentarii (1)

Nu poți culoare text simplu într-un GitHub README.md de fișier. Cu toate acestea, puteți adăuga culoare pentru exemple de cod cu tag-uri de mai jos.

Pentru a face acest lucru trebuie doar să adăugați tag-uri, cum ar fi aceste probe la README.md fișier:

``json
// codul pentru colorat
``
``html
// codul pentru colorat
``
``js
// codul pentru colorat
``
``css
// codul pentru colorat
``
// etc.

Nu "pre" sau "codul" tag-uri necesare.

Acesta este acoperit în GitHub Reduceri de documentare (aproximativ jumătate de drum în jos a paginii, acolo's un exemplu folosind Ruby). GitHub foloseste Lingvist pentru a identifica și evidenția sintaxa - puteți găsi o listă completă de limbi suportate (precum și reduceri cuvinte cheie) în Lingvist's YAML.

Comentarii (12)

Din păcate, acest lucru nu este posibil în prezent.

De GitHub Reduceri documentația nu are nici o mențiune de 'de culoare', 'css', 'html', sau 'stil'.

În timp ce unele Reduceri de procesoare (de exemplu cel folosit în Duhul) permite HTML, cum ar fi <span style="culoare:portocaliu;">Cuvantul</span>, GitHub's abandonează orice HTML.

Daca's imperativ ca voi folosi culoarea în readme, README.md ar putea pur și simplu se referă utilizatorilor la un README.html. Trade-off pentru aceasta, desigur, este accesibilitatea.

Comentarii (3)

Am'm înclinat să fie de acord cu Qwertman care-l's, în prezent, nu este posibil să specificați o culoare pentru textul din GitHub markdown, cel puțin nu prin HTML.

GitHub permite unele elemente HTML și atribute, dar numai de unii (a se vedea documentația lor despre lor HTML igienizare). Ele permit p și div tag-uri, precum și "culoare" atribut. Cu toate acestea, atunci când am încercat să le folosesc într-un markdown document pe GitHub, nu't de lucru. Am încercat următoarele (printre alte variante), și-au n't de lucru:

  • <p style=&#39;culoare:rosu&#39;>Acesta este un text rosu.</p>
  • <font color="roșu">Acesta este un text!</font>
  • Astea sunt cuvinte red.`

Ca Qwertman a sugerat, dacă aveți cu adevărat trebuie să utilizați culoare ai putea-o face într-un README.html și ele se referă la ea.

Comentarii (2)

Ca o alternativă la randarea unei imagini raster, puteți încorpora un fișier SVG:

<a></a>

Apoi, puteți adăuga culoare text în fișier SVG, ca de obicei:

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

    Hello,
    world!

</svg>

Din păcate, deși puteți selecta și copia text atunci când deschideți `.svg file, textul nu este selectabil când SVG imagine este încorporat.

Demo: https://gist.github.com/CyberShadow/95621a949b07db295000

Comentarii (0)

Am adăugat niște culoare la o GitHub marcaj de pagină folosind emoji Enicode caractere, de exemplu, 💡 sau 🛑 - unele caractere emoji sunt colorate în unele browsere. (Nu sunt de culoare emoji alfabete în măsura în care știu, totuși.)

Comentarii (0)

Ca de scris, Github Markdown face `#hexhex cu o culoare de previzualizare.

Comentarii (2)

Bazat pe @AlecRust idee, am făcut o punere în aplicare a png text de servicii.

Demo-ul este aici:

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

Există patru parametri:

  • text: string pentru a afișa
  • font: nu folosesc deoarece am doar Arial.ttf oricum pe acest demo.
  • fontSize: un număr întreg (implicit la 12)
  • culoare: 6 caractere cod hexazecimal

Vă rugăm să nu folosiți acest serviciu direct (cu excepția pentru testare), dar utilizarea la clasa I-a creat, care oferă servicii de:

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

Notă: dacă nu't de a folosi universul cadru, va trebui să înlocuiți această linie:

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

Cu acest cod:

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

În cazul în care dumneavoastră hex de culoare trebuie să fie exact 6 caractere lungime (don't pune simbolul hash (#) în fața lui).

Notă: în cele din urmă, nu am folosit acest serviciu, pentru că am constatat că fontul a fost urât și mai rău: nu a fost posibil pentru a selecta textul. Dar de dragul acestei discuții, am crezut că acest cod a fost în valoare de partajare...

Comentarii (0)