catppuccin / highlightjs

🚨 Soothing pastel theme for Highlight.js

Catppuccin for Highlight.js

Usage

Add the CSS for your preferred flavor in your markup. You can do this by either getting the files via NPM or a CDN.

NPM:

Installation:

npm install -D @catppuccin/highlightjs

You can then use the files in @catppuccin/highlightjs/css or @catppuccin/highlightjs/sass.

CDN:

Embed the Highlight.js script, then one of our themes.

Note

The "variable version" assumes that you have a flavor of Catppuccin already present in your CSS variables, e.g. :root { --ctp-mauve:136,57,239; }. This is particularly useful if you use Catppuccin TailwindCSS

unpkg:

<link rel="stylesheet" href="//unpkg.com/@catppuccin/highlightjs@0.1.4/css/catppuccin-mocha.css">
<link rel="stylesheet" href="//unpkg.com/@catppuccin/highlightjs@0.1.4/css/catppuccin-macchiato.css">
<link rel="stylesheet" href="//unpkg.com/@catppuccin/highlightjs@0.1.4/css/catppuccin-frappe.css">
<link rel="stylesheet" href="//unpkg.com/@catppuccin/highlightjs@0.1.4/css/catppuccin-latte.css">
<!-- variable version -->
<link rel="stylesheet" href="//unpkg.com/@catppuccin/highlightjs@0.1.4/css/catppuccin.variables.css">

jsdelivr:

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/highlightjs@0.1.4/css/catppuccin-mocha.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/highlightjs@0.1.4/css/catppuccin-macchiato.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/highlightjs@0.1.4/css/catppuccin-frappe.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/highlightjs@0.1.4/css/catppuccin-latte.css">
<!-- variable version -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/highlightjs@0.1.4/css/catppuccin.variables.css">

💝 Thanks to

• Andreas Grafen
• winston

 

Copyright © 2021-present Catppuccin Org