Tutorial · 8 min read

Markdown Text Color, Font Size, and Centering: HTML Workarounds

Markdown has no native color, size, or alignment syntax; this guide shows the HTML/CSS workarounds, where they work, and where renderers strip them.

Orion Wells

Written by

Founder of StarSeekAI

Markdown Text Color, Font Size, and Centering: HTML Workarounds

Markdown has no native syntax for text color, font size, or alignment. The workaround family is HTML: if your renderer passes HTML through, a span with CSS or an align attribute styles the text; if the renderer sanitizes HTML, the same markup renders as plain text. This guide shows each workaround, a support matrix across common renderers, and exactly where the tricks fail.

a8a4e1a9 d44f 4f82 a4f5 92a98745ce9f
A hand colors one phrase in red on an otherwise plain printed Markdown draft, while an untouched copy sits beside it

The short answer: it depends on the renderer

Markdown itself defines emphasis, headings, lists, and links. It defines nothing about color, size, or position. The R Markdown Cookbook states this plainly: "The Markdown syntax has no built-in method for changing text colors" (source). So every solution below is raw HTML (or, in one flavor-specific case, LaTeX) that your renderer either accepts or removes.

What decides the outcome is not the file. It is the pipeline between the file and the screen: a renderer plus, on many platforms, an HTML sanitizer. The same line can look styled in one app and plain in another. The Markdown Guide's own hacks page warns that these tricks "aren't guaranteed to work in your Markdown application" (source).

Here is the combined support matrix the observed search results never show in one place:

Style goalNative Markdown?WorkaroundWhere it usually worksWhere it is stripped
Text colorNo<span style="color: ...">Jekyll and most static site generators, desktop editors with HTML rendering, R Markdown HTML outputGitHub READMEs and wiki pages, sanitizing docs platforms
Text color (legacy)No<font color="red">Processors that still accept deprecated HTMLSame sanitizers; deprecated in HTML
Font sizeHeadings only<span style="font-size: 0.8em;">Same pass-through renderersSame sanitizers
CenteringNo (except table alignment)<div align="center">, <center> (deprecated), CSS text-alignPass-through renderers; the align attribute is a plain attribute, so it often survives README sanitizers where style does notstyle="text-align: ..." in README sanitizers

Test on the destination before you commit styling. That single habit prevents most of the disappointment people report in forums.

Changing text color with span and CSS

The modern form wraps the text in a span and sets the color with CSS:

<span style="color: #b00020;">critical path</span>

Where raw HTML with style attributes survives, this renders a red phrase inside an ordinary paragraph. The R Markdown Cookbook uses exactly this pattern for HTML output (source), and static site generators built on CommonMark pass it through by default.

The older form is the font tag, which the Markdown Guide documents as the classic workaround (source):

<font color="red">This text is red</font>

The font tag is deprecated in HTML. It still renders in some processors, which is why it keeps appearing in tutorials, but a span with CSS is the safer default where CSS is allowed.

On GitHub, neither form colors README text. GitHub's sanitizer removes styling from inline HTML; a maintainer in the GitHub community discussion confirms that colored span markup renders on GitHub Pages but "on the README.md doesn't show the colors" (source). GitHub's flavor has one unrelated escape hatch: LaTeX color commands inside math blocks, such as $${\color{red}Red}$$, render in GitHub's math support. Treat that as a flavor-specific trick, not a Markdown feature, because it depends on GitHub's KaTeX-style math pipeline rather than the file itself.

Changing font size

Markdown's only native sizing tool is headings. Six levels (# through ######) cover document structure, and for most jobs that is the right answer:

## Normal size section

When you need an inline size, such as fine print or a slightly larger lead-in, use the same pass-through span pattern:

<span style="font-size: 0.8em;">fine print</span>

Relative units like em adapt to the surrounding theme better than pixel values. The legacy <font size="+1"> form works in the same processors that accept <font color>, with the same deprecation caveat.

Before reaching for HTML, consider whether emphasis already does the job. Bold, italic, and strikethrough are native and portable everywhere; see Markdown Bold, Italic, and Strikethrough: Inline Emphasis Syntax. Emphasis changes meaning; size changes appearance. If the reader needs to notice the text rather than weigh it, emphasis is the more portable choice.

Centering text and images with align attributes

Markdown has no concept of text alignment. Table alignment (|:---:|) is the one exception. For centering a line or an image, the workarounds are HTML again:

<div align="center">Centered line</div>
<p align="center"><img src="diagram.png" alt="Diagram of the release flow"></p>

The deprecated <center> tag is the version most tutorials teach, and it still renders where HTML is supported (source):

<center>This text is centered</center>

If your renderer allows CSS, the non-deprecated form is:

<p style="text-align: center;">Center this text</p>

The pattern that matters in practice: align is a plain attribute, while text-align lives inside a style attribute. Sanitizers that strip style often keep plain attributes on block elements. That is why centered banners and images built with <div align="center"> are common on README platforms that reject colored text outright. Verify on your own target, since sanitizer rules change.

Where the workarounds break

Know the failure modes before you ship styled text:

  • Sanitized renderers. GitHub and many docs platforms remove style attributes and font tags. The result is usually the plain text, not an error: <span style="color: red;">warning</span> renders as the word "warning" in default styling on a GitHub README (source).
  • Multiple output formats. The R Markdown Cookbook notes that raw HTML in a document rendered to both HTML and PDF is lost in the LaTeX/PDF output (source). If one source file feeds several formats, the HTML trick only survives in the HTML one.
  • Strict or limited processors. Some editors and export pipelines accept no inline HTML at all, so the tags show as literal text. There is no fallback short of changing the tool.
  • Email clients. Mail pipelines run aggressive sanitizers for security. Styling that renders in your editor will not survive being mailed as raw Markdown content.

One defensive habit covers most cases: keep the styled phrase readable on its own, so stripping the tags leaves valid prose. Style is decoration; never let it carry meaning that disappears with the tag.

Styling text in Fylune

Fylune is a local-first document workspace for Markdown and MDX: the files in your project folder are ordinary Markdown, the folder is the source of truth, and core editing works offline without an account. Because the file you save is the file other tools open, no sanitizer rewrites your work between saves. The choices you make about HTML workarounds are therefore portability decisions: what you save renders as-is locally, and the same file keeps working in Git, other editors, and static site builds. Fylune also renders rich Markdown in the document experience, including tables, task lists, Mermaid diagrams, and KaTeX formulas, so structural styling often has a native path before you reach for HTML.

If you are evaluating a Markdown workspace for files that move between people and AI agents, you can download Fylune and test the workarounds above on real files.

FAQ

How do I change the color of text in Markdown?

Use <span style="color: #b00020;">text</span> in a renderer that passes HTML with style attributes through, such as Jekyll, most static site generators, and desktop editors with HTML rendering. The legacy <font color="red"> form still works in some processors. GitHub READMEs strip both forms.

Does Markdown support coloring?

No. Markdown has no color syntax. Color comes from HTML that the renderer either allows or sanitizes away, which is why the same file can look different in different tools.

Is there a way to highlight text in Markdown?

Yes, two ways. Some flavors support the extended ==highlighted== syntax, and renderers that pass HTML accept the <mark>highlighted</mark> tag. Both are covered in Markdown Underline and Highlight: Workarounds for Missing Syntax. For hiding text entirely rather than highlighting it, see How to Comment in Markdown: Hidden Notes That Never Render.

Sources