highlightjs
highlightjs copied to clipboard
Published
20 hours ago •
catppuccin
catppuccin
🚨 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/[email protected]/css/catppuccin-mocha.css">
<link rel="stylesheet" href="//unpkg.com/@catppuccin/[email protected]/css/catppuccin-macchiato.css">
<link rel="stylesheet" href="//unpkg.com/@catppuccin/[email protected]/css/catppuccin-frappe.css">
<link rel="stylesheet" href="//unpkg.com/@catppuccin/[email protected]/css/catppuccin-latte.css">
<!-- variable version -->
<link rel="stylesheet" href="//unpkg.com/@catppuccin/[email protected]/css/catppuccin.variables.css">
jsdelivr:
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/[email protected]/css/catppuccin-mocha.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/[email protected]/css/catppuccin-macchiato.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/[email protected]/css/catppuccin-frappe.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/[email protected]/css/catppuccin-latte.css">
<!-- variable version -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/[email protected]/css/catppuccin.variables.css">
💝 Thanks to
Copyright © 2021-present Catppuccin Org
catppuccin