526

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

23 Answers 23

564
+50

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 #f03c15
  • #c5f015 #c5f015
  • #1589F0 #1589F0
14
  • 2
    This works great in Cards within a GitHub project and those can be used to tag the cards and color them
    – Ziad Akiki
    Jul 4, 2018 at 9:44
  • 24
    as the question enquired, i wanted to color the text, not to have an image in front of the text
    – Binar Web
    Aug 28, 2018 at 9:28
  • 14
    What I've described works. You can also put coloured text in the image e.g. https://placehold.it/150/ffffff/ff0000?text=hello
    – Alec Rust
    Aug 28, 2018 at 13:58
  • 8
    🟥🟩🟦 ref: emojipedia.org/large-red-square Dec 16, 2021 at 14:31
  • 5
    This answer might not work in year 2022. GitHub is anonymizing URLs to protect users reading the Readme file. All of the requests to external sites now flow via its github-camo servers. On the other hand, placeholder.com is rejecting requests if they exceed 100,000 for an IP address in a month (See 'Usage Limit' rule on this page. Thankfully, StackOverflow is not proxying the requests so you can still see the images in the answer above. Sep 18, 2022 at 11:05
409

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

Enter image description here

This issue was raised in GitHub markup #369, but they haven't made any change in the decision since then (2014).

4
  • 8
    It also colors text surrounded by @@ in purple (and bold). Codecov takes advantage of this in its GitHub integration bot's comments, for example: github.com/zeit/now/pull/2570#issuecomment-512585770
    – Jacob Ford
    Oct 26, 2019 at 18:56
  • 2
    I think your answer will be more compelling if you include a clever hack that I saw on the github issue: using text like "-! Warning !-" to incorporate / hide the color-triggering initial character. Feb 15, 2021 at 22:05
  • 1
    this is exactly the use case I had, I wanted to highlight the diff in an issue comment where I was providing a quick workaround
    – nmz787
    Oct 13, 2021 at 3:57
  • 1
    The downside to this solution is that it surrounds the colored text in a code block
    – C RICH
    Jul 6 at 15:26
114

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.

14
  • 5
    @NielsAbildgaard Thank you! :) The answer is that that you can not color plain text in GitHub .md files at least at this time. I did state that and spent about 4 hours researching it. Anyway Thank you for pointing out my helpful .md code tags, I appreciate it! Sep 4, 2014 at 15:24
  • 1
    I couldn't get it working either, but it's weird because the color attribute is whitelisted: github.com/github/markup/tree/master#html-sanitization
    – dotMorten
    Feb 12, 2015 at 17:05
  • 1
    I used ´´´´Deprecated´´´´. Worked fine, for adding tags deprecated to docs.
    – MRodrigues
    Jul 27, 2015 at 9:12
  • 7
    You can use the ```diff```` language tag to generate green and red highlighted text. Sep 9, 2016 at 14:32
  • 1
    Similar to the OP I want to make a particular bit of text a particular color. You offered this code coloring mechanism as an answer for how to do that, but don't show how to make any particular thing appear in any particular color. Apr 3, 2018 at 22:05
55

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.

🏿 🏾 🏽 🏼 🏻

4
  • 1
    That's a neat hack! It doesn't solve the syntax-highlighting need that originally caused me to post the question, but it can probably address a variety of other needs. Dec 9, 2020 at 23:45
  • Thanks @DaveDopson 🙌
    – Unicornist
    Feb 22, 2021 at 20:27
  • 1
    @Unicornist FYI, I'm not sure why but circles 2, 3, 4, 6, 7 don't render for me, nor the first 7 squares and a couple of the hearts
    – jberryman
    Apr 5, 2021 at 18:05
  • 1
    You do not have to limit yourself to any forms. Instead, you can create a single .svg file and query differently colored elements based on the id. For example, all images in this table are from the same SVG. One could as well insert colored text like this.
    – xamid
    May 21 at 5:22
54

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.

6
  • 31
    It does not discard HTML in general, hr, br, p, b, i and others do work!
    – CodeManX
    Sep 8, 2015 at 20:10
  • If you do forward to a README.html, you may want to keep a copy of it in the repository so you don't lose its commit history. If you're feeling particularly sly, you could even include it in your gh-pages. Jan 20, 2016 at 21:21
  • 5
    See the source code of jch/html-pipeline for the actual HTML tags and attributes that GitHub allows. Dec 14, 2017 at 12:35
  • This answer could be even stronger if it outlined an end-to-end pattern: using README.html.md as the source-code, rendered via Ghost to README.html, which is what gets rendered on the Github page. Does README.html show up by default, or does the user have to click-through to access it? Feb 15, 2021 at 22:18
  • Update: I tried this, but unfortunately the end-to-end story isn't possible because Github doesn't automatically render the README.html file; it shows up as plain text. This must be why you suggested linking to it. Now I understand your comment about "accessibility" a bit better. Feb 15, 2021 at 22:35
53

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

4
  • 3
    Hi there, why text is displayed in the middle? Jun 5 at 1:55
  • @FarkhodAbdukodirov use one (1) $ at start and end to keep text left-aligned Aug 2 at 7:11
  • @F4NT0 excellent, should be the accepted answer as of Sep 2022. Allow me to point out that one problem is the ${}$ construct doesn't seem to wrap, so if you put a long line of text then on mobile apps the page will appear left-squished. That's fixable by breaking the long line into a few shorter lines, but in that case each line is separated by quite some blank space. Do you know how to remove blank space between successive ${}$ ? Aug 2 at 7:14
  • 3
    Use something like ${\textsf{\color{lightgreen}Green}}$ to match the markdown font better and have it inline.
    – perpil
    Sep 26 at 18:22
38

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

34

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

This feature has limited availability, as the docs state:

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

5
  • 17
    I tried that, and it doesn't seem to work. Can you link to an example? Sep 25, 2019 at 18:11
  • 2
    Including backquotes, like `#hexhex`
    – bwindels
    Sep 27, 2019 at 12:52
  • 1
    This should be the accepted answer. Is simple, it doesn't require an external website or HTML.
    – moxi
    Aug 3, 2020 at 22:16
  • 14
    The question is how to color text, this does not solve it. Also, this color preview is no longer supported on .MD files.
    – Zack
    Aug 22, 2020 at 19:49
  • 2
    This does not seems to work anymore Jun 7, 2022 at 20:46
