Jak dodać kolor do pliku README.md Githuba

308

Mam README.mdplik do mojego projektu underscore-cli , całkiem miłe narzędzie do hakowania JSON i JS w wierszu poleceń.

Chcę udokumentować --colorflagę ... która ... koloruje rzeczy. Byłoby o wiele lepiej, gdybym mógł pokazać, jak wygląda wyjście. Nie mogę znaleźć sposobu na dodanie koloru do mojego README.md. Jakieś pomysły?

Próbowałem tego:

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

I to:

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

Jak dotąd brak szczęścia.

Dave Dopson
źródło
1
Jeśli nie możesz pokolorować tekstu za pomocą markdown, czy osadziłbyś zrzut ekranu?
girasquid
TAK. Myślałem o tym zaraz po tym, jak opublikowałem to pytanie. Myślę, że zrzut ekranu może być moją najlepszą rezerwową odpowiedzią, choć wyraźnie nie jest idealny.
Dave Dopson
1
więc nie można jeszcze dodać koloru do tekstu w pliku przeceny?
Nam Nguyen
2
nope - i jego lipiec 2014 ffs
lfender6445

Odpowiedzi:

352

Warto wspomnieć, że można dodać trochę koloru w README za pomocą zastępczej usługi obrazu. Na przykład, jeśli chcesz podać listę kolorów w celach informacyjnych:

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

Produkuje:

  • # f03c15 #f03c15
  • # c5f015 #c5f015
  • # 1589F0 #1589F0
AlecRust
źródło
Działa to świetnie w kartach w ramach projektu GitHub, a można ich używać do oznaczania kart i pokolorowania ich
Ziad Akiki
1
@BinarWeb gdzie to umieszczasz? Działa na przykład na GitHub, który obsługuje obrazy w Markdown.
AlecRust,
3
gdy zadałem pytanie, chciałem pokolorować tekst, aby nie mieć obrazu przed tekstem
Binar Web
4
To, co opisałem, działa. Możesz również umieścić kolorowy tekst na obrazie, np.https://placehold.it/150/ffffff/ff0000?text=hello
AlecRust
Bardzo przydatne informacje, pomocne podczas tworzenia aplikacji internetowych w wewnętrznej bazie danych.
Tropicalrambler
193

Możesz użyć diffznacznika języka, aby wygenerować kolorowy tekst:

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

Dodaje go jednak jako nową linię zaczynającą się na którąkolwiek z nich - + ! #

wprowadź opis zdjęcia tutaj

Ten problem został podniesiony w znaczniku github # 369 , ale od tego czasu nie wprowadzili żadnych zmian w decyzji (2014).

craigmichaelmartin
źródło
1
To również tekst kolory otoczony przez @@w kolorze fioletowym (i pogrubione). Codecov korzysta z tego w komentarzach bota integracji GitHub, na przykład: github.com/zeit/now/pull/2570#issuecomment-512585770
Jacob Ford
79

W GitHub nie można pokolorować zwykłego tekstu README.md pliku . Możesz jednak dodać kolor do próbek kodu za pomocą poniższych tagów.

Aby to zrobić, po prostu dodaj tagi takie jak te przykłady do pliku README.md:

`` Json
   // kod do kolorowania
``
`` HTML
   // kod do kolorowania
``
`` js
   // kod do kolorowania
``
`` css
   // kod do kolorowania
``
// itd.

Nie są potrzebne tagi „przed” ani „kod”.

Jest to opisane w dokumentacji GitHub Markdown (mniej więcej w połowie strony znajduje się przykład użycia Ruby). GitHub używa Linguist do identyfikowania i wyróżniania składni - możesz znaleźć pełną listę obsługiwanych języków (a także ich słów kluczowych przy przecenianiu) w pliku YAML Lingwisty .

totalnie totalnie zadziwiające
źródło
4
@NielsAbildgaard Dziękujemy! :) Odpowiedź jest taka, że ​​przynajmniej w tym momencie nie można pokolorować zwykłego tekstu w plikach .md GitHub. Stwierdziłem to i spędziłem około 4 godzin na badaniu. W każdym razie dziękuję za wskazanie moich pomocnych znaczników kodu .md, doceniam to!
totallytotallyamazing
1
Nie mogłem też uruchomić, ale to dziwne, ponieważ atrybut koloru znajduje się na białej liście: github.com/github/markup/tree/master#html-sanitization
dotMorten
@dotMorten nie jestem pewien, ale myślę, że chciałeś zostawić swój ostatni komentarz do postu Scotta H tuż nad moim?
totallytotallyamazing
1
Użyłem ´´´´ Deprecated´´´´. Działa dobrze, do dodawania tagów przestarzałych do dokumentów.
MRodrigues
4
Możesz użyć znacznika językowego `` diff````, aby wygenerować podświetlony na zielono i czerwono tekst.
craigmichaelmartin
42

