Saya memiliki README.md file untuk proyek saya underscore-cli, yang cukup manis alat untuk hacking JSON dan JS pada baris perintah.
Aku ingin mendokumentasikan "--warna" bendera ... yang ... warna hal. Yang akan pergi jauh lebih baik jika saya bisa benar-benar menunjukkan apa yang tampak output seperti. Saya dapat't tampaknya menemukan cara untuk menambahkan warna untuk saya README.md. Ada ide?
I've mencoba ini:
<span style="color: green"> Some green text </span>
Dan ini:
<font color="green"> Some green text </font>
Tidak berhasil sejauh ini.
It's layak disebut bahwa anda dapat menambahkan beberapa warna di README menggunakan gambar placeholder layanan. Misalnya jika anda ingin memberikan sebuah daftar warna untuk referensi:
- ![#f03c15](https://placehold.it/15/f03c15/000000?text=+) `#f03c15`
- ![#c5f015](https://placehold.it/15/c5f015/000000?text=+) `#c5f015`
- ![#1589F0](https://placehold.it/15/1589F0/000000?text=+) `#1589F0`
Menghasilkan:
#f03c15
#c5f015
#1589F0
Anda dapat menggunakan diff
tag bahasa untuk menghasilkan beberapa teks berwarna:
```diff
- text in red
+ text in green
! text in orange
# text in gray
Namun, ia menambahkan sebagai baris baru dimulai dengan baik `- + ! #`
[![enter image description here][1]][1]
Isu ini diangkat dalam [github markup #369][2], tetapi mereka belum't membuat perubahan apapun dalam pengambilan sejak itulah (2014).
[1]: https://i.stack.imgur.com/0buxS.png
[2]: https://github.com/github/markup/issues/369
Anda tidak warna teks di GitHub README.md
file. Namun anda dapat menambahkan warna untuk contoh kode dengan tag-tag di bawah ini.
Untuk melakukan ini, cukup tambahkan kategori seperti ini sampel untuk anda README.md file:
``json // kode untuk mewarnai `` ``html // kode untuk mewarnai `` ``js // kode untuk mewarnai `` ``css // kode untuk mewarnai `` // dll.
Tidak ada "pre" atau "kode" kategori yang dibutuhkan.
Ini adalah tertutup di GitHub Penurunan harga dokumentasi (sekitar setengah jalan ke bawah halaman, ada's contoh menggunakan Ruby). GitHub menggunakan Bahasa untuk mengidentifikasi dan menyoroti sintaks - anda dapat menemukan daftar lengkap dari bahasa yang didukung (serta mereka markdown kata kunci) di atas di Linguis's file YAML.
Sayangnya, saat ini tidak mungkin.
The GitHub Penurunan harga dokumentasi tidak menyebutkan 'warna', 'css', 'html', atau 'gaya'.
Sementara beberapa Penurunan harga prosesor (misalnya yang digunakan di Ghost) memungkinkan untuk HTML, seperti <span style="warna:orange;">Word up</span>
, GitHub's membuang HTML.
Jika itu's penting bahwa anda menggunakan warna yang di readme, anda README.md hanya bisa merujuk pengguna untuk README.html. Trade-off ini, tentu saja, adalah aksesibilitas.
I'm cenderung setuju dengan Qwertman bahwa itu's saat ini tidak mungkin untuk menentukan warna untuk teks di GitHub penurunan harga, setidaknya tidak melalui HTML.
GitHub tidak memungkinkan beberapa elemen HTML dan atributnya, tetapi hanya orang-orang tertentu (lihat dokumentasi mereka tentang mereka HTML sanitasi). Mereka mengizinkan p
dan div
tag, serta warna
atribut. Namun, ketika saya mencoba menggunakan mereka dalam dokumen penurunan harga di GitHub, itu didn't bekerja. Saya mencoba berikut (antara lain variasi), dan mereka didn't bekerja:
<p style='warna:merah'>Ini adalah beberapa teks merah.</p>
<font color="red">Ini adalah beberapa teks!</font>
Ini <b style='warna:merah'>merah kata-kata</b>.
Sebagai Qwertman menyarankan, jika anda benar-benar harus menggunakan warna yang anda bisa melakukannya dalam README.html dan merujuk mereka untuk itu.
Sebagai alternatif untuk rendering gambar raster, anda dapat menanamkan SVG berkas:
<a><img src="http://dump.thecybershadow.net/6c736bfd11ded8cdc5e2bda009a6694a/colortext.svg"/></a>
Anda kemudian dapat menambahkan warna teks 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 .svg
file, teks tidak dapat dipilih ketika SVG gambar tertanam.
Demo: https://gist.github.com/CyberShadow/95621a949b07db295000
Saya menambahkan beberapa warna ke GitHub markup halaman menggunakan emoji Enicode karakter, misalnya 💡 atau 🛑 -- beberapa karakter emoji berwarna di beberapa browser. (Tidak ada warna emoji abjad sejauh yang saya tahu, meskipun.)
Berdasarkan @AlecRust ide, saya melakukan pelaksanaan png layanan teks.
Demo di sini:
http://lingtalfi.com/services/pngtext?color=cc0000&ukuran=10&text=Halo%20World
Ada empat parameter:
Jangan gunakan layanan ini secara langsung (kecuali untuk pengujian), tetapi menggunakan class 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 don't menggunakan alam semesta framework, anda akan perlu untuk mengganti baris ini:
$rgbColors = ConvertTool::convertHexColorToRgb($hexColor);
Dengan kode ini:
$rgbColors = sscanf($hexColor, "%02x%02x%02x");
Dalam hal ini anda hex warna harus tepat 6 karakter panjang (don't menempatkan simbol hash (#) di depannya).
Catatan: pada akhirnya, saya tidak menggunakan layanan ini, karena saya menemukan bahwa font yang jelek dan lebih buruk: itu tidak mungkin untuk memilih teks. Tapi demi diskusi ini saya pikir kode ini layak berbagi...