How to change text color in Markdown
Try it - edit the markdown and watch the preview
Visual
Markdown has no syntax for color. Every method is HTML, and the question is not “which HTML” but “which HTML survives the renderer you are writing for”.
The tag that usually survives
<font color="#0B7A53">green text</font>
<font> was deprecated in HTML 4 and browsers still render it. It also passes
most sanitizers, including GitHub’s and the one on this page, because it has no
attribute a script can hide in.
The one that usually does not
<span style="color: red">red text</span>
This is the correct modern HTML and it is the one that gets stripped. GitHub
removes style attributes, and so does the preview on this page: a style
attribute can carry url() and expression() payloads, so sanitizers drop it
wholesale. The <span> survives; the color does not.
If you control the rendering (your own site, an HTML export with your own
stylesheet) style works fine. If you are writing for someone else’s
renderer, assume it will not.
What GitHub actually supports
Three routes, all narrow:
A diff code block colors lines by their first character:
```diff
+ this line is green
- this line is red
```
Alert blockquotes render as colored callouts:
> [!NOTE]
> Blue.
> [!WARNING]
> Amber.
NOTE, TIP, IMPORTANT, WARNING and CAUTION each have a color and an
icon. This is a GitHub extension: elsewhere it renders as an ordinary
blockquote with a bracketed word at the top.
LaTeX maths supports \textcolor{red}{text} inside $$ blocks, if the
renderer does maths at all.
Highlighting
<mark>highlighted</mark>
Works here and on GitHub. ==text== is shorter and also works here, in
Obsidian and in Quarto, but it is not standard, so on GitHub and in most other
renderers it comes out as literal equals signs. Use <mark> when the document
has to travel.
Size
Headings are Markdown’s answer, and they are usually the right one: # through
###### are six sizes that also carry structure, which a <font size> does
not. For text that is smaller inside a paragraph, <sub> and <sup> render at
roughly 80%.
Anything more precise means CSS, which means owning the rendering: export to standalone HTML and attach a stylesheet.
Common questions
- Can I change text color in Markdown?
- Not with Markdown syntax: there is no marker for it in any flavour. You need HTML, and whether that HTML survives depends entirely on the renderer. Many strip exactly the attribute you would use.
- Why does my span with a style attribute do nothing?
- Because the renderer removed it. GitHub strips `style` attributes, and so does the preview on this page. A style attribute is a place code can hide, so sanitizers drop it: the tag survives and the color does not.
- What does work on GitHub?
- Three things. A `diff` code block colors lines red and green by prefix. Alert blockquotes (`> [!NOTE]`, `> [!WARNING]`) render as colored callouts. And LaTeX maths supports `\textcolor`. Outside those, README text is one color.
- How do I highlight text?
- `<mark>text</mark>` works here and on GitHub. `==highlighted==` also works here, in Obsidian and in Quarto, but it is not standard: it renders as literal equals signs on GitHub and in most other renderers, so use `<mark>` for anything that has to travel.
- Can I change font size?
- Headings are the intended way - `#` through `######` are six sizes with meaning attached. `<sub>` and `<sup>` make text smaller. Anything finer needs CSS, which means exporting to HTML with your own stylesheet rather than relying on a renderer.
Sources
- CommonMark spec: raw HTML
- GFM spec: disallowed raw HTMLwhy style attributes disappear on GitHub