@fsegurai/codemirror-theme-cobalt2 6.0.1 → 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 +35 -72
- package/dist/index.js +35 -72
- 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,
|
|
@@ -435,12 +438,22 @@ const cobalt2Theme = view.EditorView.theme({
|
|
|
435
438
|
* Enhanced syntax highlighting for the Cobalt2 theme
|
|
436
439
|
*/
|
|
437
440
|
const cobalt2HighlightStyle = language.HighlightStyle.define([
|
|
441
|
+
// Comments
|
|
442
|
+
{ tag: highlight.tags.comment, color: blue, fontStyle: 'italic' },
|
|
443
|
+
{ tag: highlight.tags.docComment, color: blue, fontStyle: 'italic' },
|
|
444
|
+
{ tag: highlight.tags.lineComment, color: blue, fontStyle: 'italic' },
|
|
445
|
+
{ tag: highlight.tags.blockComment, color: blue, fontStyle: 'italic' },
|
|
438
446
|
// Keywords and control flow
|
|
439
447
|
{ tag: highlight.tags.keyword, color: orange },
|
|
440
448
|
{ tag: highlight.tags.controlKeyword, color: orange },
|
|
441
449
|
{ tag: highlight.tags.operatorKeyword, color: orange },
|
|
442
450
|
{ tag: highlight.tags.moduleKeyword, color: cyan },
|
|
443
451
|
{ tag: highlight.tags.definitionKeyword, color: hotPink },
|
|
452
|
+
// Special language constructs
|
|
453
|
+
{ tag: highlight.tags.self, color: hotPink },
|
|
454
|
+
{ tag: highlight.tags.special(highlight.tags.variableName), color: cyan },
|
|
455
|
+
{ tag: highlight.tags.special(highlight.tags.keyword), color: cyan },
|
|
456
|
+
{ tag: highlight.tags.special(highlight.tags.propertyName), color: cyan },
|
|
444
457
|
// Variables - Enhanced for better distinction
|
|
445
458
|
{ tag: highlight.tags.variableName, color: foreground },
|
|
446
459
|
{ tag: highlight.tags.definition(highlight.tags.variableName), color: foreground },
|
|
@@ -450,41 +463,14 @@ const cobalt2HighlightStyle = language.HighlightStyle.define([
|
|
|
450
463
|
{ tag: highlight.tags.className, color: lightPink, fontStyle: 'italic' },
|
|
451
464
|
{ tag: highlight.tags.namespace, color: lightPink, fontStyle: 'italic' },
|
|
452
465
|
{ tag: highlight.tags.macroName, color: lightPink, fontStyle: 'italic' },
|
|
453
|
-
|
|
454
|
-
{ tag: highlight.tags.standard(highlight.tags.propertyName), color: supportTeal },
|
|
455
|
-
// Operators and punctuation
|
|
456
|
-
{ tag: highlight.tags.operator, color: lightGray },
|
|
457
|
-
{ tag: highlight.tags.derefOperator, color: lightGray },
|
|
458
|
-
{ tag: highlight.tags.arithmeticOperator, color: lightGray },
|
|
459
|
-
{ tag: highlight.tags.logicOperator, color: lightGray },
|
|
460
|
-
{ tag: highlight.tags.bitwiseOperator, color: lightGray },
|
|
461
|
-
{ tag: highlight.tags.compareOperator, color: lightGray },
|
|
462
|
-
{ tag: highlight.tags.updateOperator, color: lightGray },
|
|
463
|
-
{ tag: highlight.tags.punctuation, color: lightGray },
|
|
464
|
-
{ tag: highlight.tags.bracket, color: lightGray },
|
|
465
|
-
{ tag: highlight.tags.brace, color: lightGray },
|
|
466
|
-
{ tag: highlight.tags.squareBracket, color: lightGray },
|
|
467
|
-
{ tag: highlight.tags.paren, color: yellow },
|
|
468
|
-
{ tag: highlight.tags.angleBracket, color: lightGray },
|
|
469
|
-
{ tag: [highlight.tags.operator, highlight.tags.punctuation], color: lightGray },
|
|
470
|
-
// Functions
|
|
466
|
+
// Functions - specific function types first
|
|
471
467
|
{ tag: highlight.tags.function(highlight.tags.variableName), color: yellow },
|
|
472
468
|
{ tag: highlight.tags.function(highlight.tags.definition(highlight.tags.variableName)), color: yellow },
|
|
473
469
|
{ tag: highlight.tags.function(highlight.tags.propertyName), color: yellow },
|
|
474
|
-
{ tag: [highlight.tags.moduleKeyword, highlight.tags.special(highlight.tags.keyword)], color: cyan },
|
|
475
|
-
{ tag: [highlight.tags.definitionKeyword], color: hotPink },
|
|
476
|
-
// Comments
|
|
477
|
-
{ tag: highlight.tags.comment, color: blue, fontStyle: 'italic' },
|
|
478
|
-
{ tag: highlight.tags.docComment, color: blue, fontStyle: 'italic' },
|
|
479
|
-
{ tag: highlight.tags.lineComment, color: blue, fontStyle: 'italic' },
|
|
480
|
-
{ tag: highlight.tags.blockComment, color: blue, fontStyle: 'italic' },
|
|
481
|
-
// Storage and function keywords
|
|
482
|
-
{ tag: highlight.tags.modifier, color: yellow, fontStyle: 'italic' },
|
|
483
|
-
// Special variables and exports
|
|
484
|
-
{ tag: highlight.tags.special(highlight.tags.variableName), color: cyan },
|
|
485
470
|
// Properties
|
|
486
471
|
{ tag: highlight.tags.propertyName, color: lightBlue },
|
|
487
472
|
{ tag: highlight.tags.definition(highlight.tags.propertyName), color: lightBlue },
|
|
473
|
+
{ tag: highlight.tags.standard(highlight.tags.propertyName), color: supportTeal },
|
|
488
474
|
// Constants
|
|
489
475
|
{ tag: highlight.tags.constant(highlight.tags.name), color: pink },
|
|
490
476
|
{ tag: highlight.tags.standard(highlight.tags.name), color: pink },
|
|
@@ -494,9 +480,9 @@ const cobalt2HighlightStyle = language.HighlightStyle.define([
|
|
|
494
480
|
{ tag: highlight.tags.bool, color: pink },
|
|
495
481
|
{ tag: highlight.tags.atom, color: pink },
|
|
496
482
|
{ tag: highlight.tags.null, color: pink },
|
|
497
|
-
// Strings
|
|
498
|
-
{ tag: highlight.tags.string, color: lightGreen },
|
|
483
|
+
// Strings - specific string types first
|
|
499
484
|
{ tag: highlight.tags.special(highlight.tags.string), color: green },
|
|
485
|
+
{ tag: highlight.tags.string, color: lightGreen },
|
|
500
486
|
{ tag: highlight.tags.regexp, color: lightGreen },
|
|
501
487
|
// String quotes
|
|
502
488
|
{ tag: highlight.tags.quote, color: stringQuotes },
|
|
@@ -504,14 +490,30 @@ const cobalt2HighlightStyle = language.HighlightStyle.define([
|
|
|
504
490
|
{ tag: highlight.tags.definition(highlight.tags.function(highlight.tags.variableName)), color: parameterYellow },
|
|
505
491
|
// HTML/XML elements
|
|
506
492
|
{ tag: highlight.tags.tagName, color: lightBlue },
|
|
493
|
+
{ tag: highlight.tags.standard(highlight.tags.tagName), color: supportTeal },
|
|
507
494
|
{ tag: highlight.tags.attributeName, color: yellow, fontStyle: 'italic' },
|
|
508
495
|
{ tag: highlight.tags.attributeValue, color: lightGreen },
|
|
509
|
-
//
|
|
510
|
-
{ tag: highlight.tags.
|
|
496
|
+
// Operators and punctuation
|
|
497
|
+
{ tag: highlight.tags.operator, color: lightGray },
|
|
498
|
+
{ tag: highlight.tags.derefOperator, color: lightGray },
|
|
499
|
+
{ tag: highlight.tags.arithmeticOperator, color: lightGray },
|
|
500
|
+
{ tag: highlight.tags.logicOperator, color: lightGray },
|
|
501
|
+
{ tag: highlight.tags.bitwiseOperator, color: lightGray },
|
|
502
|
+
{ tag: highlight.tags.compareOperator, color: lightGray },
|
|
503
|
+
{ tag: highlight.tags.updateOperator, color: lightGray },
|
|
504
|
+
{ tag: highlight.tags.punctuation, color: lightGray },
|
|
505
|
+
{ tag: highlight.tags.bracket, color: lightGray },
|
|
506
|
+
{ tag: highlight.tags.brace, color: lightGray },
|
|
507
|
+
{ tag: highlight.tags.squareBracket, color: lightGray },
|
|
508
|
+
{ tag: highlight.tags.paren, color: yellow },
|
|
509
|
+
{ tag: highlight.tags.angleBracket, color: lightGray },
|
|
510
|
+
// Storage and function keywords
|
|
511
|
+
{ tag: highlight.tags.modifier, color: yellow, fontStyle: 'italic' },
|
|
511
512
|
// Meta and annotations
|
|
512
513
|
{ tag: highlight.tags.meta, color: lightBlue },
|
|
513
514
|
{ tag: highlight.tags.annotation, color: yellow, fontStyle: 'italic' },
|
|
514
515
|
{ tag: highlight.tags.processingInstruction, color: yellow },
|
|
516
|
+
// Markdown elements
|
|
515
517
|
{ tag: highlight.tags.heading, color: yellow, fontWeight: 'bold' },
|
|
516
518
|
{ tag: highlight.tags.heading1, color: yellow, fontWeight: 'bold' },
|
|
517
519
|
{ tag: highlight.tags.heading2, color: yellow, fontWeight: 'bold' },
|
|
@@ -523,7 +525,6 @@ const cobalt2HighlightStyle = language.HighlightStyle.define([
|
|
|
523
525
|
{ tag: highlight.tags.strong, color: lightBlue, fontWeight: 'bold' },
|
|
524
526
|
{ tag: highlight.tags.emphasis, color: lightBlue, fontStyle: 'italic' },
|
|
525
527
|
{ tag: highlight.tags.list, color: yellow },
|
|
526
|
-
{ tag: highlight.tags.quote, color: lightBlue, fontStyle: 'italic' },
|
|
527
528
|
// Code blocks and inline code - Enhanced styling
|
|
528
529
|
{ tag: highlight.tags.monospace, color: lightBlue },
|
|
529
530
|
{ tag: highlight.tags.special(highlight.tags.monospace), color: green },
|
|
@@ -536,46 +537,8 @@ const cobalt2HighlightStyle = language.HighlightStyle.define([
|
|
|
536
537
|
{ tag: highlight.tags.deleted, color: pink },
|
|
537
538
|
{ tag: highlight.tags.inserted, color: lightGreen },
|
|
538
539
|
{ tag: highlight.tags.changed, color: yellow },
|
|
539
|
-
// Module system - exports, require, module should be cyan
|
|
540
|
-
{ tag: highlight.tags.special(highlight.tags.keyword), color: cyan }, // Special keywords like exports
|
|
541
|
-
// Function declarations and expressions - function keyword should be magenta
|
|
542
|
-
{ tag: highlight.tags.definitionKeyword, color: hotPink }, // function, class, etc.
|
|
543
|
-
// Method names and function assignments - yellow
|
|
544
|
-
{ tag: highlight.tags.function(highlight.tags.propertyName), color: yellow }, // obj.method, exports.functionName
|
|
545
|
-
// Arrow functions and anonymous functions
|
|
546
|
-
{ tag: highlight.tags.function(highlight.tags.definition(highlight.tags.variableName)), color: yellow },
|
|
547
|
-
// Object property access - cyan for special objects like exports
|
|
548
|
-
{ tag: highlight.tags.special(highlight.tags.propertyName), color: cyan }, // exports.something
|
|
549
540
|
// Language-specific: CSS
|
|
550
541
|
{ tag: highlight.tags.unit, color: parameterYellow }, // CSS units
|
|
551
|
-
// Enhanced code block syntax highlighting for better JavaScript support
|
|
552
|
-
// ====================================================================
|
|
553
|
-
// JavaScript/TypeScript keywords in code blocks
|
|
554
|
-
{ tag: [highlight.tags.controlKeyword, highlight.tags.keyword], color: orange }, // return, if, else, etc.
|
|
555
|
-
// Variables in code blocks - white for better readability
|
|
556
|
-
{ tag: [highlight.tags.variableName, highlight.tags.local(highlight.tags.variableName)], color: foreground },
|
|
557
|
-
// Functions in code blocks - yellow
|
|
558
|
-
{
|
|
559
|
-
tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.function(highlight.tags.definition(highlight.tags.variableName))],
|
|
560
|
-
color: yellow,
|
|
561
|
-
},
|
|
562
|
-
// Strings in code blocks
|
|
563
|
-
{ tag: [highlight.tags.string, highlight.tags.special(highlight.tags.string)], color: lightGreen },
|
|
564
|
-
// Numbers in code blocks
|
|
565
|
-
{ tag: [highlight.tags.number, highlight.tags.integer, highlight.tags.float], color: pink },
|
|
566
|
-
// Comments in code blocks
|
|
567
|
-
{
|
|
568
|
-
tag: [highlight.tags.comment, highlight.tags.lineComment, highlight.tags.blockComment],
|
|
569
|
-
color: blue,
|
|
570
|
-
fontStyle: 'italic',
|
|
571
|
-
},
|
|
572
|
-
// HTML/XML in code blocks
|
|
573
|
-
{ tag: [highlight.tags.tagName, highlight.tags.angleBracket], color: lightBlue },
|
|
574
|
-
{ tag: [highlight.tags.attributeName], color: yellow, fontStyle: 'italic' },
|
|
575
|
-
{ tag: [highlight.tags.attributeValue], color: lightGreen },
|
|
576
|
-
{ tag: [highlight.tags.propertyName], color: lightBlue },
|
|
577
|
-
{ tag: [highlight.tags.className], color: lightPink, fontStyle: 'italic' },
|
|
578
|
-
{ tag: [highlight.tags.standard(highlight.tags.propertyName)], color: supportTeal },
|
|
579
542
|
// Entity names
|
|
580
543
|
{ tag: highlight.tags.labelName, color: yellow },
|
|
581
544
|
{ tag: highlight.tags.escape, color: yellow },
|
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,
|
|
@@ -433,12 +436,22 @@ const cobalt2Theme = /*@__PURE__*/EditorView.theme({
|
|
|
433
436
|
* Enhanced syntax highlighting for the Cobalt2 theme
|
|
434
437
|
*/
|
|
435
438
|
const cobalt2HighlightStyle = /*@__PURE__*/HighlightStyle.define([
|
|
439
|
+
// Comments
|
|
440
|
+
{ tag: tags.comment, color: blue, fontStyle: 'italic' },
|
|
441
|
+
{ tag: tags.docComment, color: blue, fontStyle: 'italic' },
|
|
442
|
+
{ tag: tags.lineComment, color: blue, fontStyle: 'italic' },
|
|
443
|
+
{ tag: tags.blockComment, color: blue, fontStyle: 'italic' },
|
|
436
444
|
// Keywords and control flow
|
|
437
445
|
{ tag: tags.keyword, color: orange },
|
|
438
446
|
{ tag: tags.controlKeyword, color: orange },
|
|
439
447
|
{ tag: tags.operatorKeyword, color: orange },
|
|
440
448
|
{ tag: tags.moduleKeyword, color: cyan },
|
|
441
449
|
{ tag: tags.definitionKeyword, color: hotPink },
|
|
450
|
+
// Special language constructs
|
|
451
|
+
{ tag: tags.self, color: hotPink },
|
|
452
|
+
{ tag: /*@__PURE__*/tags.special(tags.variableName), color: cyan },
|
|
453
|
+
{ tag: /*@__PURE__*/tags.special(tags.keyword), color: cyan },
|
|
454
|
+
{ tag: /*@__PURE__*/tags.special(tags.propertyName), color: cyan },
|
|
442
455
|
// Variables - Enhanced for better distinction
|
|
443
456
|
{ tag: tags.variableName, color: foreground },
|
|
444
457
|
{ tag: /*@__PURE__*/tags.definition(tags.variableName), color: foreground },
|
|
@@ -448,41 +461,14 @@ const cobalt2HighlightStyle = /*@__PURE__*/HighlightStyle.define([
|
|
|
448
461
|
{ tag: tags.className, color: lightPink, fontStyle: 'italic' },
|
|
449
462
|
{ tag: tags.namespace, color: lightPink, fontStyle: 'italic' },
|
|
450
463
|
{ tag: tags.macroName, color: lightPink, fontStyle: 'italic' },
|
|
451
|
-
|
|
452
|
-
{ tag: /*@__PURE__*/tags.standard(tags.propertyName), color: supportTeal },
|
|
453
|
-
// Operators and punctuation
|
|
454
|
-
{ tag: tags.operator, color: lightGray },
|
|
455
|
-
{ tag: tags.derefOperator, color: lightGray },
|
|
456
|
-
{ tag: tags.arithmeticOperator, color: lightGray },
|
|
457
|
-
{ tag: tags.logicOperator, color: lightGray },
|
|
458
|
-
{ tag: tags.bitwiseOperator, color: lightGray },
|
|
459
|
-
{ tag: tags.compareOperator, color: lightGray },
|
|
460
|
-
{ tag: tags.updateOperator, color: lightGray },
|
|
461
|
-
{ tag: tags.punctuation, color: lightGray },
|
|
462
|
-
{ tag: tags.bracket, color: lightGray },
|
|
463
|
-
{ tag: tags.brace, color: lightGray },
|
|
464
|
-
{ tag: tags.squareBracket, color: lightGray },
|
|
465
|
-
{ tag: tags.paren, color: yellow },
|
|
466
|
-
{ tag: tags.angleBracket, color: lightGray },
|
|
467
|
-
{ tag: [tags.operator, tags.punctuation], color: lightGray },
|
|
468
|
-
// Functions
|
|
464
|
+
// Functions - specific function types first
|
|
469
465
|
{ tag: /*@__PURE__*/tags.function(tags.variableName), color: yellow },
|
|
470
466
|
{ tag: /*@__PURE__*/tags.function(/*@__PURE__*/tags.definition(tags.variableName)), color: yellow },
|
|
471
467
|
{ tag: /*@__PURE__*/tags.function(tags.propertyName), color: yellow },
|
|
472
|
-
{ tag: [tags.moduleKeyword, /*@__PURE__*/tags.special(tags.keyword)], color: cyan },
|
|
473
|
-
{ tag: [tags.definitionKeyword], color: hotPink },
|
|
474
|
-
// Comments
|
|
475
|
-
{ tag: tags.comment, color: blue, fontStyle: 'italic' },
|
|
476
|
-
{ tag: tags.docComment, color: blue, fontStyle: 'italic' },
|
|
477
|
-
{ tag: tags.lineComment, color: blue, fontStyle: 'italic' },
|
|
478
|
-
{ tag: tags.blockComment, color: blue, fontStyle: 'italic' },
|
|
479
|
-
// Storage and function keywords
|
|
480
|
-
{ tag: tags.modifier, color: yellow, fontStyle: 'italic' },
|
|
481
|
-
// Special variables and exports
|
|
482
|
-
{ tag: /*@__PURE__*/tags.special(tags.variableName), color: cyan },
|
|
483
468
|
// Properties
|
|
484
469
|
{ tag: tags.propertyName, color: lightBlue },
|
|
485
470
|
{ tag: /*@__PURE__*/tags.definition(tags.propertyName), color: lightBlue },
|
|
471
|
+
{ tag: /*@__PURE__*/tags.standard(tags.propertyName), color: supportTeal },
|
|
486
472
|
// Constants
|
|
487
473
|
{ tag: /*@__PURE__*/tags.constant(tags.name), color: pink },
|
|
488
474
|
{ tag: /*@__PURE__*/tags.standard(tags.name), color: pink },
|
|
@@ -492,9 +478,9 @@ const cobalt2HighlightStyle = /*@__PURE__*/HighlightStyle.define([
|
|
|
492
478
|
{ tag: tags.bool, color: pink },
|
|
493
479
|
{ tag: tags.atom, color: pink },
|
|
494
480
|
{ tag: tags.null, color: pink },
|
|
495
|
-
// Strings
|
|
496
|
-
{ tag: tags.string, color: lightGreen },
|
|
481
|
+
// Strings - specific string types first
|
|
497
482
|
{ tag: /*@__PURE__*/tags.special(tags.string), color: green },
|
|
483
|
+
{ tag: tags.string, color: lightGreen },
|
|
498
484
|
{ tag: tags.regexp, color: lightGreen },
|
|
499
485
|
// String quotes
|
|
500
486
|
{ tag: tags.quote, color: stringQuotes },
|
|
@@ -502,14 +488,30 @@ const cobalt2HighlightStyle = /*@__PURE__*/HighlightStyle.define([
|
|
|
502
488
|
{ tag: /*@__PURE__*/tags.definition(/*@__PURE__*/tags.function(tags.variableName)), color: parameterYellow },
|
|
503
489
|
// HTML/XML elements
|
|
504
490
|
{ tag: tags.tagName, color: lightBlue },
|
|
491
|
+
{ tag: /*@__PURE__*/tags.standard(tags.tagName), color: supportTeal },
|
|
505
492
|
{ tag: tags.attributeName, color: yellow, fontStyle: 'italic' },
|
|
506
493
|
{ tag: tags.attributeValue, color: lightGreen },
|
|
507
|
-
//
|
|
508
|
-
{ tag: tags.
|
|
494
|
+
// Operators and punctuation
|
|
495
|
+
{ tag: tags.operator, color: lightGray },
|
|
496
|
+
{ tag: tags.derefOperator, color: lightGray },
|
|
497
|
+
{ tag: tags.arithmeticOperator, color: lightGray },
|
|
498
|
+
{ tag: tags.logicOperator, color: lightGray },
|
|
499
|
+
{ tag: tags.bitwiseOperator, color: lightGray },
|
|
500
|
+
{ tag: tags.compareOperator, color: lightGray },
|
|
501
|
+
{ tag: tags.updateOperator, color: lightGray },
|
|
502
|
+
{ tag: tags.punctuation, color: lightGray },
|
|
503
|
+
{ tag: tags.bracket, color: lightGray },
|
|
504
|
+
{ tag: tags.brace, color: lightGray },
|
|
505
|
+
{ tag: tags.squareBracket, color: lightGray },
|
|
506
|
+
{ tag: tags.paren, color: yellow },
|
|
507
|
+
{ tag: tags.angleBracket, color: lightGray },
|
|
508
|
+
// Storage and function keywords
|
|
509
|
+
{ tag: tags.modifier, color: yellow, fontStyle: 'italic' },
|
|
509
510
|
// Meta and annotations
|
|
510
511
|
{ tag: tags.meta, color: lightBlue },
|
|
511
512
|
{ tag: tags.annotation, color: yellow, fontStyle: 'italic' },
|
|
512
513
|
{ tag: tags.processingInstruction, color: yellow },
|
|
514
|
+
// Markdown elements
|
|
513
515
|
{ tag: tags.heading, color: yellow, fontWeight: 'bold' },
|
|
514
516
|
{ tag: tags.heading1, color: yellow, fontWeight: 'bold' },
|
|
515
517
|
{ tag: tags.heading2, color: yellow, fontWeight: 'bold' },
|
|
@@ -521,7 +523,6 @@ const cobalt2HighlightStyle = /*@__PURE__*/HighlightStyle.define([
|
|
|
521
523
|
{ tag: tags.strong, color: lightBlue, fontWeight: 'bold' },
|
|
522
524
|
{ tag: tags.emphasis, color: lightBlue, fontStyle: 'italic' },
|
|
523
525
|
{ tag: tags.list, color: yellow },
|
|
524
|
-
{ tag: tags.quote, color: lightBlue, fontStyle: 'italic' },
|
|
525
526
|
// Code blocks and inline code - Enhanced styling
|
|
526
527
|
{ tag: tags.monospace, color: lightBlue },
|
|
527
528
|
{ tag: /*@__PURE__*/tags.special(tags.monospace), color: green },
|
|
@@ -534,46 +535,8 @@ const cobalt2HighlightStyle = /*@__PURE__*/HighlightStyle.define([
|
|
|
534
535
|
{ tag: tags.deleted, color: pink },
|
|
535
536
|
{ tag: tags.inserted, color: lightGreen },
|
|
536
537
|
{ tag: tags.changed, color: yellow },
|
|
537
|
-
// Module system - exports, require, module should be cyan
|
|
538
|
-
{ tag: /*@__PURE__*/tags.special(tags.keyword), color: cyan }, // Special keywords like exports
|
|
539
|
-
// Function declarations and expressions - function keyword should be magenta
|
|
540
|
-
{ tag: tags.definitionKeyword, color: hotPink }, // function, class, etc.
|
|
541
|
-
// Method names and function assignments - yellow
|
|
542
|
-
{ tag: /*@__PURE__*/tags.function(tags.propertyName), color: yellow }, // obj.method, exports.functionName
|
|
543
|
-
// Arrow functions and anonymous functions
|
|
544
|
-
{ tag: /*@__PURE__*/tags.function(/*@__PURE__*/tags.definition(tags.variableName)), color: yellow },
|
|
545
|
-
// Object property access - cyan for special objects like exports
|
|
546
|
-
{ tag: /*@__PURE__*/tags.special(tags.propertyName), color: cyan }, // exports.something
|
|
547
538
|
// Language-specific: CSS
|
|
548
539
|
{ tag: tags.unit, color: parameterYellow }, // CSS units
|
|
549
|
-
// Enhanced code block syntax highlighting for better JavaScript support
|
|
550
|
-
// ====================================================================
|
|
551
|
-
// JavaScript/TypeScript keywords in code blocks
|
|
552
|
-
{ tag: [tags.controlKeyword, tags.keyword], color: orange }, // return, if, else, etc.
|
|
553
|
-
// Variables in code blocks - white for better readability
|
|
554
|
-
{ tag: [tags.variableName, /*@__PURE__*/tags.local(tags.variableName)], color: foreground },
|
|
555
|
-
// Functions in code blocks - yellow
|
|
556
|
-
{
|
|
557
|
-
tag: [/*@__PURE__*/tags.function(tags.variableName), /*@__PURE__*/tags.function(/*@__PURE__*/tags.definition(tags.variableName))],
|
|
558
|
-
color: yellow,
|
|
559
|
-
},
|
|
560
|
-
// Strings in code blocks
|
|
561
|
-
{ tag: [tags.string, /*@__PURE__*/tags.special(tags.string)], color: lightGreen },
|
|
562
|
-
// Numbers in code blocks
|
|
563
|
-
{ tag: [tags.number, tags.integer, tags.float], color: pink },
|
|
564
|
-
// Comments in code blocks
|
|
565
|
-
{
|
|
566
|
-
tag: [tags.comment, tags.lineComment, tags.blockComment],
|
|
567
|
-
color: blue,
|
|
568
|
-
fontStyle: 'italic',
|
|
569
|
-
},
|
|
570
|
-
// HTML/XML in code blocks
|
|
571
|
-
{ tag: [tags.tagName, tags.angleBracket], color: lightBlue },
|
|
572
|
-
{ tag: [tags.attributeName], color: yellow, fontStyle: 'italic' },
|
|
573
|
-
{ tag: [tags.attributeValue], color: lightGreen },
|
|
574
|
-
{ tag: [tags.propertyName], color: lightBlue },
|
|
575
|
-
{ tag: [tags.className], color: lightPink, fontStyle: 'italic' },
|
|
576
|
-
{ tag: [/*@__PURE__*/tags.standard(tags.propertyName)], color: supportTeal },
|
|
577
540
|
// Entity names
|
|
578
541
|
{ tag: tags.labelName, color: yellow },
|
|
579
542
|
{ tag: tags.escape, color: yellow },
|