Colored text to markdown

[F4NT0]

Hi people, i was studying better ways to show information and i discover that github markdown doesn't accept colored text naturally, there's a few ways to colorize text but none of them is good enough.

The most common is using the code block with diff to show some colors

- text in red
+ text in green
! text in orange
# text in gray
@@ text in purple (and bold)@@

other way is putting color HEXCODE like #FFD700

but none of this ways i can colorize well enough my text on Markdown, and then i discovered the following html tag:

<code style="color : name_color">text</code>

in this way i can put colors on Github Pages like this ones:

It helps alot on github pages to show information, but people need to go to my page website to see it, because on the README.md doesn't show the colors:

It will be great when we can change the color to send a more direct message on the markdown README to help people understand different informations on my wiki and so on, someone know a way to put colored text in a wiki instead of the Github pages?

An example i'm using on github pages:

[lx78WyY0J5]

Will be great if we could just do
§colorName[Text]

It's a pain when doing HTML & CSS for MD

[F4NT0]

yes, it will help a lot teaching kids and classes the differences between information, in dark mode the bold doesn't show good enough
i like to use Links to look more direct on the word

[F4NT0]

Find a way to colorfy text in Github in the best way now (Since May 2022)!

If i use the \color{nameColor} code from LATEX inside $$$$, now that github can support

$${\color{yellow}LATEX \space directly \space in \space markdown!}$$

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}$$
$${\color{yellow}Yellow}$$	$${\color{yellow}Yellow}$$
$${\color{orange}Orange}$$	$${\color{orange}Orange}$$

More than one color

• Code

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

• Visualization

Code	Text
$${\color{red}Welcome \space \color{lightblue}To \space \color{lightgreen}{github}}$$	$${\color{red}Welcome \space \color{lightblue}To \space \color{lightgreen}{github}}$$

Few things

• I can put outside tables too

$${\color{red}Welcome \space \color{lightblue}To \space \color{lightgreen}Github}$$ :

$${\color{red}Welcome \space \color{lightblue}To \space \color{lightgreen}Github}$$

• Can be tittles too

$${\color{red}Welcome \space \color{lightblue}To \space \color{lightgreen}Github}$$

$${\color{red}Welcome \space \color{lightblue}To \space \color{lightgreen}Github}$$

$${\color{red}Welcome \space \color{lightblue}To \space \color{lightgreen}Github}$$

$${\color{red}Welcome \space \color{lightblue}To \space \color{lightgreen}Github}$$

• It works on PROFILE README too: Link from the example below

[iAmKankan]

Latex is good for headings and small texts. The biggest problem of latex it does not have automatic line feed, means if you want to write two lines of text or bigger than a line then it would be one line text and line feeding is problematic.

[TheKidPadra]

Is there a way to change the font to GitHub's default too?

[ryan-johnson-databricks]

If the goal is to colorize text, rendering an image seems like not actually a solution. None of the above examples can be selected for copy/paste, for example.

[mu578]

Meanwhile, it doesn't parse within code blocks, there is no way to add custom and personal emphasis in code blocks... people writing those parsers never taught anyone; they are incapable of doing so. Indeed, they don't get it at first glance. They argue nonsense. But a very big plus for Latex support, I am happy that Latex is finally more widely used. Fifteen years ago, you were seen as a weirdo for doing so... finally, people understand the benefits of writing properly using centuries-old processes of sticking to conventions.

[conmsutton2016]

test $${\color{red}Red} \space {\color{lime}Green} \space {\color{blue}Blue}$$ test

[hdpklm]

Hi @F4NT0, thanks for the info, but is there a way to change the color of a word within the code block?

[flameshikari]

