MDUtil

Colored Text in Markdown

Markdown cannot color text by itself. This guide shows what works instead: HTML styles in editors that keep them, and the workarounds people use on GitHub and in Discord, where styles are removed.

Quick answer

How do you change the text color in Markdown?

Markdown has no color syntax. In editors that keep HTML styles, such as VS Code, Typora and Obsidian, write <span style="color: red">text</span>. GitHub removes styles; there, a LaTeX formula such as $\color{red}{\text{text}}$ shows colored text, and diff code blocks color whole lines.

Markdown
$\color{#d1242f}{\text{Red text}}$ and $\color{#1a7f37}{\text{green text}}$

Result

Red text\color{#d1242f}{\text{Red text}} and green text\color{#1a7f37}{\text{green text}}

Ways to color text

Each method works in some apps and not others; the notes say where.

HTML with a style

The direct way where styles are kept. GitHub, GitLab and many sites remove the style attribute and show plain text.

Markdown
This word is <span style="color: #d1242f">red</span>.

VS Code, Typora and Obsidian only. Other Markdown apps display this differently, so there is no preview.

LaTeX color in math

\color and \textcolor color what follows inside a formula. Wrap words in \text{} so they keep their spacing.

Markdown
$\textcolor{#d1242f}{\text{Failed}}$ · $\textcolor{#1a7f37}{\text{Passed}}$

Result

Failed\textcolor{#d1242f}{\text{Failed}} · Passed\textcolor{#1a7f37}{\text{Passed}}

Red and green lines with diff

In a diff code block, lines starting with + are shown in green and lines starting with - in red.

Markdown
```diff
+ Added in version 2
- Removed in version 2
```

Result

+ Added in version 2
- Removed in version 2

Colored emoji as markers

Emoji carry color everywhere, including chat apps and plain text.

Markdown
🔴 Failing · 🟡 Pending · 🟢 Passing

Result

🔴 Failing · 🟡 Pending · 🟢 Passing

Colored boxes with GitHub alerts

GitHub shows quotes that start with [!NOTE], [!TIP], [!WARNING] and similar types as colored boxes.

Markdown
> [!WARNING]
> This box is yellow on GitHub.

GitHub only. Other Markdown apps display this differently, so there is no preview.

Discord: ANSI color codes

In an ansi code block, Discord's desktop app colors text that follows an escape code such as [31m for red; the phone apps show it plain. Each code begins with an invisible escape character, which the copy button keeps.

Markdown
```ansi
Red text and green text
```

Discord only. Other Markdown apps display this differently, so there is no preview.

Colored text in popular apps

Whether color works depends on how much HTML and math the app allows.

AppSupportNotes
GitHubDiffersNo style or <font>; LaTeX color in math and diff blocks work.
VS Code / TyporaSupported<span style="color: …"> works in the preview.
ObsidianSupported<span style="color: …"> works in reading view.
NotionDiffersNo typed syntax; color text from the formatting menu.
DiscordDiffersColors only inside ansi and diff code blocks; ansi colors show on desktop.
SlackNot supportedMessages have no colored text.

Questions and answers

Can you change the text color in Markdown?

Not with Markdown itself. Where HTML styles are allowed, use <span style="color: red">text</span>. Where they are removed, as on GitHub, use LaTeX color, diff blocks or emoji.

How do I color text on GitHub?

GitHub removes style attributes and the <font> tag. Inside math, $\color{red}{\text{text}}$ shows colored text, and a diff code block colors whole lines green and red.

Does <font color="red"> still work?

It is obsolete HTML. Some editors still show it, but GitHub and many other sites remove it.

How do I color text in Discord?

Use a code block marked ansi with color codes, which the desktop app shows in color, or a diff block for green and red lines. Ordinary messages have no colors.

How do I highlight text instead of coloring it?

Use the <mark> tag; see highlighting text.

Do colors survive a PDF or Word export?

LaTeX colors inside formulas print in Markdown to PDF. HTML style attributes are removed by this site's tools, as on GitHub.