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

[lx78WyY0J5]

Html + css should still work, but its longer to create, for the same result.

Hope they will add a new text color feature

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

[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

[dobbelina]

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:

[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!