Cara menambahkan warna ke file README.md Github

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.

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
• #c5f015
• #1589F0

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

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

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 .

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.

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

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.

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

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:

menjadi

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