Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 1 addition & 19 deletions .editorconfig
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,5 @@ end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

# go
[*.go]
indent_style = tab
indent_size = 4

# python
[*.{ini,py,py.tpl,rst}]
indent_size = 4

# rust
[*.rs]
indent_size = 4

# documentation, utils
[*.{md,mdx,diff}]
[*.md]
trim_trailing_whitespace = false

# windows shell scripts
[*.{cmd,bat,ps1}]
end_of_line = crlf
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
node_modules/
#/dist not ignored for the demo.
/node_modules
package-lock.json
2 changes: 2 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
/node_modules
/src
51 changes: 25 additions & 26 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<h3 align="center">
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
Catppuccin for <a href="https://codemirror.net/5/">CodeMirror</a><sup>v5</sup>
Catppuccin for <a href="https://codemirror.net/5/">CodeMirror</a><sup>v6</sup>
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
</h3>

Expand All @@ -19,48 +19,47 @@

<details>
<summary>🌻 Latte</summary>
<img src="assets/previews/latte.webp"/>
<a href="https://catppuccin.github.io/codemirror/#latte"><img src="assets/previews/latte.webp"/></a>
</details>
<details>
<summary>🪴 Frappé</summary>
<img src="assets/previews/frappe.webp"/>
<a href="https://catppuccin.github.io/codemirror/#frappe"><img src="assets/previews/frappe.webp"/></a>
</details>
<details>
<summary>🌺 Macchiato</summary>
<img src="assets/previews/macchiato.webp"/>
<a href="https://catppuccin.github.io/codemirror/#macchiato"><img src="assets/previews/macchiato.webp"/></a>
</details>
<details>
<summary>🌿 Mocha</summary>
<img src="assets/previews/mocha.webp"/>
<a href="https://catppuccin.github.io/codemirror/#mocha"><img src="assets/previews/mocha.webp"/></a>
</details>

## Usage

From the [official CodeMirror docs](https://codemirror.net/5/doc/manual.html#:~:text=that%20same%20separator.-,theme,-%3A%20string),

> 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.

```js
const editor = CodeMirror.fromTextArea(document.getElementById("code"));
editor.setOption("theme", "ctp-mocha"); // set theme to Catppuccin Mocha
import { EditorView, basicSetup } from "codemirror"
import { catppuccinMocha } from "@catppuccin/codemirror"

const editor = new EditorView({
doc: "...",
parent: document.body
extensions: [basicSetup, catppuccinMocha],
})
```

Check out the [demo](demo) for reference.
Check out the [demo](https://catppuccin.github.io/codemirror/) for reference.

| Palette | Name |
| --------- | ------------- |
| Latte | ctp-latte |
| Frappé | ctp-frappe |
| Macchiato | ctp-macchiato |
| Mocha | ctp-mocha |
| Palette | Name |
| --------- | ------------------- |
| Latte | catppuccinLatte |
| Frappé | catppuccinFrappe |
| Macchiato | catppuccinMacchiato |
| Mocha | catppuccinMocha |

## 🙋 FAQ

- Q: **_Will this work with latest version of CodeMirror (v6)?_**\
A: No. It will need additional work to port v6.
- Q: **_Is this compatible with CodeMirror5?_**\
A: No. But you can [go back in time](https://github.com/catppuccin/codemirror/tree/aa73c1a1797c97964afcd4a3023353913ec609cb) and find what you want!

## 💝 Thanks to

Expand All @@ -70,12 +69,12 @@ This repository currently has no maintainers.

**Past Maintainer(s)**

- [griimick](https://github.com/griimick)
- [griimick](https://github.com/griimick)

**Inspiration and Contribution**

- [marijnh](https://github.com/marijnh) for [CodeMirror](https://github.com/codemirror/codemirror5)
- [ghostx31](https://github.com/ghostx31/) for [catppuccin/joplin](https://github.com/catppuccin/joplin)
- [marijnh](https://github.com/marijnh) for [CodeMirror](https://github.com/codemirror/codemirror5)
- [ghostx31](https://github.com/ghostx31/) for [catppuccin/joplin](https://github.com/catppuccin/joplin)

&nbsp;

Expand Down
Empty file removed assets/.gitkeep
Empty file.
72 changes: 0 additions & 72 deletions demo/active-line.js

This file was deleted.

Loading