Markdown Text Color: How to Color Text (With Workarounds)

Why Markdown Has No Color Syntax

Markdown has no built-in syntax for colored text. There is no **bold**-style shortcut for red, green, or any other color. Every workaround borrows from something else: inline HTML, code block highlighting, LaTeX math, or images.

This is by design. Markdown is a plain-text format meant to stay readable as-is, and color is a presentation concern. How a document looks is decided by whatever renders it — GitHub, Obsidian, VS Code, or a viewer app — each with its own theme and its own rules about which HTML it allows. That is why the same file can show red text in one place and plain text in another.

Below are five methods, from most flexible to most limited. The platform support table shows where each one works.

Method 1: HTML Span with Style

Most Markdown processors pass inline HTML through untouched, so you can wrap text in a <span> with a CSS color value. This is the most flexible method: any named color, hex, or RGB value works.

<span style="color:red">Red text</span>
<span style="color:blue">Blue text</span>
<span style="color:green">Green text</span>
<span style="color:orange">Orange text</span>

Hex and RGB values work too, and you can mix color with other formatting:

Status: <span style="color:#d63384">**Action required**</span>

Method 2: Diff Code Blocks

A fenced code block with the diff language tag colors lines that start with + green and lines that start with - red. This works on GitHub, GitLab, and most renderers with syntax highlighting.

+ This line is green- This line is red  This line is uncolored

```diff
+ This line is green
- This line is red
  This line is uncolored
```

The limits are real: only red and green, only inside a code block, and the leading + or - is visible. It is a good fit for “do this / don’t do this” comparisons and changelogs, and a poor fit for coloring a single word in a sentence.

Method 3: LaTeX Color

Where Markdown supports math, you can use LaTeX color commands inside a math expression. Both \color and \textcolor work:

$\color{red}{\text{Red text}}$
$\textcolor{blue}{\text{Blue text}}$

Wrap the words in \text{} so they render as normal text instead of italic math variables. This works in Jupyter notebooks and in documentation tools that load MathJax or KaTeX. GitHub also renders $...$ math, which makes this one of the few ways to get inline color there, though support for individual commands can vary. It is not widely supported outside math-enabled renderers, and the text looks like math rather than body copy. The preview above only approximates the rendering.

Method 4: Badge Images

Services like shields.io generate small colored labels from a URL. Because they are images, they work anywhere images load, including GitHub READMEs.

![status](https://img.shields.io/badge/status-passing-brightgreen)
![build](https://img.shields.io/badge/build-failed-red)
![version](https://img.shields.io/badge/version-2.1.0-blue)

The URL format is badge/LABEL-MESSAGE-COLOR. Use a color name (red, brightgreen, blue, orange) or a hex code without the #. Badges suit short labels and statuses; they are not a way to color a sentence. They need an internet connection to load and are not selectable text, so screen readers rely on the alt text.

Method 5: HTML Mark Tag

The <mark> tag highlights text with a yellow background. It is not text color, but it is the closest thing to a highlighter in Markdown:

This is <mark>highlighted text</mark> in a sentence.

Some platforms support it and some strip it, and you cannot choose the color without adding a style attribute (which brings back the limits of Method 1). Obsidian also has its own ==highlight== syntax, which is not portable to other tools.

Platform Support

Which method works where. Platform sanitizers change over time, so test on your target platform before relying on any of these.

The pattern: platforms that accept user content from strangers (GitHub, GitLab, Slack) sanitize inline styles for security. Local tools and notebooks that render your own files tend to allow them. Open your file in the target renderer to confirm.

Common Mistakes

Using the deprecated font tag

Old tutorials suggest <font color="red">text</font>. The <font> element is deprecated in HTML5, and many renderers strip it. Use <span style="color:red"> instead.

<!-- Deprecated: avoid -->
<font color="red">Red text</font>

<!-- Preferred -->
<span style="color:red">Red text</span>

Expecting GitHub to render inline styles

Inline style attributes look right in your editor preview and then disappear once pushed to GitHub. If the file will live in a GitHub README, plan on diff blocks, LaTeX, or badges from the start.

Trying to use a made-up Markdown syntax

Syntax like {red}text{/red} or [text]{.red} only works in specific tools (some Pandoc and static site setups). In standard Markdown it shows up as literal characters.

Relying on color alone

Red and green are the hardest pair for people with color blindness to tell apart, and color disappears entirely in plain-text views. Pair it with a word, a symbol, or bold: Error: rather than only red text.

FAQ

Can I change text color in Markdown?

Not with Markdown syntax itself. The usual workaround is an inline HTML span, <span style="color:red">text</span>, which works in Obsidian, VS Code preview, Jupyter, and many static site generators. It does not work on GitHub, where inline styles are stripped.

How do I make red or green text in GitHub Markdown?

Use a diff code block. Start a fenced block with ```diff, then begin a line with + for green or - for red. It is limited to those two colors and to code blocks, but it is the most reliable option on GitHub. LaTeX color commands inside $...$ math and shields.io badge images are the other two options.

Does GitHub support colored text in Markdown?

Not directly. GitHub strips style attributes and the <font> tag, so HTML color tricks do not render. Diff blocks, LaTeX color in math, and badge images do work.

Preview Your Markdown with MDViewer

MDViewer is a native macOS app for reading and previewing Markdown files. Double-click any .md file in Finder and see it rendered instantly — tables, code blocks, math, Mermaid diagrams, and more. Lite is free; Pro adds editing, Git history, and PDF export.

Requires macOS 13.0 or later. Intel and Apple Silicon.