Cara menambahkan warna ke file README.md Github


309

Saya punya README.mdfile untuk proyek saya garis bawah-cli , alat yang cukup manis untuk meretas JSON dan JS di baris perintah.

Saya ingin mendokumentasikan --colorbendera ... yang ... mewarnai berbagai hal. Itu akan jauh lebih baik jika saya benar-benar dapat menunjukkan seperti apa bentuknya. Sepertinya saya tidak bisa menemukan cara untuk menambah warna pada laptop saya README.md. Ada ide?

Saya sudah mencoba ini:

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

Dan ini:

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

Tidak beruntung sejauh ini.


1
Jika Anda tidak dapat mewarnai teks Anda melalui penurunan harga, apakah menanamkan tangkapan layar akan berhasil?
girasquid

IYA. Saya memikirkan hal itu tepat setelah saya memposting pertanyaan ini. Saya pikir tangkapan layar mungkin jawaban fallback terbaik saya, meskipun jelas tidak ideal.
Dave Dopson

1
jadi belum memungkinkan untuk menambahkan warna ke teks dalam file penurunan harga?
Nam Nguyen

2
tidak - dan Juli 2014 ffs
lfender6445

Jawaban:


353

Perlu disebutkan bahwa Anda dapat menambahkan beberapa warna dalam README menggunakan layanan gambar placeholder. Misalnya jika Anda ingin memberikan daftar warna untuk referensi:

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

Menghasilkan:

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

Ini bekerja sangat baik di Kartu dalam proyek GitHub dan itu dapat digunakan untuk menandai kartu dan mewarnai mereka
Ziad Akiki

1
@BinarWeb di mana Anda meletakkan ini? Akan bekerja pada GitHub misalnya yang mendukung gambar dalam penurunan harga.
AlecRust

3
sebagai pertanyaan bertanya, saya ingin mewarnai teks, tidak memiliki gambar di depan teks
Binar Web

4
Apa yang saya jelaskan berhasil. Anda juga dapat meletakkan teks berwarna pada gambar, misalnyahttps://placehold.it/150/ffffff/ff0000?text=hello
AlecRust

Info yang sangat berguna, membantu saat membuat aplikasi web di backend.
Tropicalrambler

193

Anda dapat menggunakan difftag bahasa untuk menghasilkan beberapa teks berwarna:

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

Namun, ia menambahkannya sebagai baris baru yang dimulai dengan salah satu - + ! #atau mulai dan diakhiri dengan@@

masukkan deskripsi gambar di sini

Masalah ini dimunculkan dalam github markup # 369 , tetapi mereka tidak membuat perubahan dalam keputusan sejak saat itu (2014).


1
Ini juga warna teks yang dikelilingi oleh @@warna ungu (dan tebal). Codecov mengambil keuntungan dari ini dalam komentar bot integrasi GitHub, misalnya: github.com/zeit/now/pull/2570#issuecomment-512585770
Jacob Ford

79

Anda tidak dapat mewarnai teks biasa dalam README.mdfile GitHub . Namun Anda dapat menambahkan warna ke sampel kode dengan tag di bawah ini.

Untuk melakukan ini cukup tambahkan tag seperti contoh ini ke file README.md Anda:

`` `json
   // kode untuk mewarnai
`` `
`` `html
   // kode untuk mewarnai
`` `
`` `js
   // kode untuk mewarnai
`` `
`` `css
   // kode untuk mewarnai
`` `
// dll

Tidak diperlukan tag "pra" atau "kode".

Ini dicakup dalam dokumentasi Penurunan GitHub (sekitar setengah jalan halaman, ada contoh menggunakan Ruby). GitHub menggunakan Ahli Bahasa untuk mengidentifikasi dan menyorot sintaksis - Anda dapat menemukan daftar lengkap bahasa yang didukung (serta kata kunci penurunan harga mereka) di dalam file YAML milik Ahli Bahasa .


4
@NielsAbildgaard Terima kasih! :) Jawabannya adalah bahwa Anda tidak dapat mewarnai teks biasa dalam file .md GitHub setidaknya saat ini. Saya menyatakan itu dan menghabiskan sekitar 4 jam untuk meneliti itu. Bagaimanapun, Terima kasih telah menunjukkan tag kode .md saya yang bermanfaat, saya menghargainya!
totaltotallyamazing

1
Saya juga tidak bisa membuatnya berfungsi, tetapi ini aneh karena atribut warna masuk daftar putih: github.com/github/markup/tree/master#html-sanitization
dotMorten

@dotMorten tidak yakin, tetapi saya pikir Anda bermaksud untuk meninggalkan komentar terakhir Anda di pos Scott H tepat di atas saya?
totaltotallyally mulai

