Github's README.md dosyasına renk ekleme


308

README.mdBenim proje alt çizgi-cli , komut satırında JSON ve JS kesmek için oldukça tatlı bir araç için bir dosya var .

--colorBayrağı belgelemek istiyorum ... hangi ... şeyleri renklendiriyor. Çıktının neye benzediğini gösterebilseydim bu çok daha iyi giderdi. Renk eklemek için bir yol bulamıyorum README.md. Herhangi bir fikir?

Bunu denedim:

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

Ve bu:

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

Şimdiye kadar şans yok.


1
Metninizi işaretleme yoluyla renklendiremiyorsanız, ekran görüntüsü gömmek işe yarar mı?
girasquid

EVET. Bu soruyu gönderdikten hemen sonra bunu düşündüm. Bence ekran görüntüsü en iyi geri dönüş cevabım olabilir, ancak açıkça ideal değil.
Dave Dopson

1
markdown dosyasındaki metne renk eklemek henüz mümkün değil mi?
Nam Nguyen

2
hayır - ve Temmuz 2014 ffs
lfender6445

Yanıtlar:


352

Bir yer tutucu görüntü hizmeti kullanarak bir README'ye biraz renk ekleyebileceğinizden bahsetmek gerekir. Örneğin, referans için bir renk listesi sağlamak istiyorsanız:

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

üretir:

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

Bu, GitHub projesi içindeki Kartlarda harika çalışıyor ve bunlar kartları etiketlemek ve renklendirmek için kullanılabilir
Ziad Akiki

1
@BinarWeb bunu nereye koyuyorsunuz? Örneğin Markdown'daki görüntüleri destekleyen GitHub üzerinde çalışacaktır.
AlecRust

3
sorulan soru olarak, metnin önünde bir görüntü değil, metni renklendirmek istedim
Binar Web

4
Tarif ettiğim şey işe yarıyor. Ayrıca resme renkli metinler de ekleyebilirsinizhttps://placehold.it/150/ffffff/ff0000?text=hello
AlecRust

Çok yararlı bilgiler, arka uçta web uygulamaları oluştururken yardımcı olur.
Tropicalrambler

193

diffBazı renkli metinler oluşturmak için dil etiketini kullanabilirsiniz :

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

Ancak, ya yeni bir satır olarak ekler ya - + ! #da ile başlar ve biter.@@

resim açıklamasını buraya girin

Bu sorun github biçimlendirmesi # 369'da ortaya çıktı , ancak o zamandan beri (2014) kararda herhangi bir değişiklik yapmadılar .


1
Aynı zamanda renkleri metin çevrili tarafından @@mor (ve kalın) içinde. Codecov, GitHub entegrasyon botunun yorumlarında bundan faydalanır, örneğin: github.com/zeit/now/pull/2570#issuecomment-512585770
Jacob Ford

79

GitHub README.mddosyasındaki düz metni renklendiremezsiniz . Ancak aşağıdaki örneklerle kod örneklerine renk ekleyebilirsiniz.

Bunu yapmak için README.md dosyanıza şu örnekler gibi etiketler ekleyin:

`Json
   // renklendirme kodu
`
`Html
   // renklendirme kodu
`
`` `Js
   // renklendirme kodu
`
`CSS
   // renklendirme kodu
`
// vb.

"Ön" veya "kod" etiketi gerekmez.

Bu, GitHub Markdown belgelerinde (sayfanın yaklaşık yarısında, Ruby kullanan bir örnek var) ele alınmıştır. GitHub, sözdizimini tanımlamak ve vurgulamak için Linguist'i kullanır - Linguist'in YAML dosyasında desteklenen dillerin tam listesini (ve işaretleme anahtar kelimelerini) bulabilirsiniz .


4
@NielsAbildgaard Teşekkür ederiz! :) Cevap, şu anda GitHub .md dosyalarında düz metin renklendirememenizdir. Bunu söyledim ve araştırmak için yaklaşık 4 saat harcadım. Neyse yararlı .md kod etiketlerimi işaret ettiğiniz için teşekkür ederim, çok teşekkür ederim!
totallytotallyamazing

1
Ben de çalıştıramadım, ama garip çünkü renk özelliği beyaz liste: github.com/github/markup/tree/master#html-sanitization
dotMorten

@dotMorten emin değilim ama sanırım Scott H'nin yazısına en son yorumunu hemen benim bırakmak istiyordun?
totallytotallyamazing

1
´´´´ Deprecated´´´´ kullandım . Dokümanlara kullanımdan kaldırılan etiketler eklemek için iyi çalıştı.
MRodrigues

4
Yeşil ve kırmızı vurgulanmış metin oluşturmak için `` diff```` dil etiketini kullanabilirsiniz.
craigmichaelmartin

