Syntax Highlighting

If a website uses highlight.js, Pygments, Prism.js, or Chroma for syntax highlighting, follow the steps for the syntax higlighter in use below. First though, you’ll need to add the following line near the top of the #catppuccin mixin, under #lib.palette();/#lib.defaults();, to include the necessary CSS variables:

#lib.css-variables();

highlight.js

After including the CSS variables with the mixin specified above, add the following line at the top of the userstyle, beneath the @-moz-document line.

@import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css");

Pygments

After including the CSS variables with the mixin specified above, add the following line at the top of the userstyle, beneath the @-moz-document line.

@import url("https://python.catppuccin.com/pygments/catppuccin-variables.important.css");

Prism.js

After including the CSS variables with the mixin specified above, add the following line at the top of the userstyle, beneath the @-moz-document line.

@import url("https://prismjs.catppuccin.com/variables.css");

Chroma

After including the CSS variables with the mixin specified above, add the following lines at the top of the userstyle, beneath the @-moz-document line.

@import (css)
  url("https://chroma.catppuccin.com/@{lightFlavor}-chroma-style.css")
  (prefers-color-scheme: light);
@import (css)
  url("https://chroma.catppuccin.com/@{darkFlavor}-chroma-style.css")
  (prefers-color-scheme: dark);