Catppuccin for CodeMirror^v5

Previews

🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

Usage

From the official CodeMirror docs,

You must make sure the desired CSS file defining the corresponding .cm-s-[name] styles is loaded (see the theme directory in the distribution).

1. Make sure to add desired css file to your project by copying it from this repository
2. Set CodeMirror editor instance's theme option to the name corresponding to your palette choice from following table.

const editor = CodeMirror.fromTextArea(document.getElementById("code"));
editor.setOption("theme", "ctp-mocha"); // set theme to Catppuccin Mocha

Check out the demo for reference.

Palette	Name
Latte	ctp-latte
Frappé	ctp-frappe
Macchiato	ctp-macchiato
Mocha	ctp-mocha

🙋 FAQ

• Q: Will this work with latest version of CodeMirror (v6)?
  A: No. It will need additional work to port v6.

💝 Thanks to

Current Maintainer(s)

• griimick

Inspiration and Contribution

• marijnh for CodeMirror
• ghostx31 for catppuccin/joplin

 

Copyright © 2022-present Catppuccin Org