42

Ne yazık ki, bu şu anda mümkün değil.

GitHub Markdown dokümantasyon 'renk', 'css', 'html', ya da 'stil' hiç söz vardır.

Bazı Markdown işlemciler (örn kullanılandan iken Hayalet ) gibi HTML için izin <span style="color:orange;">Word up</span>Github en atıkların herhangi bir HTML.

Benioku dosyasında renk kullanmanız zorunluysa, README.md dosyanız yalnızca kullanıcıları bir README.html dosyasına yönlendirebilir. Bunun karşılığı, elbette erişilebilirliktir.


11
Bu genel olarak HTML atmak değil, hr, br, p, b, ive diğerleri işi!
CodeManX

Bir README.html dosyasına yönlendirirseniz, taahhüt geçmişini kaybetmemek için bir kopyasını depoda saklamak isteyebilirsiniz. Özellikle kurnaz hissediyorsanız, gh sayfalarınıza bile ekleyebilirsiniz.
Sandy Gifford

2
GitHub'ın izin verdiği gerçek HTML etiketleri ve özellikleri için jch / html-pipeline kaynak koduna bakın .
Jason Antman

21

Raster görüntü oluşturmaya alternatif olarak, bir SVG dosyası gömebilirsiniz:

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

Daha sonra her zamanki gibi SVG dosyasına renkli metin ekleyebilirsiniz:

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

Ne yazık ki, .svgdosyayı açtığınızda metin seçip kopyalayabilmenize rağmen , SVG görüntüsü katıştırıldığında metin seçilemez.

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


20

Qwertman ile şu anda GitHub işaretlemesinde metin için renk belirtmenin mümkün olmadığını, en azından HTML yoluyla kabul edemediğim konusunda hemfikirim.

GitHub, bazı HTML öğelerine ve özelliklerine izin verir, ancak yalnızca belirli öğeleri ( HTML dezenfeksiyonu ile ilgili belgelerine bakın ). Niteliklerin yanı sıra izin pve divetiket de yaparlar color. Ancak, GitHub'daki bir markdown belgesinde bunları kullanmayı denediğimde işe yaramadı. Aşağıdakileri denedim (diğer varyasyonların yanı sıra) ve işe yaramadı:

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

Qwertman'ın önerdiği gibi, gerçekten renk kullanmanız gerekiyorsa, bunu bir README.html dosyasında yapabilir ve bunlara başvurabilirsiniz.


6
Evet, maalesef cevabımın belirttiği gibi Github'da çalışmıyor.
Scott H

GitHub'ın izin verdiği gerçek HTML etiketleri ve özellikleri için jch / html-pipeline kaynak koduna bakın .
Jason Antman

5

GitHub biçimlendirme sayfasına emoji Enicode karakterleri kullanarak biraz renk ekledim, örneğin 💡 veya 🛑 - bazı tarayıcılarda bazı emoji karakterleri renklidir. (Bildiğim kadarıyla renkli emoji alfabe yoktur.)


3

Github Markdown, yazı itibariyle `#ffffff`renk önizlemesi ile renk kodlarını (backticks!) Not eder. Sadece bir renk kodu kullanın ve geri çemberlerle çevirin.

Örneğin:

Renk kodlarıyla GitHub işaretlemesi

olur

renk kodlarıyla GitHub işaretlemesi oluşturdu


5
Bunu denedim ve işe yaramıyor gibi görünüyor. Bir örneğe bağlantı verebilir misiniz?
Dave Dopson

2
Backquotes dahil, gibi`#hexhex`
bwindels

2

@AlecRust fikrine dayanarak, png metin hizmetinin bir uygulamasını yaptım.

Demo burada:

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

Dört parametre vardır:

  • metin: görüntülenecek dize
  • font: kullanmıyorum çünkü bu demoda sadece Arial.ttf var.
  • fontSize: bir tamsayı (varsayılan olarak 12'dir)
  • renk: 6 karakter onaltılık kod

Lütfen bu hizmeti doğrudan (testler hariç) kullanmayın, ancak oluşturduğum hizmeti sağlayan sınıfı kullanın:

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: Evren çerçevesini kullanmıyorsanız, bu satırı değiştirmeniz gerekir:

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

Bu kodla:

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

Bu durumda altıgen rengin tam olarak 6 karakter uzunluğunda olması gerekir (karma sembolünü (#) önüne koymayın).

Not: Sonunda, bu hizmeti kullanmadım, çünkü yazı tipinin çirkin ve daha kötü olduğunu buldum: metni seçmek mümkün değildi. Ama bu tartışma uğruna bu kodun paylaşılmaya değer olduğunu düşündüm ...

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.