Come aggiungere colore al file README.md di Github


309

Ho un README.mdfile per il mio progetto underscore-cli , uno strumento abbastanza dolce per hackerare JSON e JS dalla riga di comando.

Voglio documentare la --colorbandiera ... che ... colora le cose. Andrebbe molto meglio se potessi davvero mostrare come appare l'output. Non riesco a trovare un modo per aggiungere colore al mio README.md. Qualche idea?

Ho provato questo:

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

E questo:

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

Nessuna fortuna finora.


1
Se non riesci a colorare il testo attraverso il markdown, l'incorporamento di uno screenshot funzionerebbe?
girasquid,

SÌ. Ci ho pensato subito dopo aver pubblicato questa domanda. Penso che lo screenshot potrebbe essere la mia migliore risposta di fallback, anche se chiaramente non è l'ideale.
Dave Dopson,

1
quindi non è ancora possibile aggiungere colore al testo nel file markdown?
Nam Nguyen,

2
no - e il suo luglio 2014 ffs
lfender6445

Risposte:


353

Vale la pena ricordare che è possibile aggiungere un po 'di colore in un file README utilizzando un servizio di immagine segnaposto. Ad esempio, se si desidera fornire un elenco di colori come riferimento:

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

produce:

  • # f03c15 #f03c15
  • # c5f015 #c5f015
  • # 1589F0 #1589F0

Funziona benissimo con Cards all'interno di un progetto GitHub e quelli possono essere usati per taggare le carte e colorarle
Ziad Akiki

1
@BinarWeb dove lo metti? Funzionerà su GitHub, ad esempio, che supporta le immagini in Markdown.
AlecRust

3
quando la domanda è stata posta, volevo colorare il testo, non avere un'immagine davanti al testo
Binar Web,

4
Quello che ho descritto funziona. Puoi anche inserire del testo colorato nell'immagine, ad eshttps://placehold.it/150/ffffff/ff0000?text=hello
AlecRust,

Informazioni molto utili, utili durante la creazione di app Web nel back-end.
Tropicalrambler,

193

Puoi usare il difftag della lingua per generare del testo colorato:

```diff
- text in red
+ text in green
! text in orange
# text in gray
@@ text in purple (and bold)@@
```

Tuttavia, lo aggiunge come una nuova riga che inizia con o - + ! #oppure inizia e termina con@@

inserisci qui la descrizione dell'immagine

Questo problema è stato sollevato nel markup n. 369 di github , ma da allora non hanno apportato alcuna modifica alle decisioni (2014).


1
Colora anche il testo circondato da @@viola (e grassetto). Codecov ne approfitta nei commenti del bot di integrazione GitHub, ad esempio: github.com/zeit/now/pull/2570#issuecomment-512585770
Jacob Ford,

79

Non è possibile colorare il testo normale in un README.mdfile GitHub . È tuttavia possibile aggiungere colore agli esempi di codice con i tag seguenti.

Per fare ciò basta aggiungere tag come questi esempi al file README.md:

`` `JSON
   // codice per la colorazione
`` `
`` `Html
   // codice per la colorazione
`` `
`` `js
   // codice per la colorazione
`` `
`` `Css
   // codice per la colorazione
`` `
// eccetera.

Non sono necessari tag "pre" o "code".

Questo è trattato nella documentazione di Markdown di GitHub (circa a metà pagina, c'è un esempio usando Ruby). GitHub usa Linguist per identificare ed evidenziare la sintassi: puoi trovare un elenco completo delle lingue supportate (così come le loro parole chiave markdown) nel file YAML del Linguist .


4
@NielsAbildgaard Grazie! :) La risposta è che non è possibile colorare il testo normale nei file .md di GitHub almeno in questo momento. L'ho dichiarato e ho trascorso circa 4 ore a ricercarlo. Comunque grazie per avermi segnalato i miei utili tag in codice .md, lo apprezzo!
Totalmente stupefacente il

1

@dotMorten non ne sono sicuro, ma penso che volevi lasciare il tuo ultimo commento sul post di Scott H appena sopra il mio?
totalmente stupefacente il

1
Ho usato ´´´´ Deprecated´´´´. Ha funzionato bene, per l'aggiunta di tag deprecati ai documenti.
MRodrigues,

