Markdown Text Color: How to Add Color and Highlights

Markdown text color is not part of the standard syntax. CommonMark and GitHub Flavored Markdown have no built-in way to change font color or highlight text. To add colored text in markdown, you need HTML workarounds, diff code blocks, or platform-specific extensions. This guide covers every method available across GitHub, Obsidian, and other markdown environments.

Why Is Markdown Text Color Not Built In?

Markdown was designed as a lightweight writing format focused on structure, not visual styling. John Gruber's original 2004 specification intentionally excluded color, fonts, and other presentation details. The philosophy is that markdown documents should look consistent regardless of the renderer.

This means color support depends entirely on your platform's willingness to allow inline HTML or its own extensions. Some platforms strip HTML for security, making colored text impossible in pure markdown on those systems.

How to Add Color Text in Markdown with HTML

The most widely supported method uses the HTML <span> tag with a style attribute:

<span style="color: red;">This text is red.</span>
<span style="color: #3b82f6;">This text is blue (#3b82f6).</span>
<span style="color: rgb(34, 197, 94);">This text is green.</span>

This works in any markdown renderer that allows inline HTML with style attributes. That includes Jekyll, Hugo (once you set unsafe = true in its Goldmark renderer config), our editor, and many CMS platforms.

Where this does NOT work:

• GitHub strips all style attributes from rendered markdown for security. Colored text via inline styles is impossible on GitHub README files, issues, and comments.
• Slack does not support HTML in messages.
• Reddit does not render HTML at all.

Colored Text on GitHub: The Diff Trick

Since GitHub strips inline styles (see our GitHub markdown cheat sheet for what it does allow), developers use a creative workaround with diff code blocks. The diff language identifier highlights lines starting with + in green and lines starting with - in red:

```diff
+ This line appears in green (added)
- This line appears in red (removed)
! This line appears in orange (some renderers)
# This line appears in gray (comment)
```

This is not true "color" support. It is syntax highlighting designed for showing code changes. But it is the only way to get colored text on GitHub without images.

Limitations of the diff trick: the text renders inside a code block (monospace font), you cannot mix colors within a paragraph, and only green, red, and gray are available.

Colored Text in Obsidian

Obsidian supports inline HTML with style attributes, so the <span> method works:

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

Obsidian also supports custom CSS snippets. Create a .css file in your vault's .obsidian/snippets/ folder to define reusable color classes:

.red { color: #ef4444; }
.blue { color: #3b82f6; }
.green { color: #22c55e; }
.highlight { background-color: #fef08a; padding: 2px 4px; }

Then use them in your markdown:

<span class="red">Red text</span>
<span class="highlight">Highlighted text</span>

Enable the snippet in Obsidian Settings > Appearance > CSS Snippets. This approach keeps your markdown cleaner than inline styles.

How to Highlight Text in Markdown

Text highlighting (colored background) has a few options:

Obsidian Native Highlight

Obsidian supports highlight syntax with double equals signs:

This is ==highlighted text== in Obsidian.

This renders with a yellow background by default. The syntax is Obsidian-specific and does not work on GitHub or standard CommonMark.

HTML Mark Tag

The <mark> HTML tag creates highlighted text on platforms that allow inline HTML:

This is <mark>highlighted text</mark> in markdown.

The <mark> tag renders with a yellow background in most browsers. It works in Hugo, Jekyll, our editor, and some other renderers. GitHub does support the <mark> tag, making it one of the few visual formatting options available there.

Custom Background Colors

For specific background colors, combine <span> with background-color:

<span style="background-color: #fef08a; padding: 2px 4px;">Yellow highlight</span>
<span style="background-color: #bbf7d0; padding: 2px 4px;">Green highlight</span>
<span style="background-color: #bfdbfe; padding: 2px 4px;">Blue highlight</span>

Remember: this only works where inline styles are permitted (not GitHub).

Color in LaTeX Math Mode

If your platform supports KaTeX or MathJax, you can use color inside math expressions:

$\textcolor{red}{This\ text\ is\ red}$
$\colorbox{yellow}{Highlighted\ math}$

This works on GitHub (inside math blocks), Obsidian, Jupyter notebooks, and our editor. It is a workaround for adding colored text on GitHub, though the text renders in the math font.

Platform Comparison for Color Support

Common Mistakes with Markdown Color

Mistake 1: Assuming GitHub supports inline styles.

GitHub strips style attributes from all HTML tags. There is no way to use <span style="color:red"> on GitHub. Use the diff trick, <mark>, or LaTeX math mode instead.

Mistake 2: Using deprecated HTML color attributes.

<font color="red">Old HTML syntax</font>

The <font> tag is deprecated in HTML5. Some renderers still support it, but GitHub's sanitizer removes it and other markdown parsers may too. Use <span style="color:..."> for platforms that support styles.

Mistake 3: Overusing colored text.

Colored text loses impact when overused. Reserve color for warnings, important terms, or status indicators. A page full of colored text is harder to read, not easier.

Try Color in Our Editor

Our editor supports inline HTML with styles. Test colored text and highlights below:

+ Added line (green)
- Removed line (red)

Frequently Asked Questions

Summary

Markdown text color is not built in, but practical workarounds exist for every major platform. Use <span style="color:..."> on platforms allowing inline HTML, the <mark> tag for portable highlighting, diff code blocks for GitHub-compatible red/green, and LaTeX \textcolor for math contexts. Obsidian users get native ==highlight== syntax and CSS snippet support. Test your colored markdown in our online editor or see the full markdown cheat sheet for all formatting options.

Written by the Markdown Editor Online team. Last updated April 2026.