Markdown Hacks: Tricks Beyond the Spec
Markdown deliberately leaves out underline, centering, text color, and image sizing — but most renderers pass inline HTML through, and a handful of well-known tags fill the gaps. These hacks work in GitHub READMEs and most documentation pipelines; the catch is knowing which platforms strip HTML and what is genuinely impossible.
Platform Support
The foundation of every hack on this page is the same: original Markdown was designed as a thin layer over HTML, so anything Markdown cannot express, you write as HTML directly in the file. Underline is the classic example — Markdown has no underline syntax because underlined text reads as a link on the web, but <u>text</u> or the more semantic <ins>text</ins> (marking inserted content) render underlined on GitHub and anywhere else HTML passes through. The same logic gives you <kbd>Ctrl</kbd>+<kbd>C</kbd> for keyboard shortcuts, which GitHub styles as actual key caps — easily the highest polish-per-character hack for documentation — and <sub>/<sup> for subscripts and superscripts like H<sub>2</sub>O or x<sup>2</sup>.
Layout hacks lean on older, attribute-based HTML because GitHub strips style attributes and CSS. Centering uses the legacy align attribute: <div align="center"> wrapped around text, images, or badges centers them in a README (the modern CSS equivalent gets sanitized away, but align survives). Image sizing works the same way — Markdown's  offers no dimensions, so swap it for an <img> tag with width or height attributes, e.g. <img src="logo.png" width="200">. Combine the two and you get the centered, neatly sized logo header that tops most popular open-source READMEs. For indentation, Markdown collapses leading spaces, but the entity is a non-breaking space the renderer must respect — a few of them fake a first-line indent or nudge inline content apart.
Two hacks need no HTML at all. Collapsible sections come from <details><summary>Click to expand</summary>…</details> — okay, that one is HTML — but the content inside still renders as Markdown on GitHub as long as you leave a blank line after the <summary> tag, which makes it perfect for tucking away long logs, FAQs, or optional install instructions (add the open attribute to start expanded). And clickable video embeds: GitHub will not embed an iframe, but YouTube exposes every video's thumbnail at a predictable URL, so a linked image — [](https://www.youtube.com/watch?v=VIDEO_ID) — produces a thumbnail that looks like an embedded player and opens the video when clicked.
Now the honest limits. Text color is not possible in pure Markdown, and not in GitHub-flavored HTML either: GitHub strips style attributes, <font> tags, and CSS, so there is no way to make a word red in a README. The workarounds are all images — shields.io badges for colored labels, ```diff code blocks where lines starting with + render green and - render red, or LaTeX color commands in math blocks — each a hack on top of a hack, acceptable for a badge row but not for prose. Multi-column layouts have a similar caveat: people simulate columns with borderless tables or aligned <img> tags, but tables are semantically tables — screen readers announce them as data, and the layout collapses awkwardly on narrow screens — so treat column hacks as decoration for profile READMEs, not document structure. Finally, remember every hack here rides on HTML pass-through: Discord, Slack, and most chat apps show the raw tags, and strict CommonMark pipelines with HTML disabled strip them entirely. Preview on the target platform before you commit.
Examples
<!-- This comment will not appear in the rendered output -->Hide notes in your source using HTML comments. The text is invisible in the rendered output.
You can <u>underline with u</u> or <ins>underline with ins</ins>.You can underline with u or underline with ins.
Markdown has no underline syntax. <ins> is the semantic choice (inserted text); both render on GitHub.
<div align="center">
This content is **centered** — and still parsed as Markdown.
</div>This content is centered — and still parsed as Markdown.
The legacy align attribute survives GitHub's sanitizer where style="text-align:center" does not. Leave blank lines inside the div so Markdown keeps rendering.
<img src="https://placehold.co/600x300.png" alt="Project logo" width="200">
Markdown image syntax has no size control — switch to an <img> tag with width/height attributes.
Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> to open the command palette.Press Ctrl + Shift + P to open the command palette.
GitHub styles <kbd> as raised key caps.
<details>
<summary>Click to expand the full log</summary>
Anything here is hidden until clicked — and *still renders as Markdown* if you leave a blank line after the summary.
</details>Click to expand the full log
Anything here is hidden until clicked — and still renders as Markdown if you leave a blank line after the summary.
Add <details open> to start expanded. Renders on GitHub, GitLab, and most doc sites.
[](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
GitHub blocks iframes, but a linked image of the video's auto-generated thumbnail looks like an embed and opens the video on click. Renders on GitHub.
This line starts with a fake indent — Markdown would collapse regular spaces.This line starts with a fake indent — Markdown would collapse regular spaces.
True text color is impossible on GitHub — style attributes and <font> are stripped. Shields.io badges or diff code blocks are the standard workarounds.
```diff
+ this line renders green
- this line renders red
```+ this line renders green
- this line renders redThe closest thing to colored prose that works in pure fenced-code Markdown on GitHub.
Common Mistakes
<div align="center">**bold**</div> (no blank lines)<div align="center">
**bold**
</div>Without blank lines between the HTML tags and the content, GitHub treats everything inside the block as raw HTML and stops parsing the Markdown — the asterisks render literally.
<span style="color: red">red text</span>A shields.io badge or a ```diff code blockGitHub strips style attributes, <font> tags, and CSS, so inline color never renders. The only colored "text" on GitHub comes from images (badges) or diff syntax highlighting.
<img src="logo.png" width="200" height="100" alt="logo">The =WIDTHxHEIGHT suffix is a non-standard extension a few editors support — GitHub and CommonMark ignore it. Use an <img> tag for sizing.
Platform Notes
GitHub
Renders a generous HTML whitelist — u, ins, kbd, sub, sup, details/summary, img with width/height, and the align attribute all work — but strips style attributes, CSS, <font>, scripts, and iframes. This page's hacks are written to that whitelist.
GitLab
Similar HTML whitelist to GitHub: details/summary, kbd, and img sizing all render. GitLab additionally supports native video embedding for uploaded files, reducing the need for the thumbnail trick.
Obsidian
Renders inline HTML in reading view, so underline, kbd, and details sections work. Obsidian also allows real CSS through snippets and the style attribute, so color is actually possible there — unlike GitHub.
Discord
No HTML at all — every tag on this page appears as literal text in messages. Discord has its own formatting (__underline__ with double underscores, spoiler bars with ||text||) that covers some of the same ground.
Frequently Asked Questions
How do I underline text in Markdown?
Markdown has no underline syntax — wrap the text in HTML instead: <u>text</u> or the semantic <ins>text</ins>. Both render on GitHub, GitLab, and Obsidian; chat apps like Discord show the tags literally (Discord uses __text__ instead).
How do I center text or an image in a GitHub README?
Wrap it in <div align="center"> … </div>. The legacy align attribute survives GitHub's HTML sanitizer, while modern style="text-align:center" gets stripped. Leave blank lines around the content so Markdown inside the div keeps rendering.
Can I change text color in Markdown?
No — not in pure Markdown, and not on GitHub either, which strips style attributes, <font> tags, and CSS. The workarounds are images: shields.io badges for colored labels, or ```diff code blocks where +/- lines render green and red.
How do I resize an image in Markdown?
Standard  syntax has no size control. Replace it with an HTML img tag: <img src="logo.png" width="200">. The width and height attributes work on GitHub; the =200x100 suffix some editors support does not.
How do I embed a YouTube video in a README?
You cannot embed a real player — GitHub strips iframes. The standard hack is a linked thumbnail: [](https://www.youtube.com/watch?v=VIDEO_ID), which shows the video's auto-generated thumbnail and opens YouTube on click.