Custom Styling

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.

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

/* Reference Pages */
#api-explorer .markdown-body {}
#api-explorer .markdown-body > .pin {} /* target pinned sidebar content */

Note: The .markdown-body prefix is unique to the new engine, which is useful when refactoring custom styles. In the run up to the production release, this can be a useful “hook” for progressively enhancing your custom CSS. Just prefix your selectors with the .markdown-body class and appending the new ruleset to your custom CSS

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:

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

Styling Components

Callouts

Our callouts have been refactored to be based on the default block quote element and styling. It comes with various themes, which can be customized using the following selectors. More...

Tables

Tables have been simplified to mirror a more standard implementation, which should make them easier to style. More...