RETIRED
Remarkability has been retired and no longer maintained. You can continue to use the latest version or switch to wysiwyg.css or github-markdown-css for similar functionality. Please feel free to fork this repo for further development.
— A compact CSS library for a pleasant reading experience on the web
Remarkability provides beautiful and accessible styles for the content generated by the rich-text editors in a CMS or from a markdown file. It comes with sensible defaults that can be customized using Sass.
Add to your project with NPM or Yarn.
npm install @microflash/remarkability
yarn add @microflash/remarkabilityThis is the recommended way if you want to customize Remarkability using Sass.
Add one of the following <link> elements in the <head> of your HTML document.
<link rel="stylesheet" href="https://unpkg.com/@microflash/remarkability">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@microflash/remarkability">By default, these CDNs will serve the latest published version. Refer to the unpkg / jsDelivr docs for other possible ways to get Remarkability.
You can also download the latest version or browse the previous releases on GitHub.
Just add .remarkability class to your container to style the elements within.
<article class="remarkability">
<!-- HTML content -->
</article>By default, Remarkability inherits colors and typography from the parent element but you can customize this behavior with Sass.
With v1.0.0, Remarkability deprecated the global variant. If needed, you can still build it by setting
$rootvariable tobodyusing Sass.
With v1.1.0, Remarkability provides you the flexibility to import what you need; you may choose to import the entire remarkability.scss file or pick the specific parts. The following parts are available for you to import individually.
@use 'node_modules/@microflash/remarkability/scss/variables';
@use 'node_modules/@microflash/remarkability/scss/root';
@use 'node_modules/@microflash/remarkability/scss/all';
@use 'node_modules/@microflash/remarkability/scss/inline';
@use 'node_modules/@microflash/remarkability/scss/media';
@use 'node_modules/@microflash/remarkability/scss/block';
@use 'node_modules/@microflash/remarkability/scss/headings';
@use 'node_modules/@microflash/remarkability/scss/lists';
@use 'node_modules/@microflash/remarkability/scss/form';
@use 'node_modules/@microflash/remarkability/scss/blockquote';
@use 'node_modules/@microflash/remarkability/scss/code';
@use 'node_modules/@microflash/remarkability/scss/table';For more details and examples, check out the docs.
- Execute
yarn startto bring up the documentation site which contains an example page. - Use
yarn distto generate a CSS build. - Use
yarn docsto generate the static version of the documentation.
Licensed under MIT.
Remarkability is built with the generous contributions from the open-source community. It would not have been possible without wysiwyg.css by Jeremy Thomas, github-markdown-css by Sindre Sorhus and the invaluable references on MDN. The typeface used in the logo is Maragsâ Display by John David Maza. The icons are from Octicons, a part of GitHub's Primer design system.