30

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.

1
24

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.

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

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

Here is how it will look like:

enter image description here

4
  • I tried it but the result does not have corresponding notation icon and color.
    – A.R.S.D.
    Aug 16, 2022 at 10:24
  • 4
    Oh! it is case sensitive, and it should be Warning instead of warning to work. Thanks.
    – A.R.S.D.
    Aug 16, 2022 at 10:26
  • 1
    yeah I think it is still experimental, but I like it :D
    – blackjacx
    Aug 17, 2022 at 8:27
  • 1
    This was publicized in github.com/orgs/community/discussions/16925 at the time, not silently added.
    – Harmon758
    Aug 28 at 15:08
16

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/

2
14

Something like this could be done:

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

1
  • doesn't work in Github issues
    – Suncatcher
    May 19, 2022 at 11:14
13

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

enter image description here


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:

enter image description here

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:

enter image description here

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:

enter image description here

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

12

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.

3
  • What is "Enicode"? Do you have an (authoritative) reference? Can you add it to your answer (named link, not a naked URL)? (But without "Edit:", "Update:", or similar - the question/answer should appear as if it was written today.) Nov 10, 2021 at 17:20
  • @PeterMortensen Enicode was a typo -- it should have said Unicode, sorry. (Fixed -- I'm pretty sure you don't need an authoritative reference to emoji characters.) What I was saying is that on most platforms, emoji characters (encoded in, e.g., UTF-8) are displayed in color, even in the middle of plain black and white text. So you can add color to your text by using emoji characters. Nov 30, 2021 at 0:55
  • Damn, I was hoping Enicode was some kind of extension of Unicode to include more emojis. May 31, 2022 at 23:12
9

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

    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

0
5

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

3

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}}$  
2
  • 1
    Best answer imo, but the text doesn't wrap? Know anyway to achieve that
    – Bwizz
    Nov 15, 2022 at 14:06
  • 1
    The lack of text-wrapping is apparently a known limitation of this. Much more about how this works in this "Tex for colors on github markdown" gist.
    – Thogek
    Apr 16 at 17:46
1

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.

0

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.

-2

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

1
  • 2
    As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Jul 29, 2022 at 4:10
-4

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
3
  • 3
    This got downvoted (by someone else) because Github's markdown module doesn't support that colored span tag, but I like the script for auto-conversion. That would work with the Ghost markdown parser, or if Github ever fixes github.com/github/markup/issues/1440. Feb 15, 2021 at 22:48
  • 1
    here is a demo on github. <span color="red">redtext</span> etc. does work on github. only problem i see: no way to set background color
    – milahu
    Feb 18, 2021 at 10:39
  • An explanation would be in order. E.g., in what environment does the script run - e.g., 'xclip' seems to be highly system dependent? On what system (incl. version) was it tested? Linux/Ubuntu? Please respond by editing (changing) your answer, not here in comments (without "Edit:", "Update:", or similar - the answer should appear as if it was written today). Nov 10, 2021 at 17:50
-6

Here is the code you can write to color texts:

<h3 style="color:#ff0000">Danger</h3>
1
  • 2
    Your writing a standard HTML tag, that's not gonna work for GitHub...
    – JΛYDΞV
    Jun 18, 2021 at 20:58

Not the answer you're looking for? Browse other questions tagged or ask your own question.