How to add color to GitHub's README.md file

Viewed 352511

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

example.png

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>
19 Answers

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.

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:

GitHub Markdown with color codes

becomes

rendered GitHub Markdown with color codes

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.

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://img.shields.io/badge/github-blue?style=for-the-badge)](https://github.com/hamzamohdzubair/redant)
[![](https://img.shields.io/badge/book-blueviolet?style=for-the-badge)](https://hamzamohdzubair.github.io/redant/)
[![](https://img.shields.io/badge/API-yellow?style=for-the-badge)](https://docs.rs/crate/redant/latest)
[![](https://img.shields.io/badge/Crates.io-orange?style=for-the-badge)](https://crates.io/crates/redant)
[![](https://img.shields.io/badge/Lib.rs-lightgrey?style=for-the-badge)](https://lib.rs/crates/redant)

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

For coloring texts in GitHub README.md, you can use SVG <text>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 20" fill="none">
    <text x="0" y="15" fill="#4285f4">G</text>
    <text x="12" y="15" fill="#ea4335">o</text>
    <text x="21" y="15" fill="#fbbc05">o</text>
    <text x="30" y="15" fill="#4285f4">g</text>
    <text x="40" y="15" fill="#389738">l</text>
    <text x="45" y="15" fill="#ea4335">e</text>
</svg>

After making your custom text with custom colors, save the SVG file and follow the steps below.

  • Open your repository on GitHub.

  • Click on the Edit button of the README.md

    enter image description here

  • Drag and drop the SVG file to the opened online editor. GitHub will generate a markdown image. Something like the following.

    ![google](https://user-images.githubusercontent.com/000/000-aaa.svg)
    
  • If you want to change the original sizes of the SVG you can use the generated URL as src of <img/> tag and give the needed sizes.

    <img height="100px" src="https://user-images.githubusercontent.com/000/000-aaa.svg" alt=""/>
    

    enter image description here

GitHub silently added support for > __Note__ and > __Warning__ syntax:

enter image description here

This is a workaround to change text font , color and also size in GFM using MathJaX

this is a preview for how it looks like:

enter image description here possible fonts :

mathcal - mathbb - mathscr - mathfrak - mathcal

possible colors :

black, blue, brown, cyan, darkgray, gray, green, lightgray, lime, magenta, olive, orange, pink, purple, red, teal, violet, white, yellow

  • use $..$ for inline code and $$..$$ for centered
  • u can use \color or \textcolor
  • u can use \ between text as a space (or \ \ for double space)
$\mathcal{\color{purple}{this \ is \ a \ paragraph} \ \color{cyan}{in \ another \ font}}$

$\mathbb{\color{teal}{this \ is \ a } \ \color{magenta}{paragraph \ in \ another \ font}}$

$\mathscr{\color{red}{this} \ \ \color{blue}{is \ \ a \ \ paragraph} \ \ \color{yellow}{in \ \ another \ \ font}}$

$\mathfrak{\color{lime}{this \ is \ a \ paragraph \ in \ another \ font}}$

$\mathscr{\color{red}{mon}\color{white}{day}}$

$\textcolor{olive}{\TeX} \ \textcolor{darkgray}{workaround \ found \ by \ Dassalem \ Mohammed \ Yasser}$

$\textit{hello}$  #italic

$\text{hello}$    #normal

$\Large{hello}$$   #Bigger text size

$$\LaTeX$$

Color Marking :

$\colorbox{red}{text}$

Text inside bordered Box 

$\fbox{Hello there}$

U can go advanced with coloring text : possible models : gray - rgb - RGB

Model Desc values
gray Shades of gray 0.1 to 1.0
rgb red,green,blue [0-255]{3}
RGB Red,Green,Blue [0-255]{3}
$\color[rgb]{1,0,1} hello$

$\color[RGB]{155,127,0} hello$

$\color[gray]{0.3} hello$

Remember to keep a new line after $ else it won't be processed

references : https://en.wikibooks.org/wiki/LaTeX/

Now since May 2022, Github can accept LATEX code on Markdown, so you can use the \color{namecolor} inside the $$$$ Block, like the example below:

Basic

Code Appearing
$${\color{red}Red}$$ $${\color{red}Red}$$
$${\color{green}Green}$$ $${\color{green}Green}$$
$${\color{lightgreen}Light \space Green}$$ $${\color{lightgreen}Light \space Green}$$
$${\color{blue}Blue}$$ $${\color{blue}Blue}$$
$${\color{lightblue}Light \space Blue}$$ $${\color{lightblue}Light \space Blue}$$
$${\color{black}Black}$$ $${\color{black}Black}$$
$${\color{white}White}$$ $${\color{white}White}$$

More than one color

  • Code
$${\color{red}Welcome \space \color{lightblue}To \space \color{orange}Stackoverflow}$$
  • Visualization

$${\color{red}Welcome \space \color{lightblue}To \space \color{orange}Stackoverflow}$$

  • This code on Github:

Github live test

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

Here is the code you can write to color texts:

<h3 style="color:#ff0000">Danger</h3>
Related