catppuccin / highlightjs Goto Github PK

View Code? Open in Web Editor NEW

55.0 3.0 2.0 370 KB

🚨 Soothing pastel theme for Highlight.js

Home Page: https://catppuccin.github.io/highlightjs/

License: MIT License

SCSS 90.72% Nix 3.40% JavaScript 5.88%

catppuccin highlightjs pastel syntax-highlighting hacktoberfest theme

highlightjs's Introduction

Catppuccin for Highlight.js

Previews

🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

Usage

Add the CSS for your preferred flavor in your markup. You can do this by either getting the files from npm, or through a CDN.

npm

Install the @catppuccin/highlightjs package with your preferred package manager.

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 along with 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-latte.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-macchiato.css">
<link rel="stylesheet" href="//unpkg.com/@catppuccin/[email protected]/css/catppuccin-mocha.css">
<!-- variable version -->
<link rel="stylesheet" href="//unpkg.com/@catppuccin/[email protected]/css/catppuccin.variables.css">
<link rel="stylesheet" href="//unpkg.com/@catppuccin/[email protected]/css/catppuccin.variables.important.css">

jsDelivr

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/[email protected]/css/catppuccin-latte.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-macchiato.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/[email protected]/css/catppuccin-mocha.css">

<!-- variable version -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/[email protected]/css/catppuccin.variables.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@catppuccin/[email protected]/css/catppuccin.variables.important.css">

💝 Thanks to

highlightjs's People

Contributors

Stargazers

Watchers

Forkers

mrshmllow uncenter

highlightjs's Issues

unpkg and jsdelivr links from README are down

v0.1.3 was published without output css/ directory

As title says...

unpkg and jsdelivr links from README.md are down

Title. Verified with 3 different subnets.

jsdelivr fix

jsdelivr links could be fixed by bumping the version from 0.1.0 to 0.1.2 like so:

https://cdn.jsdelivr.net/npm/@catppuccin/[email protected]/css/catppuccin-frappe.css
=>
https://cdn.jsdelivr.net/npm/@catppuccin/[email protected]/css/catppuccin-frappe.css

Add variables variant with more specificity

In some cases over at https://github.com/catppuccin/userstyles, we need the variables stylesheet to be using higher specificity to override a website's existing styling. Adding a variant of the variables CSS that uses !important after each declaration would be great.

Should `code.hljs background` be set?

Based on catppuccin/mdBook#44 being raised, it's worth asking if the key background should be set by default.

Unfortunately, changing the colour to crust would negatively impact other projects that are not using it for just code highlighting so that's out of the question.

Are there any approaches to this that we can take?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

chore(deps): update dependency rimraf to v5.0.10
chore(deps): update dependency serve to v14.2.3
chore(deps): update dependency sass to v1.77.8
chore(deps): update dependency tailwindcss to v3.4.10
chore(deps): update dependency @catppuccin/palette to v1
chore(deps): update dependency rimraf to v6
chore(deps): update peaceiris/actions-gh-pages action to v4
Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/pages.yml

actions/checkout v4

actions/setup-node v4

peaceiris/actions-gh-pages v3

.github/workflows/release-please.yml

googleapis/release-please-action v4

actions/checkout v4

actions/setup-node v4

npm

package.json

@catppuccin/palette ^0.2.0

@catppuccin/tailwindcss ^0.1.6

rimraf ^5.0.1

sass ^1.58.0

serve ^14.2.1

tailwindcss ^3.3.3

Check this box to trigger a request for Renovate to run again on this repository

Don't force usage of RGB variables for variables variant

Having to use RGB values for the variables variants (since each variable is wrapped in rgb(var(--ctp-<color>))) adds additional complexity for us over at https://github.com/catppuccin/userstyles. I'm not sure if this choice was made to better support another port but it would be nice to be able to use any color format (e.g. hex) by removing the rgb() wrapper around each var(--ctp-<color>).