Usage

Import

You can start using x-markdown-css with:

A CDN service

• UNPKG: https://unpkg.com/x-markdown-css@latest
• jsDelivr: https://fastly.jsdelivr.net/npm/x-markdown-css@latest
• CDNJS: Please visit cdnjs.com/libraries/x-markdown-css to get the latest version.

A CSS (with Node.js) / Sass / SCSS project

First, install it with NPM (PNPM or Yarn also works):

npm i x-markdown-css@latest

Then, add it to your .css / .sass / .scss file.

For example, in CSS / SCSS you do:

@import 'x-markdown-css';

ps. Note that no path or file extention is required since the style and sass field in package.json is filled.
Just simply use 'x-markdown-css' to import it.

Use Styles

Add class="markdown-body" to an element.

Customize

To customize x-markdown-css, you must have a basic understanding of CSS variables.
If you don't know what that is, please check out this MDN documentation.

First, take a look at the bundle.css.
You'll see that after the @charset "UTF-8"; statement, there are three selectors specifying CSS variables.

Now, let me explain what they do. By the way, all variables begin with --xm, I'll ignore it in the following.

:root

The :root selector specifies variables that do not change regardless of light or dark mode.

• font-sans: Specifies a collection of sans serif fonts. If you use this variable in your project, you can choose to edit it. Otherwise, it would be wiser to edit the font-display variable to change the font for the content.
• font-serif: Specifies a collection of serif fonts. This variable is not used by x-markdown-css by default, you can use it in your project.
• font-mono: Specifies a collection of monospace fonts. Like font-sans, we recommend you to edit the font-code variable directly to change the font for code blocks.
• font-display: Specifies the set of fonts the content should use, by default, it points to font-sans.
• font-code: Specifies the set of fonts code blocks should use. By default, it points to font-mono.

.markdown-body

Specifies the color pallete.
For the places where the variables are used, please check the source code.

.dark .markdown-body

Same as above, but specifies the colors in dark mode.