[markdown] How to apply color in Markdown?

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

Is there any flavor of markdown that allows colored text?

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>

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.

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_

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)

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.

Run the following in zeppelin paragraph

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

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

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.

This should be shorter:

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

I've had success with

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

Caveat : the class must already exist on the site.

This works in the note-taking Joplin:

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

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?