@uiw/codemirror-themes 4.8.1 → 4.9.0
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 +35 -33
- package/cjs/index.d.ts +1 -1
- package/cjs/index.js +2 -2
- package/cjs/index.js.map +2 -2
- package/esm/index.d.ts +1 -1
- package/esm/index.js +1 -3
- package/esm/index.js.map +2 -2
- package/package.json +3 -6
- package/src/index.tsx +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
# Codemirror Themes
|
|
1
|
+
# Custom Codemirror Themes
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@uiw/codemirror-themes)
|
|
2
4
|
|
|
3
5
|
Themes for CodeMirror.
|
|
4
6
|
|
|
@@ -29,31 +31,31 @@ const myTheme = createTheme({
|
|
|
29
31
|
gutterForeground: '#8a919966',
|
|
30
32
|
},
|
|
31
33
|
styles: [
|
|
32
|
-
{ tag: t.comment, color: '#787b8099'
|
|
33
|
-
{ tag: t.variableName, color: '#0080ff'
|
|
34
|
-
{ tag: [t.string, t.special(t.brace)], color: '#5c6166'
|
|
35
|
-
{ tag: t.number, color: '#5c6166'
|
|
36
|
-
{ tag: t.bool, color: '#5c6166'
|
|
37
|
-
{ tag: t.null, color: '#5c6166'
|
|
38
|
-
{ tag: t.keyword, color: '#5c6166'
|
|
39
|
-
{ tag: t.operator, color: '#5c6166'
|
|
40
|
-
{ tag: t.className, color: '#5c6166'
|
|
41
|
-
{ tag: t.definition(t.typeName), color: '#5c6166'
|
|
42
|
-
{ tag: t.typeName, color: '#5c6166'
|
|
43
|
-
{ tag: t.angleBracket, color: '#5c6166'
|
|
44
|
-
{ tag: t.tagName, color: '#5c6166'
|
|
45
|
-
{ tag: t.attributeName, color: '#5c6166'
|
|
34
|
+
{ tag: t.comment, color: '#787b8099' },
|
|
35
|
+
{ tag: t.variableName, color: '#0080ff' },
|
|
36
|
+
{ tag: [t.string, t.special(t.brace)], color: '#5c6166' },
|
|
37
|
+
{ tag: t.number, color: '#5c6166' },
|
|
38
|
+
{ tag: t.bool, color: '#5c6166' },
|
|
39
|
+
{ tag: t.null, color: '#5c6166' },
|
|
40
|
+
{ tag: t.keyword, color: '#5c6166' },
|
|
41
|
+
{ tag: t.operator, color: '#5c6166' },
|
|
42
|
+
{ tag: t.className, color: '#5c6166' },
|
|
43
|
+
{ tag: t.definition(t.typeName), color: '#5c6166' },
|
|
44
|
+
{ tag: t.typeName, color: '#5c6166' },
|
|
45
|
+
{ tag: t.angleBracket, color: '#5c6166' },
|
|
46
|
+
{ tag: t.tagName, color: '#5c6166' },
|
|
47
|
+
{ tag: t.attributeName, color: '#5c6166' },
|
|
46
48
|
],
|
|
47
49
|
});
|
|
48
50
|
|
|
49
51
|
const state = EditorState.create({
|
|
50
|
-
|
|
51
|
-
|
|
52
|
+
doc: 'my source code',
|
|
53
|
+
extensions: [myTheme, javascript({ jsx: true })],
|
|
52
54
|
});
|
|
53
55
|
|
|
54
56
|
const view = new EditorView({
|
|
55
|
-
|
|
56
|
-
|
|
57
|
+
parent: document.querySelector('#editor'),
|
|
58
|
+
state,
|
|
57
59
|
});
|
|
58
60
|
```
|
|
59
61
|
|
|
@@ -75,20 +77,20 @@ const myTheme = createTheme({
|
|
|
75
77
|
gutterForeground: '#8a919966',
|
|
76
78
|
},
|
|
77
79
|
styles: [
|
|
78
|
-
{ tag: t.comment, color: '#787b8099'
|
|
79
|
-
{ tag: t.variableName, color: '#0080ff'
|
|
80
|
-
{ tag: [t.string, t.special(t.brace)], color: '#5c6166'
|
|
81
|
-
{ tag: t.number, color: '#5c6166'
|
|
82
|
-
{ tag: t.bool, color: '#5c6166'
|
|
83
|
-
{ tag: t.null, color: '#5c6166'
|
|
84
|
-
{ tag: t.keyword, color: '#5c6166'
|
|
85
|
-
{ tag: t.operator, color: '#5c6166'
|
|
86
|
-
{ tag: t.className, color: '#5c6166'
|
|
87
|
-
{ tag: t.definition(t.typeName), color: '#5c6166'
|
|
88
|
-
{ tag: t.typeName, color: '#5c6166'
|
|
89
|
-
{ tag: t.angleBracket, color: '#5c6166'
|
|
90
|
-
{ tag: t.tagName, color: '#5c6166'
|
|
91
|
-
{ tag: t.attributeName, color: '#5c6166'
|
|
80
|
+
{ tag: t.comment, color: '#787b8099' },
|
|
81
|
+
{ tag: t.variableName, color: '#0080ff' },
|
|
82
|
+
{ tag: [t.string, t.special(t.brace)], color: '#5c6166' },
|
|
83
|
+
{ tag: t.number, color: '#5c6166' },
|
|
84
|
+
{ tag: t.bool, color: '#5c6166' },
|
|
85
|
+
{ tag: t.null, color: '#5c6166' },
|
|
86
|
+
{ tag: t.keyword, color: '#5c6166' },
|
|
87
|
+
{ tag: t.operator, color: '#5c6166' },
|
|
88
|
+
{ tag: t.className, color: '#5c6166' },
|
|
89
|
+
{ tag: t.definition(t.typeName), color: '#5c6166' },
|
|
90
|
+
{ tag: t.typeName, color: '#5c6166' },
|
|
91
|
+
{ tag: t.angleBracket, color: '#5c6166' },
|
|
92
|
+
{ tag: t.tagName, color: '#5c6166' },
|
|
93
|
+
{ tag: t.attributeName, color: '#5c6166' },
|
|
92
94
|
],
|
|
93
95
|
});
|
|
94
96
|
|
package/cjs/index.d.ts
CHANGED
|
@@ -29,5 +29,5 @@ export interface Settings {
|
|
|
29
29
|
/** Text color inside gutter. */
|
|
30
30
|
gutterForeground: string;
|
|
31
31
|
}
|
|
32
|
-
declare const createTheme: ({ dark, settings, styles }: CreateThemeOptions) => Extension;
|
|
32
|
+
export declare const createTheme: ({ dark, settings, styles }: CreateThemeOptions) => Extension;
|
|
33
33
|
export default createTheme;
|
package/cjs/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports["default"] = void 0;
|
|
6
|
+
exports["default"] = exports.createTheme = void 0;
|
|
7
7
|
|
|
8
8
|
var _view = require("@codemirror/view");
|
|
9
9
|
|
|
@@ -48,7 +48,7 @@ var createTheme = function createTheme(_ref) {
|
|
|
48
48
|
return extension;
|
|
49
49
|
};
|
|
50
50
|
|
|
51
|
+
exports.createTheme = createTheme;
|
|
51
52
|
var _default = createTheme;
|
|
52
53
|
exports["default"] = _default;
|
|
53
|
-
module.exports = exports.default;
|
|
54
54
|
//# sourceMappingURL=index.js.map
|
package/cjs/index.js.map
CHANGED
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"../src/index.tsx"
|
|
29
29
|
],
|
|
30
30
|
"sourcesContent": [
|
|
31
|
-
"import { EditorView } from '@codemirror/view';\nimport { Extension } from '@codemirror/state';\nimport { HighlightStyle, TagStyle, syntaxHighlighting } from '@codemirror/language';\n\nexport interface CreateThemeOptions {\n /**\n * Theme inheritance. Determines which styles CodeMirror will apply by default.\n */\n dark: Theme;\n /**\n * Settings to customize the look of the editor, like background, gutter, selection and others.\n */\n settings: Settings;\n /** Syntax highlighting styles. */\n styles: TagStyle[];\n}\n\ntype Theme = 'light' | 'dark';\n\nexport interface Settings {\n /** Editor background. */\n background: string;\n /** Default text color. */\n foreground: string;\n /** Caret color. */\n caret: string;\n /** Selection background. */\n selection: string;\n /** Background of highlighted lines. */\n lineHighlight: string;\n /** Gutter background. */\n gutterBackground: string;\n /** Text color inside gutter. */\n gutterForeground: string;\n}\n\
|
|
31
|
+
"import { EditorView } from '@codemirror/view';\nimport { Extension } from '@codemirror/state';\nimport { HighlightStyle, TagStyle, syntaxHighlighting } from '@codemirror/language';\n\nexport interface CreateThemeOptions {\n /**\n * Theme inheritance. Determines which styles CodeMirror will apply by default.\n */\n dark: Theme;\n /**\n * Settings to customize the look of the editor, like background, gutter, selection and others.\n */\n settings: Settings;\n /** Syntax highlighting styles. */\n styles: TagStyle[];\n}\n\ntype Theme = 'light' | 'dark';\n\nexport interface Settings {\n /** Editor background. */\n background: string;\n /** Default text color. */\n foreground: string;\n /** Caret color. */\n caret: string;\n /** Selection background. */\n selection: string;\n /** Background of highlighted lines. */\n lineHighlight: string;\n /** Gutter background. */\n gutterBackground: string;\n /** Text color inside gutter. */\n gutterForeground: string;\n}\n\nexport const createTheme = ({ dark, settings, styles }: CreateThemeOptions): Extension => {\n const theme = EditorView.theme(\n {\n '&': {\n backgroundColor: settings.background,\n color: settings.foreground,\n },\n '.cm-content': {\n caretColor: settings.caret,\n },\n '.cm-cursor, .cm-dropCursor': {\n borderLeftColor: settings.caret,\n },\n '&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {\n backgroundColor: settings.selection,\n },\n '.cm-activeLine': {\n backgroundColor: settings.lineHighlight,\n },\n '.cm-gutters': {\n backgroundColor: settings.gutterBackground,\n color: settings.gutterForeground,\n },\n '.cm-activeLineGutter': {\n backgroundColor: settings.lineHighlight,\n },\n },\n {\n dark: dark === 'dark',\n },\n );\n\n const highlightStyle = HighlightStyle.define(styles);\n const extension = [theme, syntaxHighlighting(highlightStyle)];\n\n return extension;\n};\n\nexport default createTheme;\n"
|
|
32
32
|
],
|
|
33
|
-
"mappings": ";;;;;;;AAAA;;AAEA;;
|
|
33
|
+
"mappings": ";;;;;;;AAAA;;AAEA;;AAkCO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAA+D;EAAA,IAA5DC,IAA4D,QAA5DA,IAA4D;EAAA,IAAtDC,QAAsD,QAAtDA,QAAsD;EAAA,IAA5CC,MAA4C,QAA5CA,MAA4C;;EACxF,IAAMC,KAAK,GAAGC,gBAAA,CAAWD,KAAX,CACZ;IACE,KAAK;MACHE,eAAe,EAAEJ,QAAQ,CAACK,UADvB;MAEHC,KAAK,EAAEN,QAAQ,CAACO;IAFb,CADP;IAKE,eAAe;MACbC,UAAU,EAAER,QAAQ,CAACS;IADR,CALjB;IAQE,8BAA8B;MAC5BC,eAAe,EAAEV,QAAQ,CAACS;IADE,CARhC;IAWE,0FAA0F;MACxFL,eAAe,EAAEJ,QAAQ,CAACW;IAD8D,CAX5F;IAcE,kBAAkB;MAChBP,eAAe,EAAEJ,QAAQ,CAACY;IADV,CAdpB;IAiBE,eAAe;MACbR,eAAe,EAAEJ,QAAQ,CAACa,gBADb;MAEbP,KAAK,EAAEN,QAAQ,CAACc;IAFH,CAjBjB;IAqBE,wBAAwB;MACtBV,eAAe,EAAEJ,QAAQ,CAACY;IADJ;EArB1B,CADY,EA0BZ;IACEb,IAAI,EAAEA,IAAI,KAAK;EADjB,CA1BY,CAAd;;EA+BA,IAAMgB,cAAc,GAAGC,wBAAA,CAAeC,MAAf,CAAsBhB,MAAtB,CAAvB;;EACA,IAAMiB,SAAS,GAAG,CAAChB,KAAD,EAAQ,IAAAiB,4BAAA,EAAmBJ,cAAnB,CAAR,CAAlB;EAEA,OAAOG,SAAP;AACD,CApCM;;;eAsCQpB,W"
|
|
34
34
|
}
|
package/esm/index.d.ts
CHANGED
|
@@ -29,5 +29,5 @@ export interface Settings {
|
|
|
29
29
|
/** Text color inside gutter. */
|
|
30
30
|
gutterForeground: string;
|
|
31
31
|
}
|
|
32
|
-
declare const createTheme: ({ dark, settings, styles }: CreateThemeOptions) => Extension;
|
|
32
|
+
export declare const createTheme: ({ dark, settings, styles }: CreateThemeOptions) => Extension;
|
|
33
33
|
export default createTheme;
|
package/esm/index.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { EditorView } from '@codemirror/view';
|
|
2
2
|
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
|
|
3
|
-
|
|
4
|
-
var createTheme = _ref => {
|
|
3
|
+
export var createTheme = _ref => {
|
|
5
4
|
var {
|
|
6
5
|
dark,
|
|
7
6
|
settings,
|
|
@@ -38,6 +37,5 @@ var createTheme = _ref => {
|
|
|
38
37
|
var extension = [theme, syntaxHighlighting(highlightStyle)];
|
|
39
38
|
return extension;
|
|
40
39
|
};
|
|
41
|
-
|
|
42
40
|
export default createTheme;
|
|
43
41
|
//# sourceMappingURL=index.js.map
|
package/esm/index.js.map
CHANGED
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"../src/index.tsx"
|
|
29
29
|
],
|
|
30
30
|
"sourcesContent": [
|
|
31
|
-
"import { EditorView } from '@codemirror/view';\nimport { Extension } from '@codemirror/state';\nimport { HighlightStyle, TagStyle, syntaxHighlighting } from '@codemirror/language';\n\nexport interface CreateThemeOptions {\n /**\n * Theme inheritance. Determines which styles CodeMirror will apply by default.\n */\n dark: Theme;\n /**\n * Settings to customize the look of the editor, like background, gutter, selection and others.\n */\n settings: Settings;\n /** Syntax highlighting styles. */\n styles: TagStyle[];\n}\n\ntype Theme = 'light' | 'dark';\n\nexport interface Settings {\n /** Editor background. */\n background: string;\n /** Default text color. */\n foreground: string;\n /** Caret color. */\n caret: string;\n /** Selection background. */\n selection: string;\n /** Background of highlighted lines. */\n lineHighlight: string;\n /** Gutter background. */\n gutterBackground: string;\n /** Text color inside gutter. */\n gutterForeground: string;\n}\n\
|
|
31
|
+
"import { EditorView } from '@codemirror/view';\nimport { Extension } from '@codemirror/state';\nimport { HighlightStyle, TagStyle, syntaxHighlighting } from '@codemirror/language';\n\nexport interface CreateThemeOptions {\n /**\n * Theme inheritance. Determines which styles CodeMirror will apply by default.\n */\n dark: Theme;\n /**\n * Settings to customize the look of the editor, like background, gutter, selection and others.\n */\n settings: Settings;\n /** Syntax highlighting styles. */\n styles: TagStyle[];\n}\n\ntype Theme = 'light' | 'dark';\n\nexport interface Settings {\n /** Editor background. */\n background: string;\n /** Default text color. */\n foreground: string;\n /** Caret color. */\n caret: string;\n /** Selection background. */\n selection: string;\n /** Background of highlighted lines. */\n lineHighlight: string;\n /** Gutter background. */\n gutterBackground: string;\n /** Text color inside gutter. */\n gutterForeground: string;\n}\n\nexport const createTheme = ({ dark, settings, styles }: CreateThemeOptions): Extension => {\n const theme = EditorView.theme(\n {\n '&': {\n backgroundColor: settings.background,\n color: settings.foreground,\n },\n '.cm-content': {\n caretColor: settings.caret,\n },\n '.cm-cursor, .cm-dropCursor': {\n borderLeftColor: settings.caret,\n },\n '&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection': {\n backgroundColor: settings.selection,\n },\n '.cm-activeLine': {\n backgroundColor: settings.lineHighlight,\n },\n '.cm-gutters': {\n backgroundColor: settings.gutterBackground,\n color: settings.gutterForeground,\n },\n '.cm-activeLineGutter': {\n backgroundColor: settings.lineHighlight,\n },\n },\n {\n dark: dark === 'dark',\n },\n );\n\n const highlightStyle = HighlightStyle.define(styles);\n const extension = [theme, syntaxHighlighting(highlightStyle)];\n\n return extension;\n};\n\nexport default createTheme;\n"
|
|
32
32
|
],
|
|
33
|
-
"mappings": "AAAA,SAASA,UAAT,QAA2B,kBAA3B;AAEA,SAASC,cAAT,EAAmCC,kBAAnC,QAA6D,sBAA7D
|
|
33
|
+
"mappings": "AAAA,SAASA,UAAT,QAA2B,kBAA3B;AAEA,SAASC,cAAT,EAAmCC,kBAAnC,QAA6D,sBAA7D;AAkCA,OAAO,IAAMC,WAAW,GAAG,QAA+D;EAAA,IAA9D;IAAEC,IAAF;IAAQC,QAAR;IAAkBC;EAAlB,CAA8D;EACxF,IAAMC,KAAK,GAAGP,UAAU,CAACO,KAAX,CACZ;IACE,KAAK;MACHC,eAAe,EAAEH,QAAQ,CAACI,UADvB;MAEHC,KAAK,EAAEL,QAAQ,CAACM;IAFb,CADP;IAKE,eAAe;MACbC,UAAU,EAAEP,QAAQ,CAACQ;IADR,CALjB;IAQE,8BAA8B;MAC5BC,eAAe,EAAET,QAAQ,CAACQ;IADE,CARhC;IAWE,0FAA0F;MACxFL,eAAe,EAAEH,QAAQ,CAACU;IAD8D,CAX5F;IAcE,kBAAkB;MAChBP,eAAe,EAAEH,QAAQ,CAACW;IADV,CAdpB;IAiBE,eAAe;MACbR,eAAe,EAAEH,QAAQ,CAACY,gBADb;MAEbP,KAAK,EAAEL,QAAQ,CAACa;IAFH,CAjBjB;IAqBE,wBAAwB;MACtBV,eAAe,EAAEH,QAAQ,CAACW;IADJ;EArB1B,CADY,EA0BZ;IACEZ,IAAI,EAAEA,IAAI,KAAK;EADjB,CA1BY,CAAd;EA+BA,IAAMe,cAAc,GAAGlB,cAAc,CAACmB,MAAf,CAAsBd,MAAtB,CAAvB;EACA,IAAMe,SAAS,GAAG,CAACd,KAAD,EAAQL,kBAAkB,CAACiB,cAAD,CAA1B,CAAlB;EAEA,OAAOE,SAAP;AACD,CApCM;AAsCP,eAAelB,WAAf"
|
|
34
34
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uiw/codemirror-themes",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.9.0",
|
|
4
4
|
"description": "Themes for CodeMirror.",
|
|
5
5
|
"homepage": "https://uiwjs.github.io/react-codemirror",
|
|
6
6
|
"author": "kenny wong <wowohoo@qq.com>",
|
|
@@ -20,13 +20,10 @@
|
|
|
20
20
|
"esm",
|
|
21
21
|
"cjs"
|
|
22
22
|
],
|
|
23
|
-
"peerDependencies": {
|
|
24
|
-
"@babel/runtime": ">=7.11.0"
|
|
25
|
-
},
|
|
26
23
|
"dependencies": {
|
|
27
24
|
"@codemirror/language": "^6.0.0",
|
|
28
|
-
"@codemirror/
|
|
29
|
-
"@codemirror/
|
|
25
|
+
"@codemirror/state": "^6.0.0",
|
|
26
|
+
"@codemirror/view": "^6.0.0"
|
|
30
27
|
},
|
|
31
28
|
"keywords": [
|
|
32
29
|
"codemirror",
|
package/src/index.tsx
CHANGED
|
@@ -34,7 +34,7 @@ export interface Settings {
|
|
|
34
34
|
gutterForeground: string;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
const createTheme = ({ dark, settings, styles }: CreateThemeOptions): Extension => {
|
|
37
|
+
export const createTheme = ({ dark, settings, styles }: CreateThemeOptions): Extension => {
|
|
38
38
|
const theme = EditorView.theme(
|
|
39
39
|
{
|
|
40
40
|
'&': {
|