1
Saya menggunakan ´´´´ Deprecated´´´´. Berfungsi dengan baik, untuk menambahkan tag yang tidak digunakan lagi pada dokumen.
MRodrigues

4
Anda dapat menggunakan tag bahasa `` `diff```` untuk menghasilkan teks yang disorot hijau dan merah.
craigmichaelmartin

42

Sayangnya, saat ini tidak memungkinkan.

The dokumentasi GitHub penurunan harga tidak menyebutkan 'warna', 'css', 'html', atau 'gaya'.

Sementara beberapa prosesor Markdown (misalnya yang digunakan dalam Ghost ) memungkinkan HTML, seperti <span style="color:orange;">Word up</span>, GitHub membuang semua HTML.

Jika Anda harus menggunakan warna dalam readme Anda, README.md Anda bisa dengan mudah merujuk pengguna ke README.html. Pertukaran untuk ini, tentu saja, adalah aksesibilitas.


11
Ini tidak membuang HTML pada umumnya, hr, br, p, b, idan lain-lain melakukan pekerjaan!
CodeManX

Jika Anda meneruskan ke README.html, Anda mungkin ingin menyimpan salinannya di repositori sehingga Anda tidak kehilangan riwayat komitnya. Jika Anda merasa sangat licik, Anda bahkan bisa memasukkannya ke halaman gh Anda.
Sandy Gifford

2
Lihat kode sumber jch / html-pipeline untuk tag HTML aktual dan atribut yang diperbolehkan oleh GitHub.
Jason Antman

21

Sebagai alternatif untuk merender gambar raster, Anda dapat menyematkan file SVG:

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

Anda kemudian dapat menambahkan teks warna ke file SVG seperti biasa:

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

Sayangnya, meskipun Anda dapat memilih dan menyalin teks ketika Anda membuka .svgfile, teks tidak dapat dipilih ketika gambar SVG tertanam.

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


20

Saya cenderung setuju dengan Qwertman bahwa saat ini tidak mungkin untuk menentukan warna untuk teks dalam penurunan harga GitHub, setidaknya tidak melalui HTML.

GitHub mengizinkan beberapa elemen dan atribut HTML, tetapi hanya yang tertentu (lihat dokumentasi mereka tentang sanitasi HTML ). Mereka mengizinkan pdan memberi divtag, serta coloratribut. Namun, ketika saya mencoba menggunakannya dalam dokumen penurunan harga di GitHub, itu tidak berhasil. Saya mencoba yang berikut (di antara variasi lain), dan mereka tidak berhasil:

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

Seperti yang disarankan Qwertman, jika Anda benar-benar harus menggunakan warna, Anda bisa melakukannya dalam README.html dan merujuknya.


6
Ya, sayangnya itu tidak berfungsi di Github, seperti yang dinyatakan oleh jawaban saya.
Scott H

Lihat kode sumber jch / html-pipeline untuk tag HTML aktual dan atribut yang diperbolehkan oleh GitHub.
Jason Antman

5

Saya menambahkan beberapa warna ke halaman markup GitHub menggunakan emoji Enicode chars, misalnya 💡 atau 🛑 - beberapa karakter emoji diwarnai di beberapa browser. (Tidak ada huruf emoji berwarna sejauh yang saya tahu.)


3

Pada saat penulisan, Github Markdown membuat kode warna seperti `#ffffff`(perhatikan backticks!) Dengan pratinjau warna. Cukup gunakan kode warna dan mengelilinginya dengan backticks.

Sebagai contoh:

Penurunan harga GitHub dengan kode warna

menjadi

membuat penurunan GitHub dengan kode warna


5
Saya mencobanya, dan sepertinya tidak berhasil. Bisakah Anda menautkan ke contoh?
Dave Dopson

2
Termasuk backquotes, seperti`#hexhex`
bwindels

2

Berdasarkan ide @AlecRust, saya melakukan implementasi layanan teks png.

Demo ada di sini:

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

Ada empat parameter:

  • teks: string untuk ditampilkan
  • font: tidak digunakan karena saya hanya punya Arial.ttf pada demo ini.
  • fontSize: integer (default ke 12)
  • warna: kode heksadesimal 6 karakter

Harap jangan menggunakan layanan ini secara langsung (kecuali untuk pengujian), tetapi gunakan kelas yang saya buat yang menyediakan layanan:

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

Catatan: jika Anda tidak menggunakan kerangka semesta , Anda harus mengganti baris ini:

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

Dengan kode ini:

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

Dalam hal ini warna hex Anda harus tepat 6 chars (jangan letakkan simbol hash (#) di depannya).

Catatan: pada akhirnya, saya tidak menggunakan layanan ini, karena saya menemukan bahwa fontnya jelek dan lebih buruk: tidak mungkin untuk memilih teks. Tetapi demi diskusi ini saya pikir kode ini layak dibagikan ...

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.