Custom Styling

Styling best-practices and CSS selector references.

By and large, the new markdown processor outputs standard HTML. This means most basic CSS element selectors will continue to work seamlessly. Depending on how complex your Markdown and custom CSS are, you should only have to update a few styles here and there!

🐷

Need CSS Help?

We're always happy to help troubleshoot tricky styling issues! Shoot us an email, and we'll try to make ourselves useful.

Scoping Your Styles

When writing custom styles for the new processor, you should explicitly target content generated by the new Markdown engine using the .markdown-body class prefix. You can also style Markdown for a specific template by adding additional prefixes.

Markdown Selector Scope

/* Guides Pages */
.rm-Guides .markdown-body {}

/* Reference Pages */
.rm-ReferenceMain .markdown-body {}

Legacy Docs Guidance (Q2 2021)

---

As of Q2 2021, we've rolled out several major improvements to our docs! While the CSS variables (see the next section below) and the HTML output of the Markdown engine itself have remained the same, the overall documentation markup has changed, so our guidance on scoped selectors has been updated. The current guidance with the latest designs is shown above and you can see the legacy scoped class names below. Check out our migration guide for guidance on migrating your Custom CSS.

Markdown Selector Scope (Legacy)

/* Guides Pages */
#content-body .markdown-body {}

/* Reference Pages */
#api-explorer .markdown-body {}
#api-explorer .markdown-body > .pin {} /* target pinned sidebar content (deprecated in new reference docs) */

---

CSS Variables Theming

The new Markdown engine uses CSS variables to enable simple theming for all modern browsers (i.e. IE11+.) Certain custom components offer their own theme variables. The markdown engine also offers some high-level theming variables:

CSS

.markdown-body {
  --markdown-radius: 3px;
  --markdown-font: Papyrus, serif;
  --markdown-text: #333;
  --markdown-title: hotpink;
  --markdown-line-height: 2;
}