4
È possibile utilizzare il tag di lingua `` diff```` per generare testo evidenziato in verde e rosso.
Craigmichaelmartin,

42

Sfortunatamente, questo non è attualmente possibile.

La documentazione di Markdown di GitHub non menziona "color", "css", "html" o "style".

Mentre alcuni processori Markdown (ad esempio quello utilizzato in Ghost ) consentono l'HTML, come <span style="color:orange;">Word up</span>GitHub, scarta qualsiasi HTML.

Se è indispensabile utilizzare il colore nel file Leggimi, README.md potrebbe semplicemente indirizzare gli utenti a README.html. Il compromesso per questo, ovviamente, è l'accessibilità.


11
Essa non scarta HTML in generale, hr, br, p, b, ie altri fare il lavoro!
CodeManX

Se inoltri a un file README.html, ti consigliamo di conservarne una copia nel repository in modo da non perdere la cronologia di commit. Se ti senti particolarmente furbo, potresti anche includerlo nelle tue pagine fantasma.
Sandy Gifford,

2
Consulta il codice sorgente di jch / html-pipeline per i tag e gli attributi HTML effettivi consentiti da GitHub.
Jason Antman,

21

In alternativa al rendering di un'immagine raster, puoi incorporare un file SVG:

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

È quindi possibile aggiungere il testo a colori al file SVG come al solito:

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

Sfortunatamente, anche se è possibile selezionare e copiare il testo quando si apre il .svgfile, il testo non è selezionabile quando l'immagine SVG è incorporata.

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


20

Sono propenso a concordare con Qwertman che al momento non è possibile specificare il colore per il testo nel markdown di GitHub, almeno non tramite HTML.

GitHub consente alcuni elementi e attributi HTML, ma solo alcuni (vedi la loro documentazione sulla loro sanificazione HTML ). Consentono pe divtag, nonché colorattributo. Tuttavia, quando ho provato a usarli in un documento markdown su GitHub, non ha funzionato. Ho provato quanto segue (tra le altre varianti) e non hanno funzionato:

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

Come suggerito da Qwertman, se davvero si deve usare il colore, è possibile farlo in un file README.html e fare riferimento ad esso.


6
Sì, sfortunatamente non funziona in Github, come afferma la mia risposta.
Scott H,

Consulta il codice sorgente di jch / html-pipeline per i tag e gli attributi HTML effettivi consentiti da GitHub.
Jason Antman,

5

Ho aggiunto un po 'di colore a una pagina di markup GitHub usando i caratteri Enicode emoji, ad esempio 💡 o 🛑 - alcuni caratteri emoji sono colorati in alcuni browser. (Non ci sono alfabeti emoji colorati per quanto ne so però.)


3

Al momento della scrittura, Github Markdown esegue il rendering di codici colore come `#ffffff`(notare i backtick!) Con un'anteprima a colori. Basta usare un codice colore e circondarlo con i backtick.

Per esempio:

Markit GitHub con codici colore

diventa

rendering del markdown GitHub con codici colore


5
L'ho provato e non sembra funzionare. Puoi collegarti ad un esempio?
Dave Dopson,

2
Compresi i backquotes, come`#hexhex`
bwindels,

2

Basato sull'idea di @AlecRust, ho realizzato un'implementazione del servizio di testo png.

La demo è qui:

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

Ci sono quattro parametri:

  • testo: la stringa da visualizzare
  • font: non usare perché ho solo Arial.ttf in questa demo.
  • fontSize: un numero intero (il valore predefinito è 12)
  • colore: un codice esadecimale di 6 caratteri

Si prega di non utilizzare questo servizio direttamente (tranne che per i test), ma utilizzare la classe che ho creato che fornisce il servizio:

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 non si utilizza il framework universo , sarà necessario sostituire questa riga:

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

Con questo codice:

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

Nel qual caso il tuo colore esadecimale deve essere lungo esattamente 6 caratteri (non mettere il simbolo dell'hash (#) davanti ad esso).

Nota: alla fine, non ho usato questo servizio, perché ho scoperto che il carattere era brutto e peggio: non era possibile selezionare il testo. Ma per il bene di questa discussione ho pensato che valesse la pena condividere questo codice ...

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.