Skip to content

Latest commit

 

History

History
70 lines (56 loc) · 2.16 KB

syntax-highlighting.md

File metadata and controls

70 lines (56 loc) · 2.16 KB

If a website uses highlight.js, Pygments, or Prism.js for syntax highlighting, follow the steps for the syntax higlighter in use below. First though, you'll need to add the following lines beneath the color definition section (@<color>: @catppuccin[@@lookup][@<color>];) in the #catppuccin mixin:

--ctp-rosewater: @rosewater;
--ctp-flamingo: @flamingo;
--ctp-pink: @pink;
--ctp-mauve: @mauve;
--ctp-red: @red;
--ctp-maroon: @maroon;
--ctp-peach: @peach;
--ctp-yellow: @yellow;
--ctp-green: @green;
--ctp-teal: @teal;
--ctp-sky: @sky;
--ctp-sapphire: @sapphire;
--ctp-blue: @blue;
--ctp-lavender: @lavender;
--ctp-text: @text;
--ctp-subtext1: @subtext1;
--ctp-subtext0: @subtext0;
--ctp-overlay2: @overlay2;
--ctp-overlay1: @overlay1;
--ctp-overlay0: @overlay0;
--ctp-surface2: @surface2;
--ctp-surface1: @surface1;
--ctp-surface0: @surface0;
--ctp-base: @base;
--ctp-mantle: @mantle;
--ctp-crust: @crust;

highlight.js

Add the following line at the top of the userstyle, beneath the @-moz-document line.

@import url("https://unpkg.com/@catppuccin/[email protected]/css/catppuccin-variables.important.css");

Pygments

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

Add the following line at the top of the userstyle, beneath the @-moz-document line.

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

Chroma

Add the following lines to 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);

Important

The above snippet only works properly for userstyles that use browser/system media queries to apply the #catppuccin mixin. If a userstyle targets a specific attribute/element on the website to apply the mixin, this will not work all of the time.