How to Color, Center and Align Text in Markdown
By the MDConverter team · Updated · 2 min read
Quick answer
Markdown has no syntax for text color or alignment — it only describes structure. Where HTML is allowed you can use <span style="color:…"> and <p align="center">, but GitHub strips style attributes, so on GitHub color is only possible through LaTeX math ($\color{red}{\text{red}}$) and centering through the align attribute. Chat apps such as Discord offer workarounds like ANSI-colored code blocks.
Color with HTML (renderers that allow inline styles)
VS Code's preview, MkDocs, Hugo, Jekyll, Docusaurus, Obsidian and many static sites keep inline styles:
This is <span style="color:#dc2626">red text</span> and this is <span style="color:#2563eb">blue text</span>.This is red text and this is blue text.
Color on GitHub
GitHub removes style attributes and the old <font color> tag, so neither of the above works in READMEs. The options that do:
- LaTeX math:
$\color{red}{\text{Important}}$renders red text inside GitHub's math support. It is rendered as math (slightly different font) and should be used sparingly. - Color previews in issues and PRs: a color code in backticks —
#2563eb,rgb(37, 99, 235)orhsl(…)— shows a small color swatch next to it (issues, pull requests and discussions only). - Emoji and alerts: 🔴 🟢 or GitHub's
> [!WARNING]alerts communicate status without color text. - Images: a badge or SVG image for colored labels.
Centering text
On GitHub and in most renderers, wrap the content in an HTML block with align="center". Leave blank lines inside the block if you want Markdown processed within it.
<p align="center">
<b>Centered bold text</b><br>
A second centered line
</p>
Centered bold text
A second centered line
<div style="text-align:center"> is the modern equivalent. Use align="right" to right-align.Centering in tables is different: use colons in the separator row (| :---: |) to center a column. MarkdownTables.com explains all the table alignment options.
App-specific options
- Obsidian: HTML spans with style work in reading view; CSS snippets and highlight (
==text==) are the usual approach. See text formatting. - Discord: no color syntax, but a code block with the
ansilanguage accepts ANSI color codes — DiscordFonts.net has a Discord colored text generator that writes them for you. - Notion: colors are set in the editor (
/red,/bluecommands); Notion's Markdown export drops them. - Reddit, Slack: no colored text.
Color and alignment when converting
If you need colored or centered text in a finished document, convert the Markdown first and style it in the destination: Markdown to Word gives you real Word headings and paragraphs you can recolor with styles, and Markdown to PDF offers themes. Markdown to HTML keeps inline <span style> HTML as written.
Color and alignment by app
| App | Supported | Notes |
|---|---|---|
| GitHub | Partly | No style; LaTeX \color{} for color, align attribute for centering. |
| GitLab | Partly | Similar to GitHub; color chips for color codes in backticks. |
| VS Code, MkDocs, Hugo, Jekyll | Yes | Inline HTML with style is kept. |
| Obsidian | Yes | Inline HTML styles and CSS snippets. |
| Discord | Partly | ANSI colors inside ```ansi code blocks only. |
| Slack, Reddit | No | No colored or centered text. |
Common mistakes and how to fix them
| Problem | Fix |
|---|---|
| Colored span shows on my site but not on GitHub | GitHub strips style. Use LaTeX color or an image. |
Markdown inside a centered <div> is not formatted | Leave a blank line after the opening tag and before the closing tag. |
<center> does nothing | <center> is obsolete and removed by many sanitizers; use align="center" or CSS. |
Tools for this
Frequently Asked Questions About Text color & alignment
Comprehensive answers to common technical, formatting, security, and compatibility questions.
Related reading
- Markdown Text Formatting: Bold, Italic, Strikethrough and More — Bold, italic, strikethrough, underline, highlight, superscript and subscript — with app support.
- Markdown vs HTML: What Is the Difference? — How Markdown relates to HTML, what each can do, and when to mix them.
- Markdown Images: Insert, Resize, Center and Caption — Insert images, set their size, center them, add captions and fix images that do not show.