So fügen Sie der README.md-Datei von Github Farbe hinzu

Ich habe eine README.mdDatei für mein Projekt underscore-cli , ein ziemlich süßes Tool zum Hacken von JSON und JS in der Befehlszeile.

Ich möchte die --colorFlagge dokumentieren ... die ... Dinge färbt. Das würde viel besser gehen, wenn ich tatsächlich zeigen könnte, wie die Ausgabe aussieht. Ich kann anscheinend keinen Weg finden, meiner Farbe zu verleihen README.md. Irgendwelche Ideen?

Ich habe das versucht:

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

Und das:

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

Bisher kein Glück.

Es ist erwähnenswert, dass Sie einer README-Datei mithilfe eines Platzhalter-Bilddienstes Farbe hinzufügen können. Wenn Sie beispielsweise eine Liste mit Farben als Referenz bereitstellen möchten:

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

Produziert:

• #f03c15
• #c5f015
• #1589F0

Sie können das diffSprach-Tag verwenden, um farbigen Text zu generieren:

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

Es wird jedoch als neue Zeile hinzugefügt, die mit entweder - + ! #beginnt oder mit beginnt und endet@@

Dieses Problem wurde im Github-Markup Nr. 369 angesprochen , aber seitdem (2014) haben sie keine Entscheidung mehr geändert.

Sie können keinen einfachen Text in einer GitHub- README.mdDatei einfärben . Sie können Codebeispielen jedoch mit den folgenden Tags Farbe hinzufügen.

Fügen Sie dazu einfach Tags wie diese Beispiele zu Ihrer README.md-Datei hinzu:

`` `json
   // Code zum Färben
`` `
`` `html
   // Code zum Färben
`` `
`` `js
   // Code zum Färben
`` `
`` `css
   // Code zum Färben
`` `
// etc.

Es werden keine "Pre" - oder "Code" -Tags benötigt.

Dies wird in der GitHub Markdown-Dokumentation behandelt (etwa auf halber Strecke gibt es ein Beispiel für die Verwendung von Ruby). GitHub verwendet Linguist , um die Syntax zu identifizieren und hervorzuheben. Eine vollständige Liste der unterstützten Sprachen (sowie deren Markdown-Schlüsselwörter) finden Sie in der YAML-Datei des Linguisten .

Dies ist derzeit leider nicht möglich.

In der GitHub Markdown-Dokumentation werden "Farbe", "CSS", "HTML" oder "Stil" nicht erwähnt.

Während einige Markdown-Prozessoren (z. B. der in Ghost verwendete ) HTML zulassen, z. B. <span style="color:orange;">Word up</span>verwirft GitHub jegliches HTML.

Wenn Sie in Ihrer Readme-Datei unbedingt Farbe verwenden müssen, kann Ihre README.md Benutzer einfach auf eine README.html verweisen. Der Kompromiss hierfür ist natürlich die Zugänglichkeit.

Alternativ zum Rendern eines Rasterbilds können Sie eine SVG-Datei einbetten:

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

Anschließend können Sie der SVG-Datei wie gewohnt Farbtext hinzufügen:

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

Obwohl Sie beim Öffnen der .svgDatei Text auswählen und kopieren können, kann der Text leider nicht ausgewählt werden, wenn das SVG-Bild eingebettet ist.

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

Ich bin geneigt, Qwertman zuzustimmen, dass es derzeit nicht möglich ist, Farbe für Text in GitHub-Markdown anzugeben, zumindest nicht über HTML.

GitHub erlaubt einige HTML-Elemente und -Attribute, aber nur bestimmte (siehe deren Dokumentation zur HTML-Bereinigung ). Sie erlauben pund divmarkieren sowie colorAttribute. Als ich jedoch versuchte, sie in einem Markdown-Dokument auf GitHub zu verwenden, funktionierte es nicht. Ich habe Folgendes versucht (unter anderem), und sie haben nicht funktioniert:

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

Wie Qwertman vorgeschlagen hat, können Sie, wenn Sie wirklich Farbe verwenden müssen, dies in einer README.html tun und darauf verweisen.

Ich habe einer GitHub-Markup-Seite mit Emoji-Enicode-Zeichen etwas Farbe hinzugefügt, z. B. 💡 oder 🛑 - einige Emoji-Zeichen sind in einigen Browsern farbig. (Soweit ich weiß, gibt es keine farbigen Emoji-Alphabete.)

Zum Zeitpunkt des Schreibens rendert Github Markdown Farbcodes wie `#ffffff` Zeitpunkt (beachten Sie die Backticks!) Mit einer Farbvorschau. Verwenden Sie einfach einen Farbcode und umgeben Sie ihn mit Backticks.

Zum Beispiel:

wird

Basierend auf der Idee von @AlecRust habe ich eine Implementierung des PNG-Textdienstes durchgeführt.

Die Demo ist da:

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

Es gibt vier Parameter:

• Text: Die anzuzeigende Zeichenfolge
• Schriftart: nicht verwenden, da ich in dieser Demo sowieso nur Arial.ttf habe.
• fontSize: eine Ganzzahl (standardmäßig 12)
• Farbe: ein 6-stelliger Hexadezimalcode

Bitte verwenden Sie diesen Dienst nicht direkt (außer zum Testen), sondern verwenden Sie die von mir erstellte Klasse, die den Dienst bereitstellt:

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

Hinweis: Wenn Sie das Universum-Framework nicht verwenden , müssen Sie diese Zeile ersetzen:

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

Mit diesem Code:

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

In diesem Fall muss Ihre Hex-Farbe genau 6 Zeichen lang sein (setzen Sie nicht das Hash-Symbol (#) davor).

Hinweis: Am Ende habe ich diesen Dienst nicht verwendet, da ich festgestellt habe, dass die Schrift hässlich und schlechter ist: Es war nicht möglich, den Text auszuwählen. Aber für diese Diskussion dachte ich, dass dieser Code es wert ist, geteilt zu werden ...