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

Question

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>

Answer 1

Update:
I now simplified coloured text and you can now just do this:

https://server.powerupstudio.eu/svg/text?text=Hello!&color=green&fontSize=50px&fontWeight=100&padding=5&x=10&y=60&fontFamily=Arial

These are all the query parameters you can use with this endpoint, note that custom fonts from urls won't work and a lot of svg's features will be limited, but still useful for generating coloured text easly.
Note that the padding parameter needs to be a number without units like px or em.

---

I know that this post is very old, but if you need a solution, you can use an endpoint I made for displaying svg: https://server.powerupstudio.eu/svg?c=(SVG CONTENT HERE)

Where (SVG CONTENT HERE) is the svg content, here is an example of using this to display coloured text:

<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg"><text x="10" y="30" fill="green" font-family="Arial">Green</text></svg>

Converted into an URI component:

%3Csvg%20width%3D%22100%22%20height%3D%2250%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctext%20x%3D%2210%22%20y%3D%2230%22%20fill%3D%22green%22%20font-family%3D%22Arial%22%3EGreen%3C%2Ftext%3E%3C%2Fsvg%3E

And put with the url:

https://server.powerupstudio.eu/svg?c=%3Csvg%20width%3D%22100%22%20height%3D%2250%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctext%20x%3D%2210%22%20y%3D%2230%22%20fill%3D%22green%22%20font-family%3D%22Arial%22%3EGreen%3C%2Ftext%3E%3C%2Fsvg%3E

Will generate green text "Green" when embedded into markdown like this:

![SVG](https://server.powerupstudio.eu/svg?c=%3Csvg%20width%3D%22100%22%20height%3D%2250%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ctext%20x%3D%2210%22%20y%3D%2230%22%20fill%3D%22green%22%20font-family%3D%22Arial%22%3EGreen%3C%2Ftext%3E%3C%2Fsvg%3E)

Any type of svg will work and the endpoint will not be down anytime soon as I will use it too, feel free to use it.

Answer 2

Using Latex, I create a theme that I paste at the bottom of my documents, similar to this example:

<!-- MARKDOWN THEME -->
# $\textsf{\color{#f5750e}{f5750e}}$

## $\textsf{\color{#f48522}{f48522}}$

### $\textsf{\color{#326a95}{326a95}}$

#### $\textsf{\color{#18afd3}{18afd3}}$

##### $\textsf{\color{#5ec3d5}{5ec3d5}}$

I copy/paste from my theme to create my headings, similar example to this:

# $\textsf{\color{#f5750e}{Introduction}}$ 

Some introduction text.

### $\textsf{\color{#f48522}{Phase 1.}}$

Some phase 1 text.

#### $\textsf{\color{#326a95}{Section A.}}$  

Some section a text.

Renders:

You can delete the theme from your doc afterwards - it's just there for convenience. Good luck!

Douglas

Answer 3

You can use Shields.io to create a badge containing the text and colors you want:

![](https://img.shields.io/static/v1?label=&message=Ааи&color=green)

renders as

Answer 4

GitHub published support for the Markdown below in https://github.com/orgs/community/discussions/16925.

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.

Here is how it will look like:

The feature is case insensitive, so you can replace [!NOTE] with [!note] if you are so inclined.

Answer 5

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.

🏿 🏾 🏽 🏼 🏻

Answer 6

Before you read the following approach, I suggest, see my research on why GitHub has dropped support for colored text and what it takes to make it work again in the GitHub Flavored Markdown (AKA: GFM).

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

  

• 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=""/>
  

  

Answer 7

I found such an answer for this issue on the github docs page.

You can add an optional language identifier to enable syntax highlighting in your fenced code block.

Syntax highlighting changes the color and style of source code to make it easier to read.

For example, to syntax highlight Ruby code:

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
``

This will display the code block with syntax highlighting: result of highlighting

Hopefully it benefits your business. Click here to access the solution from the Github docs page.

Answer 8

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

This feature has limited availability, as the docs state:

The visualization of the color is only supported in issues, pull requests, and discussions.

Answer 9

If you want to color more than 1 word then I have found this the most convenient way to color text wit Latex in Github.

$\color{lightblue}{\textrm{Red Nimetaga 3 kõige suuremat pilveteenuste pakkujat}}$  

Answer 10

In issues, pull requests, and discussions, you can call out colors within a sentence by using backticks. A supported color model within backticks will display a visualization of the color.

Reference: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#supported-color-models

Answer 11

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](https://placehold.co/15x15/f03c15/f03c15.png) `#f03c15`
- ![#c5f015](https://placehold.co/15x15/c5f015/c5f015.png) `#c5f015`
- ![#1589F0](https://placehold.co/15x15/1589F0/1589F0.png) `#1589F0`

To create a list of any colors you like:

• #f03c15
• #c5f015
• #1589F0

Answer 12

References

refer to Supported color models in GitHub models as they clearly stated that:

Notes:

• A supported color model cannot have any leading or trailing spaces within the backticks.

• The visualization of the color is only supported in issues, pull requests, and discussions.

so they aren't supported through GitHub markdown language, but if you refer to Writing mathematical expressions in GitHub docs, they stated that :

To enable clear communication of mathematical expressions, GitHub supports LaTeX formatted math within Markdown. For more information, see LaTeX/Mathematics in Wikibooks.

which means that GitHub doesn't support color models in README.md files but it supports LaTeX/Mathematics which in turn supports color models in README.md.

so if you refer to this website provided by LaTeX/Mathematics, you will find a section called Color. which doesn't provide so much useful information, but it provides a link to LaTeX/Colors which contains all useful information about how to use latex colors.

also to use LaTeX/Colors, you should use mathematical expressions in your GitHub README, so refer to Writing mathematical expressions in GitHub docs as before where they stated that :

• To include a math expression inline with your text, delimit the expression with a dollar symbol $.

• To add a math expression as a block, start a new line and delimit the expression with two dollar symbols $$.

so for example, if you find an expression in LaTeX/Colors like this :

\textcolor{declared-color}{text}

in order to do it in GitHub according to GitHub docs, you should do it for example:

$\color{green}{test}$

and this is the output:

---

Examples

by referring to LaTeX/Colors, here are some examples with their output as images on GitHub:

Entering colored text

code in README.md file, where \ is used to skip backspace:

## $\textcolor{yellow}{This\ is\ a\ Big\ Title}$

output in GitHub:

Entering colored background for the text

code in README.md file, where \ is used to skip backspace:

## $\colorbox{green}{{\color{white}{This\ is\ a\ Big\ Title}}}$

output in GitHub:

change color for only part of the text

code in README.md file, where \ is used to skip backspace:

# ${This\ is\ a\ {\color{red}Big}}\ Title$

output in GitHub:

and so on, you can try the rest by yourself.

also, they stated that :

The predefined color names are

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

and you can define your colors, refer to the LaTeX/Colors as stated above and try it by yourself 😊.

Answer 13

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:

Answer 14

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)

Answer 15

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.

Answer 16

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

Answer 17

Here is the code you can write to color texts:

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

Answer 18

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

Answer 19

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

Answer 20

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

Answer 21

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.

Answer 22

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.

Answer 23

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.