Markdown Text Color

Method 1: The HTML <span> Tag

Markdown passes raw HTML through, so a <span> with a style attribute colors any run of text. The color can be a CSS name (red, tomato), a hex value (#2563eb), or a function (rgb(220, 38, 38), hsl(0, 80%, 50%)).

<span style="color: red">This text is red.</span>

<span style="color: #2563eb">This text is blue (#2563eb).</span>

<span style="color: #10b981">Green</span>, <span style="color: #f59e0b">orange</span>, and <span style="color: #8b5cf6">purple</span> in one line.

<span style="background-color: #fef3c7; color: #92400e">Highlighted text</span> uses background-color.

In MDX, the style has to be an object

Docusaurus and Next.js parse MDX, where every HTML-looking tag is JSX. JSX expects style as an object with camelCased properties, so the string form above fails. Docusaurus documents the same conversion.

<span style={{ color: "red" }}>Red text in MDX</span>

Method 2: LaTeX Color on GitHub

GitHub renders math in README files, issues, pull requests, discussions, and wikis, and math has its own color command. Wrap the text in $...$ and use \color{name}{\text{your text}}. The \text{} keeps the spaces and an upright font; without it, math mode drops spaces and italicizes every letter.

$\color{red}{\text{Red text on GitHub}}$

$\color{#16a34a}{\text{Exact hex color}}$

$\color{blue}{a^2 + b^2 = c^2}$

Method 3: Highlight With <mark>

If what you want is emphasis rather than a specific color, <mark> is the GitHub-safe option. It is on GitHub's HTML allowlist and renders with a yellow background in both themes, in the normal body font. The ==highlight== syntax some editors support is not GFM, and GitHub prints the equals signs.

Run the build <mark>before</mark> you tag the release.

In issues, pull requests, and discussions, GitHub also shows a color swatch next to a hex, RGB, or HSL value written in backticks, such as `#0969DA`. That previews a color value; it does not color your text.

Method 4: GitHub Alerts (Colored Callouts)

For a colored box rather than colored words, GitHub renders five blockquote types as alerts, each with its own color and icon. Put > [!TYPE] on the first line and the message on the following quoted lines. The full syntax is on the quotes and callouts guide.

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

Alerts cannot be nested inside other elements. Inside a list item or a <details> block, GitHub renders a plain blockquote with the [!WARNING] marker left visible.

Discord: ansi Code Blocks

Discord has no color syntax for normal text. What it has is the ansi code block, which renders terminal escape sequences: ESC[1;31m for bold red, ESC[0m to reset. ESC is the invisible character U+001B, so typing the letters \u001b does nothing. The block below shows the readable notation; its copy button gives you the real characters.

```ansi
\u001b[1;31mBold red text\u001b[0m
\u001b[0;32mGreen text\u001b[0m
```

The Discord color text generator builds these blocks with a live preview and copies the escape characters for you. Discord changed the ansi palette in August 2026, and colors now vary by theme. Desktop and browser render them; the phone apps often show a plain monospace block, so don't rely on color alone. The full code table is in the Discord formatting guide.

The older trick: syntax highlighting

Before ansi, people picked a code block language whose highlighter happened to color a whole line. It is cruder, one color per line, but it needs no invisible characters.

Notion, Obsidian, Pandoc, and Streamlit

A few tools added their own color syntax or UI. Where one exists, use it instead of HTML.

More on each: Notion Markdown, Obsidian Markdown.

The Obsolete <font> Tag

<font color> was removed from HTML years ago, though browsers still render it. It is not a way around a sanitizer: GitHub, GitLab, and PyPI drop the tag entirely, and Notion does not render it. Anywhere it does work, <span style> works too, so there is no reason to use it in new content.

<font color="red">This text uses the obsolete font tag.</font>

Common Mistakes

None of these produce an error. The text just comes out in the default color.

<span style="color: red">Important</span>

$\color{red}{\text{Important}}$

${\color{red}red text}$

$\color{red}{\text{red text}}$

<span style="color: red">text</span>

<span style={{ color: "red" }}>text</span>

[red](red) text

<span style="color: red">text</span>

Platform Support

Color support comes down to two questions: does the renderer keep the style attribute, and does it render LaTeX math.

Quick Reference

Frequently Asked Questions