ReMarkdown — demo pages, npm package — is a stylesheet that renders HTML elements as if they were plain Markdown text.
ReMarkdown was created in 2011 as a CSS experiment, to see if generated content (
::after pseudo-elements) could be used to create a complete text style. The goal was to write a kind of Markdown-in-reverse, styling standard HTML as if it were plain text with Markdown-like markers.
A v2 in 2014 reworked most of the styles and made the library modular using Sass, allowing custom builds with stylistic variants turned on or off.
Finally, this 2017 update improves the modularity further, and provides 2 default builds so that ReMarkdown styles can be applied with either classes or attributes.
ReMarkdown now comes in two flavours: class-based or attribute-based. The default flavour uses classes:
<link rel="stylesheet" href="https://unpkg.com/remarkdown.css/dist/remarkdown.css"> <div class="remarkdown"> <h1>Default styles</h1> </div> <div class="remarkdown h1-underline hr-center"> <h1>With options</h1> </div>
attr flavour uses the
data-remarkdown attribute instead:
<link rel="stylesheet" href="https://unpkg.com/remarkdown.css/dist/remarkdown.attr.css"> <div data-remarkdown> <h1>Default styles</h1> </div> <div data-remarkdown="h1-underline hr-center"> <h1>With options</h1> </div>
Both come with a dozen styles enabled by default (which means you only need
data-remarkdown on a container element to apply those styles). You can see a full list of styles on this page.
There are also two
ReMarkdown-zero builds which have no default styles enabled, letting you pick all the styles you want explicitly:
<link rel="stylesheet" href="https://unpkg.com/remarkdown.css/dist/remarkdown-zero.attr.css"> <div data-remarkdown> <h1>Very basic styles, no Markdown markers</h1> </div> <div data-remarkdown=" hn-reset hn-hash h1-underline hr-star hr-center ul-plus ol-decimal code-tick pre-tick "> <h1>With explicit options</h1> </div>
If these choices are too limited for your needs, you can also create a custom build of ReMarkdown using Sass. See the “Customizing ReMarkdown” page for instructions.