@fsegurai/codemirror-theme-cobalt2 6.0.2 → 6.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +48 -46
- package/dist/index.cjs +3 -0
- package/dist/index.js +3 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -24,13 +24,12 @@
|
|
|
24
24
|
|
|
25
25
|
**A library of custom themes for CodeMirror 6.**
|
|
26
26
|
|
|
27
|
-
`@fsegurai/codemirror-theme-cobalt2` is a theme for CodeMirror 6 editor, making it visually engaging and adaptable
|
|
28
|
-
to different coding styles and user preferences.
|
|
27
|
+
`@fsegurai/codemirror-theme-cobalt2` is a theme for CodeMirror 6 editor, making it visually engaging and adaptable to different coding styles and user preferences.
|
|
29
28
|
|
|
30
29
|
### Table of contents
|
|
31
30
|
|
|
32
31
|
- [Installation](#installation)
|
|
33
|
-
- [@fsegurai/codemirror-theme-cobalt2](
|
|
32
|
+
- [@fsegurai/codemirror-theme-cobalt2](#@fsegurai/codemirror-theme-cobalt2)
|
|
34
33
|
- [Using Theme](#using-theme)
|
|
35
34
|
- [Available Themes](#available-themes)
|
|
36
35
|
- [Demo Application](#demo-application)
|
|
@@ -40,30 +39,29 @@ to different coding styles and user preferences.
|
|
|
40
39
|
|
|
41
40
|
### @fsegurai/codemirror-theme-cobalt2
|
|
42
41
|
|
|
43
|
-
To add `@fsegurai/codemirror-theme-cobalt2` along with CodeMirror 6 to your `package.json` use the following
|
|
44
|
-
commands.
|
|
42
|
+
To add `@fsegurai/codemirror-theme-cobalt2` along with CodeMirror 6 to your `package.json` use the following commands.
|
|
45
43
|
|
|
46
44
|
```bash
|
|
47
|
-
|
|
45
|
+
bun install @fsegurai/codemirror-theme-cobalt2 codemirror@^6.0.0 --save
|
|
48
46
|
```
|
|
49
47
|
|
|
50
|
-
|
|
48
|
+
## Using Theme
|
|
51
49
|
|
|
52
50
|
Import the respective theme from the package and apply it to your CodeMirror instance as shown below.
|
|
53
51
|
|
|
54
52
|
```javascript
|
|
55
53
|
import { EditorView, basicSetup } from 'codemirror'
|
|
56
54
|
import { markdown } from '@codemirror/lang-markdown'
|
|
57
|
-
import { cobalt2 } from '@fsegurai/codemirror-theme-
|
|
55
|
+
import { cobalt2 } from '@fsegurai/codemirror-theme-cobalt2'
|
|
58
56
|
|
|
59
57
|
let editor = new EditorView({
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
58
|
+
doc: '# Hello World',
|
|
59
|
+
extensions: [
|
|
60
|
+
basicSetup,
|
|
61
|
+
markdown(),
|
|
62
|
+
cobalt2
|
|
63
|
+
],
|
|
64
|
+
parent: document.body
|
|
67
65
|
})
|
|
68
66
|
```
|
|
69
67
|
|
|
@@ -71,35 +69,39 @@ Read the [CodeMirror documentation](https://codemirror.net/6/examples/styling/)
|
|
|
71
69
|
|
|
72
70
|
### Available Themes
|
|
73
71
|
|
|
74
|
-
| Theme
|
|
75
|
-
|
|
76
|
-
| All - Bundle
|
|
77
|
-
| Abcdef
|
|
78
|
-
| Abyss
|
|
79
|
-
| Android Studio
|
|
80
|
-
| Andromeda
|
|
81
|
-
| Basic
|
|
82
|
-
| Basic
|
|
83
|
-
|
|
|
84
|
-
|
|
|
85
|
-
|
|
|
86
|
-
| GitHub Dark
|
|
87
|
-
|
|
|
88
|
-
| Gruvbox Dark
|
|
89
|
-
|
|
|
90
|
-
|
|
|
91
|
-
|
|
|
92
|
-
|
|
|
93
|
-
|
|
|
94
|
-
|
|
|
95
|
-
|
|
|
96
|
-
|
|
|
97
|
-
|
|
|
98
|
-
|
|
|
99
|
-
|
|
|
100
|
-
|
|
|
101
|
-
|
|
102
|
-
|
|
72
|
+
| Theme | Package | Version |
|
|
73
|
+
|---------------------|--------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------|
|
|
74
|
+
| All - Bundle | [@fsegurai/codemirror-theme-bundle](https://www.npmjs.com/package/@fsegurai/codemirror-theme-bundle) |  |
|
|
75
|
+
| Abcdef | [@fsegurai/codemirror-theme-abcdef](https://www.npmjs.com/package/@fsegurai/codemirror-theme-abcdef) |  |
|
|
76
|
+
| Abyss | [@fsegurai/codemirror-theme-abyss](https://www.npmjs.com/package/@fsegurai/codemirror-theme-abyss) |  |
|
|
77
|
+
| Android Studio | [@fsegurai/codemirror-theme-android-studio](https://www.npmjs.com/package/@fsegurai/codemirror-theme-android-studio) |  |
|
|
78
|
+
| Andromeda | [@fsegurai/codemirror-theme-andromeda](https://www.npmjs.com/package/@fsegurai/codemirror-theme-andromeda) |  |
|
|
79
|
+
| Basic Dark | [@fsegurai/codemirror-theme-basic-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-basic-dark) |  |
|
|
80
|
+
| Basic Light | [@fsegurai/codemirror-theme-basic-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-basic-light) |  |
|
|
81
|
+
| Catppuccin Mocha | [@fsegurai/codemirror-theme-catppuccin-mocha](https://www.npmjs.com/package/@fsegurai/codemirror-theme-catppuccin-mocha) |  |
|
|
82
|
+
| Cobalt2 | [@fsegurai/codemirror-theme-cobalt](https://www.npmjs.com/package/@fsegurai/codemirror-theme-cobalt2) |  |
|
|
83
|
+
| Forest | [@fsegurai/codemirror-theme-forest](https://www.npmjs.com/package/@fsegurai/codemirror-theme-forest) |  |
|
|
84
|
+
| GitHub Dark | [@fsegurai/codemirror-theme-github-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-github-dark) |  |
|
|
85
|
+
| GitHub Light | [@fsegurai/codemirror-theme-github-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-github-light) |  |
|
|
86
|
+
| Gruvbox Dark | [@fsegurai/codemirror-theme-gruvbox-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-gruvbox-dark) |  |
|
|
87
|
+
| Gruvbox Light | [@fsegurai/codemirror-theme-gruvbox-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-gruvbox-light) |  |
|
|
88
|
+
| High Contrast Dark | [@fsegurai/codemirror-theme-high-contrast-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-high-contrast-dark) |  |
|
|
89
|
+
| High Contrast Light | [@fsegurai/codemirror-theme-high-contrast-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-high-contrast-light) |  |
|
|
90
|
+
| Material Dark | [@fsegurai/codemirror-theme-material-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-dark) |  |
|
|
91
|
+
| Material Light | [@fsegurai/codemirror-theme-material-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-material-light) |  |
|
|
92
|
+
| Monokai | [@fsegurai/codemirror-theme-monokai](https://www.npmjs.com/package/@fsegurai/codemirror-theme-monokai) |  |
|
|
93
|
+
| Nord | [@fsegurai/codemirror-theme-nord](https://www.npmjs.com/package/@fsegurai/codemirror-theme-nord) |  |
|
|
94
|
+
| Palenight | [@fsegurai/codemirror-theme-palenight](https://www.npmjs.com/package/@fsegurai/codemirror-theme-palenight) |  |
|
|
95
|
+
| Solarized Dark | [@fsegurai/codemirror-theme-solarized-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-solarized-dark) |  |
|
|
96
|
+
| Solarized Light | [@fsegurai/codemirror-theme-solarized-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-solarized-light) |  |
|
|
97
|
+
| Synthwave 84 | [@fsegurai/codemirror-theme-synthwave-84](https://www.npmjs.com/package/@fsegurai/codemirror-theme-synthwave-84) |  |
|
|
98
|
+
| Tokyo Night Day | [@fsegurai/codemirror-theme-tokyo-night-day](https://www.npmjs.com/package/@fsegurai/codemirror-theme-tokyo-night-day) |  |
|
|
99
|
+
| Tokyo Night Storm | [@fsegurai/codemirror-theme-tokyo-night-storm](https://www.npmjs.com/package/@fsegurai/codemirror-theme-tokyo-night-storm) |  |
|
|
100
|
+
| Volcano | [@fsegurai/codemirror-theme-volcano](https://www.npmjs.com/package/@fsegurai/codemirror-theme-volcano) |  |
|
|
101
|
+
| VS Code Light | [@fsegurai/codemirror-theme-vscode-light](https://www.npmjs.com/package/@fsegurai/codemirror-theme-vscode-light) |  |
|
|
102
|
+
| VS Code Dark | [@fsegurai/codemirror-theme-vscode-dark](https://www.npmjs.com/package/@fsegurai/codemirror-theme-vscode-dark) |  |
|
|
103
|
+
|
|
104
|
+
## Demo Application
|
|
103
105
|
|
|
104
106
|
To see all themes in action, check out the
|
|
105
107
|
demo: [https://fsegurai.github.io/codemirror-themes](https://fsegurai.github.io/codemirror-themes).
|
|
@@ -108,8 +110,8 @@ To set up the demo locally:
|
|
|
108
110
|
|
|
109
111
|
```bash
|
|
110
112
|
git clone https://github.com/fsegurai/codemirror-themes.git
|
|
111
|
-
|
|
112
|
-
|
|
113
|
+
bun install
|
|
114
|
+
bun start
|
|
113
115
|
```
|
|
114
116
|
|
|
115
117
|
This will serve the application locally at [http://[::1]:8000](http://[::1]:8000).
|
package/dist/index.cjs
CHANGED
|
@@ -23,6 +23,7 @@ const generalGutter = {
|
|
|
23
23
|
paddingRight: '8px',
|
|
24
24
|
fontSize: '0.9em',
|
|
25
25
|
fontWeight: '500',
|
|
26
|
+
lineHeight: '1.78', // Adjusted to compensate for 0.9em fontSize (1.6 / 0.9 ≈ 1.78)
|
|
26
27
|
};
|
|
27
28
|
const generalPanel = {
|
|
28
29
|
borderRadius: '4px',
|
|
@@ -263,10 +264,12 @@ const cobalt2Theme = view.EditorView.theme({
|
|
|
263
264
|
},
|
|
264
265
|
'.cm-lineNumbers': {
|
|
265
266
|
fontSize: generalGutter.fontSize,
|
|
267
|
+
lineHeight: generalGutter.lineHeight,
|
|
266
268
|
color: gray,
|
|
267
269
|
},
|
|
268
270
|
'.cm-foldGutter': {
|
|
269
271
|
fontSize: generalGutter.fontSize,
|
|
272
|
+
lineHeight: generalGutter.lineHeight,
|
|
270
273
|
},
|
|
271
274
|
'.cm-foldGutter .cm-gutterElement': {
|
|
272
275
|
color: gray,
|
package/dist/index.js
CHANGED
|
@@ -21,6 +21,7 @@ const generalGutter = {
|
|
|
21
21
|
paddingRight: '8px',
|
|
22
22
|
fontSize: '0.9em',
|
|
23
23
|
fontWeight: '500',
|
|
24
|
+
lineHeight: '1.78', // Adjusted to compensate for 0.9em fontSize (1.6 / 0.9 ≈ 1.78)
|
|
24
25
|
};
|
|
25
26
|
const generalPanel = {
|
|
26
27
|
borderRadius: '4px',
|
|
@@ -261,10 +262,12 @@ const cobalt2Theme = /*@__PURE__*/EditorView.theme({
|
|
|
261
262
|
},
|
|
262
263
|
'.cm-lineNumbers': {
|
|
263
264
|
fontSize: generalGutter.fontSize,
|
|
265
|
+
lineHeight: generalGutter.lineHeight,
|
|
264
266
|
color: gray,
|
|
265
267
|
},
|
|
266
268
|
'.cm-foldGutter': {
|
|
267
269
|
fontSize: generalGutter.fontSize,
|
|
270
|
+
lineHeight: generalGutter.lineHeight,
|
|
268
271
|
},
|
|
269
272
|
'.cm-foldGutter .cm-gutterElement': {
|
|
270
273
|
color: gray,
|