How to add color to GitHub's README.md file
GithubColorsMarkdownGithub PagesReadmeGithub Problem Overview
I have a README.md file for my project underscore-cli, and I want to document the --color flag.
Currently, the only way to do this is with a screenshot (which can be stored in the project repository):
But screenshots aren't text, preventing readers from copy/pasting the command in the screenshot. They're also a pain to create / edit / maintain, and are slower for browsers to load. The modern web uses text styles, not a bunch of rendered images of text.
While some Markdown parsers support inline HTML styling, GitHub doesn't; this doesn't work:
<span style="color: green"> Some green text </span>
This doesn't work:
<font color="green"> Some green text </font>
Github Solutions
Solution 1 - Github
One way to add color to a README is by utilising a service that provides placeholder images.
For example this Markdown can be used:
-  `#f03c15`
-  `#c5f015`
-  `#1589F0`
To create a list of any colors you like:
#f03c15#c5f015#1589F0
Solution 2 - Github
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
@@ text in purple (and bold)@@
```
However, it adds it as a new line starting with either - + ! # or starts and ends with @@
This issue was raised in GitHub markup #369, but they haven't made any change in the decision since then (2014).
Solution 3 - Github
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:
// code for coloring
// code for coloring
// code for coloring
// code for coloring
// etc.
No "pre" or "code" tags needed.
This is covered in the https://help.github.com/articles/github-flavored-markdown">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.
Solution 4 - Github
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 file could simply refer users to a README.html file. The trade-off for this, of course, is accessibility.
Solution 5 - Github
As an alternative to rendering a raster image, you can embed an SVG file:
<a><img src="https://dump.cy.md/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
Solution 6 - Github
These emoji characters are also useful if you are okay with this limited variety of colors and shapes (though they may look different in different OS and browsers), This is an alternative to AlecRust's answer which needs an external service that may go down some day, and with the idea of using emojis from Luke Hutchison's answer:
⚫⚪⭕
⬛⬜⏹☑✅❎
❤️李癩懶♥️❣️♡
♦流
◻️◼️◾️◽️▪️▫️
There are also many colored rectangle characters with alphanumeric, arrow, and other symbols that may work for you.
Example usage: This was my use case that got solved by these emojis (which came to mind after reading the answers here)
Also, the following emojis are skin tone modifiers that have the skin colors inside this rectangular-ish shape only on some devices. For example, in Windows, they are not even colored. Don't use them! Because they shouldn't be alone, they're supposed to be used with other emojis to modify the output of their sibling emojis. And also they are rendered so much different in different OS, version, browser, and version combination when used alone.
Solution 7 - Github
I'm inclined to agree with M-Pixel that it's not currently possible to specify color for text in GitHub Markdown content, 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 M-Pixel suggested, if you really must use color you could do it in a README.html file and refer them to it.
Solution 8 - Github
At the time of writing, GitHub Markdown renders color codes like `#ffffff` (note the backticks!) with a color preview. Just use a color code and surround it with backticks.
For example:
becomes
Solution 9 - Github
I added some color to a GitHub markup page using emoji Unicode characters, e.g., or -- some emoji characters are colored in some browsers.
There are also some colored emoji alphabets: blood types ️️️; parking sign ️; metro sign Ⓜ️; a few others with two or more letters, such as , and boxed digits such as 0️⃣. Flag emojis will show as letters (often colored) if the flag is not available: .
However, I don't think there is a complete colored alphabet defined in emoji.
Solution 10 - Github
Based on AlecRust's idea, I did an implementation of the 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 used, because I only have Arial.ttf anyway on this demo.
- fontSize: an integer (defaults to 12)
- color: a six-character 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 web service.
*
* 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 characters).
* 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 six characters 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...
Solution 11 - Github
Something like this could be done:
Solution 12 - Github
May not be the exact answer to the question asked, but when I was in OP's situation i was looking for the solution below:
Done Simply with:
[](https://github.com/hamzamohdzubair/redant)
[](https://hamzamohdzubair.github.io/redant/)
[](https://docs.rs/crate/redant/latest)
[](https://crates.io/crates/redant)
[](https://lib.rs/crates/redant)
Solution 13 - Github
the question was "how to color text in github readme"
which is difficult/impossible
off topic: in github issues, we can use
<span color="red">red</span>
Example:
#!/bin/bash
# Convert ANSI-colored terminal output to GitHub Markdown
# To colorize text on GitHub, we use <span color="red">red</span>, etc.
# Depends on:
# aha: convert terminal colors to html
# xclip: copy the result to clipboard
# License: CC0-1.0
# Note: some tools may need other arguments than `--color=always`
# Sample use: colors-to-github.sh diff a.txt b.txt
cmd="$1"
shift # now the arguments are in $@
(
echo '<pre>'
$cmd --color=always "$@" 2>&1 | aha --no-header
echo '</pre>'
) \
| sed -E 's/<span style="[^"]*color:([^;"]+);"/<span color="\1"/g' \
| sed -E 's/ style="[^"]*"//g' \
| xclip -i -sel clipboard
Solution 14 - Github
Here is the code you can write to color texts:
<h3 style="color:#ff0000">Danger</h3>