@fsegurai/codemirror-theme-abyss 6.2.1 → 6.2.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 +46 -41
- package/dist/index.cjs +3 -0
- package/dist/index.js +3 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<img alt="CodeMirror 6 Themes Logo" src="https://raw.githubusercontent.com/fsegurai/codemirror-themes/main/public/codemirror-themes.png">
|
|
2
|
+
<img alt="CodeMirror 6 Themes Logo" src="https://raw.githubusercontent.com/fsegurai/codemirror-themes/main/demo/public/codemirror-themes.png">
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
5
|
<p align="center">
|
|
@@ -29,10 +29,10 @@
|
|
|
29
29
|
### Table of contents
|
|
30
30
|
|
|
31
31
|
- [Installation](#installation)
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
32
|
+
- [@fsegurai/codemirror-theme-abyss](#@fsegurai/codemirror-theme-abyss)
|
|
33
|
+
- [Using Theme](#using-theme)
|
|
34
|
+
- [Available Themes](#available-themes)
|
|
35
|
+
- [Demo Application](#demo-application)
|
|
36
36
|
- [License](#license)
|
|
37
37
|
|
|
38
38
|
## Installation
|
|
@@ -42,17 +42,17 @@
|
|
|
42
42
|
To add `@fsegurai/codemirror-theme-abyss` along with CodeMirror 6 to your `package.json` use the following commands.
|
|
43
43
|
|
|
44
44
|
```bash
|
|
45
|
-
|
|
45
|
+
bun install @fsegurai/codemirror-theme-abyss codemirror@^6.0.0 --save
|
|
46
46
|
```
|
|
47
47
|
|
|
48
|
-
|
|
48
|
+
## Using Theme
|
|
49
49
|
|
|
50
50
|
Import the respective theme from the package and apply it to your CodeMirror instance as shown below.
|
|
51
51
|
|
|
52
52
|
```javascript
|
|
53
53
|
import { EditorView, basicSetup } from 'codemirror'
|
|
54
54
|
import { markdown } from '@codemirror/lang-markdown'
|
|
55
|
-
import { abyss } from '@fsegurai/codemirror-theme-
|
|
55
|
+
import { abyss } from '@fsegurai/codemirror-theme-abyss'
|
|
56
56
|
|
|
57
57
|
let editor = new EditorView({
|
|
58
58
|
doc: '# Hello World',
|
|
@@ -69,44 +69,49 @@ Read the [CodeMirror documentation](https://codemirror.net/6/examples/styling/)
|
|
|
69
69
|
|
|
70
70
|
### Available Themes
|
|
71
71
|
|
|
72
|
-
| Theme
|
|
73
|
-
|
|
74
|
-
| All - Bundle
|
|
75
|
-
| Abcdef
|
|
76
|
-
| Abyss
|
|
77
|
-
| Android Studio
|
|
78
|
-
| Andromeda
|
|
79
|
-
| Basic
|
|
80
|
-
| Basic
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
|
|
|
84
|
-
| GitHub Dark
|
|
85
|
-
|
|
|
86
|
-
| Gruvbox Dark
|
|
87
|
-
|
|
|
88
|
-
|
|
|
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
|
|
105
|
+
|
|
106
|
+
To see all themes in action, check out the
|
|
107
|
+
demo: [https://fsegurai.github.io/codemirror-themes](https://fsegurai.github.io/codemirror-themes).
|
|
103
108
|
|
|
104
109
|
To set up the demo locally:
|
|
105
110
|
|
|
106
111
|
```bash
|
|
107
112
|
git clone https://github.com/fsegurai/codemirror-themes.git
|
|
108
|
-
|
|
109
|
-
|
|
113
|
+
bun install
|
|
114
|
+
bun start
|
|
110
115
|
```
|
|
111
116
|
|
|
112
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
|
border: 'none',
|
|
@@ -223,9 +224,11 @@ const abyssTheme = view.EditorView.theme({
|
|
|
223
224
|
},
|
|
224
225
|
'.cm-lineNumbers': {
|
|
225
226
|
fontSize: generalGutter.fontSize,
|
|
227
|
+
lineHeight: generalGutter.lineHeight,
|
|
226
228
|
},
|
|
227
229
|
'.cm-foldGutter': {
|
|
228
230
|
fontSize: generalGutter.fontSize,
|
|
231
|
+
lineHeight: generalGutter.lineHeight,
|
|
229
232
|
},
|
|
230
233
|
'.cm-foldGutter .cm-gutterElement': {
|
|
231
234
|
color: '#5f7e97',
|
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
|
border: 'none',
|
|
@@ -221,9 +222,11 @@ const abyssTheme = /*@__PURE__*/EditorView.theme({
|
|
|
221
222
|
},
|
|
222
223
|
'.cm-lineNumbers': {
|
|
223
224
|
fontSize: generalGutter.fontSize,
|
|
225
|
+
lineHeight: generalGutter.lineHeight,
|
|
224
226
|
},
|
|
225
227
|
'.cm-foldGutter': {
|
|
226
228
|
fontSize: generalGutter.fontSize,
|
|
229
|
+
lineHeight: generalGutter.lineHeight,
|
|
227
230
|
},
|
|
228
231
|
'.cm-foldGutter .cm-gutterElement': {
|
|
229
232
|
color: '#5f7e97',
|