Markdown is ubiquitous in software development for documentation, readmes, code commenting, and technical writing. Its lightweight syntax and plain text format make Markdown easy to write and readable in source form. One of the many formatting options Markdown supports is strikethrough text. This guide dives deep on Markdown strikethrough from a full-stack developer perspective. We‘ll cover what it is, why the syntax works so well, how to use it effectively in documentation, and more!
What is Markdown Strikethrough?
Strikethrough is a horizontal line straight through the center of words, effectively striking them out while still leaving them legible. Here is strikethrough in action:
The quick brown fox jumps over the lazy dog.
To strikethrough text in Markdown, simply surround words with two tilde ~~ symbols like:
~~The quick brown fox jumps over the lazy dog.~~The browser ignores the tildes and only renders the strike line crossing out the text visually.
The tilde ~ was chosen because when used in pairs it vaguely resembles strike through lines. It‘s an ingenious hack allowing semantic styling hooks in plaintext. Much of Markdown‘s syntax approaches visual formatting cues this way using non-alphabetic symbols.
You can strikethrough individual words, sentences, paragraphs, or multiple blocks of content by wrapping them in tildes. Any Markdown parser compliant with the official spec will recognize this consistent syntax.
Why Use Strikethrough in Developer Docs
As a developer, I lean on Markdown constantly across:
- README installation guides
- API documentation
- Code comments
- Release notes
- Bug tracking
- Technical tutorials
- Code collaboration
And strikethrough comes in handy across many of these use cases:
-
Showing Edits in Real Time – When co-authoring Markdown docs, strikethrough cleanly shows text removed from a document during the editing process rather than just deleting outright. Seeing incremental diff-like changes helps provide context and transparency for multi-author workflows.
-
Marking Up Fixed Bugs – Release notes often link to bug tickets fixed in a given software version. Using strikethrough to denote now-fixed bugs or issues visually distinguishes resolved items from newly completed features.
-
Indicating Outdated Info – Documentation invariably becomes stale over time. Rather than simply remove outdated content that still provides context, using strikethrough provides a visible cue indicating information is no longer current.
-
Showing Pre-Refactor Code – When annotating code examples that have been refactored across versions, using strikethrough on old logic that has changed keeps context readable.
These are just a few examples. Strikethrough offers versatile advanced formatting, perfect for technical writing.
Strikethrough vs Other Markdown Formatting
While strikethrough may seem like other formatting options at first glance, it is distinct:
-
Bold – Bold emphasizes importance words and phrases but does not denote outdated/removed content like strikethrough does.
-
Italics – Italics add stress to text similar to bold but do not visually cross anything out.
-
Links/Images – Links allow jumping to URLs and images embed visual assets. Neither strikethrough content.
-
Comments – Code comments provide non-rendered annotations. Strikethrough shows rendered visual formatting.
So while bold, italic, links, etc have their own semantics and uses, only strikethrough communicates text that is implicitly updated or changed via visible cross-out. This makes all the difference for technical writing.
Stats also show just how widely adopted strikethrough Markdown is:
| Markdown Flavor/Tool | Has Strikethrough Support |
|---|---|
| Basic Markdown | Yes |
| CommonMark | Yes |
| GitHub Flavored Markdown (GFM) | Yes |
| Markdown Here | No |
| Markdown Extra | Yes |
| MultiMarkdown | Yes |
| Pandoc | Yes |
| Reddit Markdown | No |
So static site generators like Jekyll, Hugo, Hexo etc will recognize strikethrough syntax. Lightweight parsers sometimes omit it, but most full implementations include it.
Multi-Paragraph Strikethroughs
Entire paragraphs can be struck out by wrapping the full text in tildes:
~~This is the first paragraph needing strikethrough. Even multi-sentence content can easily be struck out as one contiguous block.~~
~~Here we have a second paragraph also wrapped in tildes to render all text within crossed out.~~ Which visually renders as:
This is the first paragraph needing strikethrough. Even multi-sentence content can easily be struck out as one contiguous block.
Here we have a second paragraph also wrapped in tildes to render all text within crossed out.
This works well when deprecating entire instruction blocks or multi-line snippets now outdated.
Nesting Strikethrough With Other Formatting
Markdown allows formats to be nested and combined for additional effects:
~~This **entire sentence** mixes bold and strikethrough formats together by nesting.~~
*~~We can also nest italics inside strikethrough spans.~~*
~~`var oldCode = "old value";`~~Renders as:
This entire sentence mixes bold and strikethrough formats together by nesting.
We can also nest italics inside strikethrough spans.
var oldCode = "old value";
So strikethrough can markup code blocks, combine with emphasis formatting, and more. The order of nest matters with the outermost formatting encapsulating inner mixed formatting.
This is particularly useful when showing incremental changes to code over time. We can visually show both deprecated logic and new additions:
~~var oldValue = "deprecated";~~
+ var newValue = "upgraded";Mixing strikethrough and other semantic formats creates readable changesets perfect for code evolution.
Strikethrough vs HTML Semantic Tags
Since Markdown gets compiled to HTML for web rendering, developers versed in HTML may wonder how strikethrough compares semantically to native HTML tags.
In HTML strikethrough can be achieved two ways:
-
The
<s>tag which stands for "strikethrough":
<s>Deprecated text</s> -
The
<del>tag signifying deleted text:
<del>Outdated instructions</del>
Markdown‘s ~~strike~~ syntax actually compiles to the <s> strikethrough tag in HTML.
The benefit of Markdown is not having to directly use verbose HTML tags in source documents. By supporting strikethrough formatting natively with easy to type tilde characters, Markdown increases authoring readability while still rendering proper HTML semantics under the hood.
For web developers Markdown can serve as a shorthand abstraction layer on top of HTML without losing meaning.
Styling Strikes With CSS
While the tilde syntax provides the actual strikethrough effect, as developers CSS gives us fine-grained control over rendered appearance.
We can target <s> tags and manipulate strikethrough with custom properties:
/* Make all strikethrough navy blue */
s {
color: navy;
}
/* Increase strikethrough thickness */
s {
text-decoration-thickness: 4px;
}
/* Rotate strikethrough diagonally */
s {
text-decoration-line: line-through;
transform: rotate(-30deg);
}So while Markdown handles the semantics, CSS provides the rich presentational rendering options for自定义customize the aesthetic. Together they form powerful abstractions over manual HTML tagging.
Strikethrough Accessibility Concerns
As with any web document formatting, developers must consider accessibility. While aesthetically appealing, we cannot let strikethrough negatively impact users needing assistive technologies.
By default, visible rendered strikethrough text is accessible to screen readers. The cross-out visual conveys removal while still allowing underlying struck text to be read aloud as needed.
However for fully visually impaired users, actually reading text with strikethrough lines could be confusing as they cannot see surrounding context.
Therefore consider adding additional visible caveats around heavy strikethrough usage such as:
Note: The following text shows previous recommendations that have been replaced with more accurate information below it.
Semantic HTML can also help reinforce accessibility:
<p>The following text has been <del>updated</del> with more context:</p>With consideration for disabled users, strikethrough can be used without creating unnecessary burden.
Enabling Strikethrough Across Markdown Tools
Most static site generators and Markdown libraries support strikethrough out of the box as it is standardized Markdown syntax. But some lightweight parsers require explicitly enabling it:
| Tool / Platform | How to Enable Strikethrough |
|---|---|
| Hugo | Works by default |
| Markdown Here | Not supported |
| MediaWiki | Add ~~~ toParsoid settings |
| Not supported | |
| Slack | Surround text with ~ rather than ~~ |
| Wordpress | Install Markdown support plugin |
So consult your tooling documentation to ensure you have the required strikethrough packages installed for your workflow.
The Bottom Line
Strikethrough is one of Markdown‘s most versatile text formatting options. With two tilde characters developers can semantically denote outdated, inaccurate, or temporary content visually in plaintext. This saves manually tagging verbose HTML while retaining web rendering capabilities. Strikethrough use cases span editing, documentation, commenting, readmes, and more across software development ecosystems. Modern Markdown parsers even allow nesting strikethrough with other mixed formatting like bold, italics and code for rich cumulative effects. So reach for the strikethrough syntax and strike it through!