LaTeX is broken :(

[iAmKankan]

$$\Large{\color{red}Welcome} \space {\color{lightblue}To } \space {\color{lightgreen}Github}$$
$${\color{red}Welcome} \space {\color{lightblue}To } \space {\color{lightgreen}Github}$$ - the correct way to write \color{color-name}
each \color{color-name} should be under separate one open and one closed curly brackets.

If you like my solution/comment please follow me on github
https://github.com/iAmKankan

[magicse]

It's didn't work..... It show red and white text
$${\color{red}Welcome \space \color{lightblue}To \space \color{lightgreen}{github}}$$

[hks1]

any workaround to make it work for url's?

sort of works for (with some formatting issues)
$${\color{red}READ: \color{blue} htt://stackoverflow.com/questions/123/todays-topic-shell}$$

but not for
$${\color{red}READ: \color{blue} https://stackoverflow.com/questions/123/todays-topic-shell}$$

[lx78WyY0J5]

it wont, even with backslash it will rewrite this & href link as pure
$${\color{red}[abc](https://google.fr)}$$

And HTML + CSS wont render due to github sanitizing code (script & style seem removed when rendered in .md)

html & css text

---

code used :

$${\color{red}[abc\]\(https://google.fr)}$$

<h1 style="color: red">text</h1>

---

Using this wont work as it render it as code (so pure text will color language color scheme)

- This is a red colored line
+ This is a green colored line
@@ This is a purple colored line @@

Github wont allow changing link color, as it's a security issue (hidding link)
And to follow the W3C rules about this link feature

[JCKodel]

HTML is not markdown!

I was searching for markdown colour support because of a Flutter markdown viewer which doesn't support HTML. That package allows us to extend markdown syntax by creating our own, so I came up with this:

#rgb[Text using 3 chars notation (red = f00)]
#rrggbb[Text using 6 chars notation (red = ff0000)]
#aarrggbb[Text using 8 chars notation (red = ffff0000)]

Examples:

#0f0[This is green text]

#7fffff00[This is yellow text at 50% opacity]

RegExp for that pattern: #([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})\[([^\]]*)\]. Group 1 is color, Group 2 is the text.

[San3-Cod3]

More of the workarounds and colour ways we had have been restricted even more now and/or removed. So many decent workaround no longer function... It's criminal...

[code-PA-32]

looks like that we can use latex now)
${{\color{Goldenrod}\Huge{\textsf{ Hi\ there\ }}}}$

[code-PA-32]

${{\color{Goldenrod}\Huge{\textsf{ Hi\ there\ \}}}}\$

[iAmKankan]

1. All \text{} s take single and two space from keyboard, so inside it '\' not necessary,
2. For text size like '\large' or '\Huge' the scope is the end or until the next size command appears so in - '\Huge{......}' the size would be the same after the closing braces as well. All are for Github

I hope you already knew it. Please don't take it otherwise.

[Geo-7]

I think it's good to have an easier way to add color to text. I suggest adopting remark-directive.
Like streamlit
:color[text to be colored]
streamlit/streamlit#5774

[fares-ahmedd]

hey there!

[iAmKankan]

Marhaba Fares!

[st8tikratio]

The above solutions work in browsers. Neither iOS nor iPadOS Github apps show the text coloring only the expressions.

Any solutions that work regardless of which method/means is used to access repositories?

[EmanueleTinari]

On 27 April 2025 it's possible next code:

$\color{Green}{\textsf{Normal, colored text}}$
$\color{Green}{\textsf{Normal, colored text}}$

$\color{Blue}{\textbf{Normal, Bold and colored text}}$
$\color{Blue}{\textbf{Normal, Bold and colored text}}$

$\color{Purple}\large{\textsf{Large, colored text}}$
$\color{Purple}\large{\textsf{Large, colored text}}$

$\color{Yellow}\large{\textbf{Large, Bold and colored text}}$
$\color{Yellow}\large{\textbf{Large, Bold and colored text}}$

$\color{Red}\Huge{\textsf{Huge, colored text}}$
$\color{Red}\Huge{\textsf{Huge, colored text}}$

$\color{Orange}\Huge{\textbf{Huge, Bold and colored text}}$
$\color{Orange}\Huge{\textbf{Huge, Bold and colored text}}$

textsf for normal text
textbf for Bold text, as suggested here: https://tex.stackexchange.com/a/22661

In GitHub Android App colors aren't rendered, and only code is shown 😞

[marcellodesales]

Terminal Output

$\color{Green}{\textsf{$Success!}}$

---

Terminal output converted to colored HTML for GitHub

Raw Output (for reference)

Success! Bold text

[gustavostz]

It stopped working today. Is it a bug, or did they actually remove it?

[benoittoulme]

I wrote a community post to ask why it stopped working this https://github.com/orgs/community/discussions/161103
and a support ticket https://support.github.com/ticket/personal/0/3443708
no news yet.

[Kyros0718]

maybe its because its not mobile friendly. i dont use it much except for when i need to consider how my README.md appears for mobile users.

If you switch over to the mobile all you see is code and not the colored text you want display making the whole page completely illegible; i assume this would be an issue because that mean all repository are browser friendly and some or many arent mobile friendly just because of the use of colored latex.

Either they are getting rid of it completely as in appearance will be the same across platforms (mobile app and browser), or they are reworking a system to make colored text an actual thing. thought I doubt it since it would only change the appearance on the GitHub side and not the actual system side.

[Zezombye]

By using \small\texttt you can get very close to an actual monospace font (although sadly it is serif, and the unicode monospace characters render the same font):

${{\color{Goldenrod}\small{\texttt{ Some\ code\ }}}}$

Actual code block

${{\color{Goldenrod}\small{\texttt{ Some\ code\ \}}}}$

Unfortunately, it is missing the background and I can't see any way of adding one, as blockquotes don't add any background.

[benoittoulme]

This started to work again, and my support ticket was closed (without explanation but it's working, so I will take it.)

[plmrry]

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

[juanitogan]

Testing an impression of colored cell backgrounds:

Okay	Bad	Meh
${\color{white}█}$ 111 ${\color{white}█}$	${\color{red}█}$ 222 ${\color{red}█}$	${\color{medyellow}█}$ 333 ${\color{medyellow}█}$
${\color{white}█}$ 112 ${\color{white}█}$	${\color{red}█}$ 223 ${\color{red}█}$	${\color{medyellow}█}$ 334 ${\color{medyellow}█}$
${\color{white}█}$ 11112 ${\color{white}█}$	${\color{Red}█}$ 22223 ${\color{Red}█}$	${\color{Orange}█}$ 33334 ${\color{Orange}█}$
$\color{white}█$ 113 $\color{white}█$	$\color{red}█$ 224 $\color{red}█$	$\color{medyellow}█$ 335 $\color{medyellow}█$

Eh... messy. Too busy. Too much work.

Case matters with color names. Outer brackets not needed.

| Okay | Bad | Meh |
|:---:|:---:|:---:|
| ${\color{white}█}$ 111 ${\color{white}█}$ | ${\color{red}█}$ 222 ${\color{red}█}$ | ${\color{medyellow}█}$ 333 ${\color{medyellow}█}$ |
| ${\color{white}█}$ 112 ${\color{white}█}$ | ${\color{red}█}$ 223 ${\color{red}█}$ | ${\color{medyellow}█}$ 334 ${\color{medyellow}█}$ |
| ${\color{white}█}$ 11112 ${\color{white}█}$ | ${\color{Red}█}$ 22223 ${\color{Red}█}$ | ${\color{Orange}█}$ 33334 ${\color{Orange}█}$ |
| $\color{white}█$ 113 $\color{white}█$ | $\color{red}█$ 224 $\color{red}█$ | $\color{medyellow}█$ 335 $\color{medyellow}█$ |

[zzjunior]

Top, agora sei como melhor as cores do meu read.me :)

${\color{white}show}$