问题
I have a README.md file for my project underscore-cli, a pretty sweet tool for hacking JSON and JS on the command-line.
I want to document the \"--color\" flag ... which ... colors things. That would go over a lot better if I could actually show what the output looks like. I can\'t seem to find a way to add color to my README.md. Any ideas?
I\'ve tried this:
<span style=\"color: green\"> Some green text </span> And this:
<font color=\"green\"> Some green text </font> No luck so far.
回答1:
It's worth mentioning that you can add some colour in a README using a placeholder image service. For example if you wanted to provide a list of colours for reference:
-  `#f03c15` -  `#c5f015` -  `#1589F0` Produces:
#f03c15-
#c5f015 -
#1589F0
回答2:
You can use the diff language tag to generate some colored text:
```diff - text in red + text in green ! text in orange # text in gray ``` However, it adds it as a new line starting with either - + ! #
This issue was raised in github markup #369, but they haven't made any change in decision since then (2014).
回答3:
You cannot color plain text in a GitHub README.md file. You can however add color to code samples with the tags below.
To do this just add tags such as these samples to your README.md file:
```json // code for coloring ``` ```html // code for coloring ``` ```js // code for coloring ``` ```css // code for coloring ``` // etc.
No "pre" or "code" tags needed.
This is covered in the GitHub Markdown documentation (about half way down the page, there's an example using Ruby). GitHub uses Linguist to identify and highlight syntax - you can find a full list of supported languages (as well as their markdown keywords) over in the Linguist's YAML file.
回答4:
Unfortunately, this is currently not possible.
The GitHub Markdown documentation has no mention of 'color', 'css', 'html', or 'style'.
While some Markdown processors (e.g. the one used in Ghost) allow for HTML, such as <span style="color:orange;">Word up</span>, GitHub's discards any HTML.
If it's imperative that you use color in your readme, your README.md could simply refer users to a README.html. The trade-off for this, of course, is accessibility.
回答5:
I'm inclined to agree with Qwertman that it's not currently possible to specify color for text in GitHub markdown, at least not through HTML.
GitHub does allow some HTML elements and attributes, but only certain ones (see their documentation about their HTML sanitization). They do allow p and div tags, as well as color attribute. However, when I tried using them in a markdown document on GitHub, it didn't work. I tried the following (among other variations), and they didn't work:
<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>.
As Qwertman suggested, if you really must use color you could do it in a README.html and refer them to it.
回答6:
As an alternative to rendering a raster image, you can embed a SVG file:
<a><img src="http://dump.thecybershadow.net/6c736bfd11ded8cdc5e2bda009a6694a/colortext.svg"/></a> You can then add color text to the SVG file as usual:
<?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> Unfortunately, even though you can select and copy text when you open the .svg file, the text is not selectable when the SVG image is embedded.
Demo: https://gist.github.com/CyberShadow/95621a949b07db295000
回答7:
I added some color to a GitHub markup page using emoji Enicode chars, e.g. 💡 or 🛑 -- some emoji characters are colored in some browsers. (There are no colored emoji alphabets as far as I know though.)
回答8:
As of writing, Github Markdown renders `#hexhex` with a color preview.
回答9:
Based on @AlecRust idea, I did an implementation of png text service.
The demo is here:
http://lingtalfi.com/services/pngtext?color=cc0000&size=10&text=Hello%20World
There are four parameters:
- text: the string to display
- font: not use because I only have Arial.ttf anyway on this demo.
- fontSize: an integer (defaults to 12)
- color: a 6 chars hexadecimal code
Please do not use this service directly (except for testing), but use the class I created that provides the service:
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); } } Note: if you don't use the universe framework, you will need to replace this line:
$rgbColors = ConvertTool::convertHexColorToRgb($hexColor); With this code:
$rgbColors = sscanf($hexColor, "%02x%02x%02x"); In which case your hex color must be exactly 6 chars long (don't put the hash symbol (#) in front of it).
Note: in the end, I did not use this service, because I found that the font was ugly and worse: it was not possible to select the text. But for the sake of this discussion I thought this code was worth sharing...
来源：https://stackoverflow.com/questions/11509830/how-to-add-color-to-githubs-readme-md-file