ReMarkdown — demo pages, npm package — is a stylesheet that renders HTML elements as if they were plain Markdown text.

Project history

ReMarkdown was created in 2011 as a CSS experiment, to see if generated content (::before and ::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.

Using ReMarkdown

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>

And the 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 class="remarkdown" or 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.