How to apply color on text in Markdown

Question

I want to use Markdown to store textual information. But quick googling says Markdown does not support color. Also Stack Overflow does not support color. Same as in case of GitHub markdown.

Is there any flavor of markdown that allows colored text?

Answer 1

TL;DR

Markdown doesn't support color but you can inline HTML inside Markdown, e.g.:

<span style="color:blue">some *blue* text</span>.

Longer answer

As the original/official syntax rules state (emphasis added):

Markdown’s syntax is intended for one purpose: to be used as a format for writing for the web.

Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself.

As it is not a "publishing format," providing a way to color your text is out-of-scope for Markdown. That said, it is not impossible as you can include raw HTML (and HTML is a publishing format). For example, the following Markdown text (as suggested by @scoa in a comment):

Some Markdown text with <span style="color:blue">some *blue* text</span>.

Would result in the following HTML:

<p>Some Markdown text with <span style="color:blue">some <em>blue</em> text</span>.</p>

Now, StackOverflow (and probably GitHub) will strip the raw HTML out (as a security measure) so you lose the color here, but it should work on any standard Markdown implementation.

Another possibility is to use the non-standard Attribute Lists originally introduced by the Markuru implementation of Markdown and later adopted by a few others (there may be more, or slightly different implementations of the same idea, like div and span attributes in pandoc). In that case, you could assign a class to a paragraph or inline element, and then use CSS to define a color for a class. However, you absolutely must be using one of the few implementations which actually support the non-standard feature and your documents are no longer portable to other systems.

Answer 2

When you want to use pure Markdown (without nested HTML), you can use Emojis to draw attention to some fragment of the file, i.e. ⚠️WARNING⚠️, IMPORTANT❗ or NEW.

Answer 3

I have started using Markdown to post some of my documents to an internal web site for in-house users. It is an easy way to have a document shared but not able to be edited by the viewer.

So, this marking of text in color is “Great”. I have use several like this and works wonderful.

<span style="color:blue">some *This is Blue italic.* text</span>

Turns into This is Blue italic.

And

<span style="color:red">some **This is Red Bold.** text</span>

Turns into This is Red Bold.

I love the flexibility and ease of use.

Answer 4

I like the idea of redefining existing tags if they're unused due to the fact that the text is cleaner, at the expense of existing tags. The inline styling works but creates a lot of noise when reading the raw text.

Using VSCode I've found that custom single-letter tags, supported by a small <style> section at the top, works well with a minimum of noise, especially for spot colour, e.g.

<style>
r { color: Red }
o { color: Orange }
g { color: Green }
</style>

# TODOs:

- <r>TODO:</r> Important thing to do
- <o>TODO:</o> Less important thing to do
- <g>DONE:</g> Breath deeply and improve karma

My use-case is orgmode-ish in-app note taking during development but I guess it might work elsewhere?

Answer 5

While Markdown doesn't support color, if you don't need too many, you could always sacrifice some of the supported styles and redefine the related tag using CSS to make it color, and also remove the formatting, or not.

Example:

// resets
s { text-decoration:none; } //strike-through
em { font-style: normal; font-weight: bold; } //italic emphasis


// colors
s { color: green }
em { color: blue }

See also: How to restyle em tag to be bold instead of italic

Then in your markdown text

~~This is green~~
_this is blue_

Answer 6

This should be shorter:

<font color='red'>test blue color font</font>

Answer 7

As an alternative, whatever purpose colour serves in your text may be achieved with coloured Unicode characters, such as , U+1F534 'large red circle'.

For example, I use characters like this when I document wire colours, when hardware accompanies my software projects on GitHub.

 red: +5V
 orange: +3.3V
⚫ black: ground
⚪ white: ground (pull-down)
 purple: I2C signal
 green: clock signal
 yellow: WS2812 signal
 blue: resistor bridge (analogue) input

Maybe this would be useful for your documentation, too. You can copy and paste this example into your text, or websearch for strings like 'unicode purple square'. They're also considered emoji.

Answer 8

you can probably use the latex style:

$\color{color-code}{your-text-here}$

To keep the whitespace between words, you also need to include the tilde ~.

Answer 9

Short story: links. Make use of something like:

a[href='red'] {
    color: red;
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

<a href="red">Look, ma! Red!</a>

(HTML above for demonstration purposes)

And in your md source:

[Look, ma! Red!](red)

Answer 10

Now since May 2022, Github has LATEX to use on Markdown, you can use LATEX code to use some kind of color on your repos, like this examples:

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}$$

• The view on Github:

• If you want to know more, Github Blog explain the new support, and my Gist if you want :)

Answer 11

Thanks for all answers in this thread.

I with agree that, the end purpose is to emphasize and distinguish texts. So here is the integration of answers that I learnt from this thread, with personal preferences (check them out by pasting in MD editor):

style	markdown
⚫ ⚪	same
✅ true and ❌false	same
underline	<u>underline</u>
~~stroke~~	~~stroke~~
italic	*italic*
==highlight==	==highlight==
bold	**bold **
red color	`red color`
blue color	<a >blue color</a>
other color	<font color=#0fb503>other color</font>

Answer 12

In Jekyll I was able to add some color or other styles to a bold element (should work with all other elements as well).

I started the "styling" with {: and end it }. There is no space allowed between element and curly bracket!

**My Bold Text, in red color.**{: style="color: red; opacity: 0.80;" }

Will be translated to html:

<strong style="color: red; opacity: 0.80;">My Bold Text, in red color.</strong>

Answer 13

Seems that kramdown supports colors in some form.

Kramdown allows inline html:

This is <span style="color: red">written in red</span>.

Also it has another syntax for including css classes inline:

This is *red*{: style="color: red"}.

This page further explains how GitLab utilizes more compact way to apply css classes in Kramdown:

Applying blue class to text:

This is a paragraph that for some reason we want blue.
{: .blue}

Applying blue class to headings:

#### A blue heading
{: .blue}

Applying two classes:

A blue and bold paragraph.
{: .blue .bold}

Applying ids:

#### A blue heading
{: .blue #blue-h}

This produces:

<h4 class="blue" id="blue-h">A blue heading</h4>

There is a lot of other stuff explained at above link. You may need to check.

Also, as other answer said, Kramdown is also the default markdown renderer behind Jekyll. So if you are authoring anything on github pages, above functionality might be available out of the box.

Answer 14

This works in the note-taking Joplin:

<span style="color:red">text in red</span>

Answer 15

Run the following in zeppelin paragraph

%md ### <span style="color:red">text</span>

Answer 16

I've had success with

<span class="someclass"></span>

Caveat : the class must already exist on the site.

Answer 17

Put in the RMarkdown header this command

header-includes: \usepackage{xcolor}

and then use this command to color your text

\textcolor{green}{Text is green!}

Answer 18

Pain in the butt.

Markdown to PDF via pandoc worked for me only when using:

---
header-includes: 
                 \usepackage{xcolor}
                 \definecolor{alizarin}{rgb}{0.82, 0.1, 0.26}
---

\color{alizarin}The overarching aim \color{black} of this project is

"The overarching aim" in red - the rest in black. Font stays the same and no trouble with spaces.

Exporting to odt or docx - no luck.

Answer 19

Add a Hading in Jupyter Notebook with any given color.

Will appear like heading in the notebook, if you don't use ## in the beginning will appear like a normal text in the given color

Answer 20

Please use the below syntax to get the BOLD & Font Color as Red

__`A`__