546

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>
11
  • 2
    If you're not able to color your text through markdown, would embedding a screenshot work?
    – girasquid
    Commented Jul 16, 2012 at 17:57
  • YES. I thought of that just after I posted this question. I think screenshot might be my best fallback answer, though it's clearly not ideal. Commented Jul 16, 2012 at 18:01
  • 1
    so it's not possible yet to add color to text in markdown file?
    – Nam Nguyen
    Commented Apr 13, 2014 at 7:42
  • 2
    nope - and its july 2014 ffs Commented Aug 1, 2014 at 20:34
  • 1

23 Answers 23

573
+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
    Commented Jul 4, 2018 at 9:44
  • 27
    as the question enquired, i wanted to color the text, not to have an image in front of the text
    – Binar Web
    Commented 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
    Commented Aug 28, 2018 at 13:58
  • 9
    🟥🟩🟦 ref: emojipedia.org/large-red-square Commented Dec 16, 2021 at 14:31
  • 7
    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. Commented Sep 18, 2022 at 11:05
429

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

5
  • 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
    Commented 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. Commented 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
    Commented Oct 13, 2021 at 3:57
  • 2
    The downside to this solution is that it surrounds the colored text in a code block
    – C RICH
    Commented Jul 6, 2023 at 15:26
  • I can't help but think this is a rather egregious abuse of semantic markup and (depending on how GitHub structures the underlying HTML, now or in the future) could compromise accessibility for vision-impaired users.
    – Psychonaut
    Commented Jul 27 at 3:37
119

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.

15
  • 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! Commented 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
    Commented Feb 12, 2015 at 17:05
  • 1
    I used ´´´´Deprecated´´´´. Worked fine, for adding tags deprecated to docs.
    – MRodrigues
    Commented Jul 27, 2015 at 9:12
  • 7
    You can use the ```diff```` language tag to generate green and red highlighted text. Commented 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. Commented Apr 3, 2018 at 22:05
82

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

5
  • 3
    Hi there, why text is displayed in the middle? Commented Jun 5, 2023 at 1:55
  • 4
    @FarkhodAbdukodirov use one (1) $ at start and end to keep text left-aligned Commented Aug 2, 2023 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 ${}$ ? Commented Aug 2, 2023 at 7:14
  • 11
    Use something like ${\textsf{\color{lightgreen}Green}}$ to match the markdown font better and have it inline.
    – perpil
    Commented Sep 26, 2023 at 18:22
  • Any help on how to make the line wrapping to work?
    – José Dias
    Commented Jan 14 at 12:53
58

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. Commented Dec 9, 2020 at 23:45
  • Thanks @DaveDopson 🙌
    – Unicornist
    Commented 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
    Commented 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
    Commented May 21, 2023 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
  • 33
    It does not discard HTML in general, hr, br, p, b, i and others do work!
    – CodeManX
    Commented 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. Commented 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. Commented 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? Commented 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. Commented Feb 15, 2021 at 22:35
43

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:

GitHub-flavored Markdown rendering of the above text

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

6
  • I tried it but the result does not have corresponding notation icon and color.
    – A.R.S.D.
    Commented 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.
    Commented Aug 16, 2022 at 10:26
  • 1
    yeah I think it is still experimental, but I like it :D
    – blackjacx
    Commented Aug 17, 2022 at 8:27
  • 1
    This was publicized in github.com/orgs/community/discussions/16925 at the time, not silently added.
    – Harmon758
    Commented Aug 28, 2023 at 15:08
  • 1
    @FWDekker thanks for updating my answer. I just wanred to do the same 👍
    – blackjacx
    Commented Mar 13 at 15:14
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? Commented Sep 25, 2019 at 18:11
  • 2
    Including backquotes, like `#hexhex`
    – bwindels
    Commented 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
    Commented 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
    Commented Aug 22, 2020 at 19:49
  • 2
    This does not seems to work anymore Commented 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
  • See the source code of jch/html-pipeline for the actual HTML tags and attributes that GitHub allows. Commented Dec 14, 2017 at 12:40
16

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

1
  • Very good. Also specify a sans serif font like this: $\textsf{\color{orange}{Your Text}}$ Commented Sep 5 at 14:22
15

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

2
  • doesn't work in Github issues
    – Suncatcher
    Commented May 19, 2022 at 11:14
  • @Suncatcher It works fine in GitHub issues for me. Previously, the code in the answer was not in backticks, so copy-pasting in GitHub actually wrapped some extra tags around it. That is now fixed.
    – FWDekker
    Commented Mar 6 at 20:27
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

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.) Commented 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. Commented Nov 30, 2021 at 0:55
  • Damn, I was hoping Enicode was some kind of extension of Unicode to include more emojis. Commented May 31, 2022 at 23:12
10

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
    Commented 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
    Commented Apr 16, 2023 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

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:

using latext

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

Douglas

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
    Commented 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. Commented 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
    Commented 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). Commented Nov 10, 2021 at 17:50
-7

Here is the code you can write to color texts:

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

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