How to modify font color in Markdown

This article is part of the “Tapping Jade Project”, translated from https://stackoverflow.com/questions/35465557/how-to-apply-color-in-markdown

Problem Description

I want to use Markdown to record text information, but I searched Google and found that Markdown does not support changing the font color. And StackOverflow and GitHub’s Markdown editing mode does not support specifying text color.

Is there any way to specify text color in Markdown?

Best answer

Too long to watch the series:

Markdown itself does not support color scheme, but you can add HTML code in Markdown, for example:

 1
 < span style = "color:blue" > This is **blue** text </ span >

Here is the long answer:

According to the official grammar rules :

Markdown has only one use, as a grammatical format for writing web pages.
Markdown can’t replace HTML, or even do most of what HTML does. Its syntax is simple and covers only a small fraction of HTML tags. Markdown is not designed to make it easier for you to insert HTML tags. My point is that HTML tags are already convenient, and Markdown is meant to make it easier to read, write, and change. HTML is the format for publishing, and Markdown is the format for people to write. Therefore, Markdown’s syntax format is only used to deal with information that can be expressed in plain text.
For any functionality not implemented by Markdown, just insert the HTML code directly.

Since Markdown is not a format for publishing, changing the color of fonts is beyond the scope of Markdown’s handling. But you can still insert bare HTML code (because HTML is a publication-level format), such as the following Markdown text:

 1
 Markdown statement containing < span style = "color:blue" > *blue* text </ span > .

will be converted to the following HTML code:

 1
 < p > A Markdown statement containing < span style = "color:blue" > < em > blue </ em > text </ span > . </ p >

Currently, StackOverflow (and maybe GitHub too) will display the HTML code as-is (for security reasons), so you can’t implement text color in these places, but you can use it in any standard implementation of Markdown.

Another solution is to use Markuru ‘s non-standard property sheet directly. This standard was subsequently developed by others (and possibly other solutions with similar ideas, such as the div and span parameters in pandoc ). With this approach, you can configure a class for a piece of text or an inline element, and then use CSS to define color properties for that class. But obviously, you have to use editing tools that support these non-standard schemes, and the documentation written this way is not portable to other systems.

other answer 1

If you don’t want to embed HTML and just want to use plain Markdown statements, try adding emoji to emphasize specific statements. for example: ⚠ warn ⚠ , 🔴 important ❗🔴 or 🔥 new function 🔥 .

other answer 2

Although Markdown doesn’t support the text color property, you can redefine some formatting tags with CSS so that you can use them to change the text color. Of course, you can choose whether to keep the original attributes of these formatting tags.

E.g:

 1
2
3
4
5
6
7
8
 // reset label properties
s { text-decoration : none; } // strikethrough
em { font-style : normal; font-weight : bold; } // italic


// add color property
s { color : green }
em { color : blue }

See how to make em tag tags bold instead of italic .

Then, in Markdown text like this:

 1
2
 ~~This is green~~
_It's blue_

other answer 3

In another way, you can use Unicode characters in various colors to meet related needs, such as 🔴 , U+1F534 (big red circle).

For example, in my hardware projects on GitHub, I use the following characters to indicate the color of the wires:

 1
2
3
4
5
6
7
8
 🔴 Red: +5V
🟠 Orange: +3.3V
⚫ Black: GND
⚪ White: GND (pulled low)
🟣 Purple: I2C signal line
🟢 Green: clock signal
🟡 Yellow: WS2812 signal
🔵 Blue: Resistive bridge (analog) input

This may help you, you can copy and paste the above characters directly into your document, or directly search the Internet for example “Unicode purple square” or something. Of course, they are also called emoji.

This article is reproduced from: https://blog.vvzero.com/2022/05/06/How-to-apply-color-in-Markdown/
This site is for inclusion only, and the copyright belongs to the original author.

Leave a Comment

Your email address will not be published.