Niestety obecnie nie jest to możliwe.

W dokumentacji GitHub Markdown nie ma wzmianki o „kolorze”, „css”, „html” ani „stylu”.

Podczas gdy niektóre procesory Markdown (np. Używane w Ghost ) pozwalają na HTML, na przykład <span style="color:orange;">Word up</span>GitHub odrzuca dowolny HTML.

Jeśli konieczne jest użycie koloru w pliku Readme, plik README.md może po prostu skierować użytkowników do pliku README.html. Kompromisem tego jest oczywiście dostępność.

M-Pixel
źródło
11
To nie odrzuca HTML w ogóle hr, br, p, b, ia inni działają!
CodeManX
Jeśli przejdziesz dalej do pliku README.html, możesz chcieć zachować jego kopię w repozytorium, aby nie stracić historii zatwierdzeń. Jeśli czujesz się wyjątkowo przebiegły, możesz nawet umieścić go na swoich stronach gh.
Sandy Gifford,
2
Zobacz kod źródłowy jch / html-pipeline, aby zobaczyć rzeczywiste tagi HTML i atrybuty, na które pozwala GitHub.
Jason Antman,
21

Alternatywnie do renderowania obrazu rastrowego możesz osadzić plik SVG:

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

Następnie możesz jak zwykle dodać kolorowy tekst do pliku SVG:

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

Niestety, mimo że możesz zaznaczyć i skopiować tekst po otwarciu .svgpliku, nie można go zaznaczyć po osadzeniu obrazu SVG.

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

Vladimir Panteleev
źródło
20

Jestem skłonny zgodzić się z Qwertmanem, że obecnie nie jest możliwe określenie koloru tekstu w Markdown GitHub, przynajmniej nie poprzez HTML.

GitHub zezwala na niektóre elementy HTML i atrybuty, ale tylko niektóre (zobacz dokumentację dotyczącą ich czyszczenia HTML ). Robią dozwolone pi divtagi, a także coloratrybuty. Jednak gdy próbowałem ich użyć w dokumencie GitHub, nie udało się to. Próbowałem następujące (między innymi odmianami), ale nie działały:

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

Jak zasugerował Qwertman, jeśli naprawdę musisz użyć koloru, możesz to zrobić w pliku README.html i odwołać się do niego.

Scott H.
źródło
6
Tak, niestety nie działa w Github, jak mówi moja odpowiedź.
Scott H
Zobacz kod źródłowy jch / html-pipeline, aby zobaczyć rzeczywiste tagi HTML i atrybuty, na które pozwala GitHub.
Jason Antman,
5

Dodałem trochę koloru do strony znaczników GitHub za pomocą znaków emoji Enicode, np. 💡 lub 🛑 - niektóre znaki emoji są kolorowe w niektórych przeglądarkach. (O ile mi wiadomo, nie ma kolorowych alfabetów emoji).

Luke Hutchison
źródło
3

W chwili pisania Github Markdown wyświetla kody kolorów, takie jak `#ffffff`(uwaga backticks!), Z podglądem kolorów. Wystarczy użyć kodu koloru i otoczyć go backtickami.

Na przykład:

Obniżka GitHub z kodami kolorów

staje się

renderowane przeceny GitHub z kodami kolorów

bwindels
źródło
5
Próbowałem tego i wydaje się, że to nie działa. Czy możesz podać link do przykładu?
Dave Dopson,
2
Łącznie z cudzysłowami, takimi jak`#hexhex`
bwindels
2

W oparciu o pomysł @AlecRust wykonałem implementację usługi tekstowej png.

Demo jest tutaj:

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

Istnieją cztery parametry:

  • tekst: ciąg do wyświetlenia
  • font: not use, ponieważ i tak mam tylko Arial.ttf na tej wersji demonstracyjnej.
  • fontSize: liczba całkowita (domyślnie 12)
  • kolor: 6-znakowy kod szesnastkowy

Nie używaj tej usługi bezpośrednio (z wyjątkiem testowania), ale skorzystaj z utworzonej przeze mnie klasy, która zapewnia usługę:

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

Uwaga: jeśli nie używasz frameworku wszechświata , musisz zastąpić ten wiersz:

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

Z tym kodem:

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

W takim przypadku Twój kolor heksadecymalny musi mieć dokładnie 6 znaków (nie umieszczaj przed nim symbolu skrótu (#)).

Uwaga: ostatecznie nie korzystałem z tej usługi, ponieważ okazało się, że czcionka była brzydka i gorzej: nie można było zaznaczyć tekstu. Ale ze względu na tę dyskusję pomyślałem, że ten kod warto udostępnić ...

molwa
źródło