@cyclone-ui/shiki 0.0.14 → 0.0.15
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/CHANGELOG.md +6 -0
- package/dist/dark/INSTALL.md +7 -9
- package/dist/dark/theme.json +11 -43
- package/dist/dark-dimmed/INSTALL.md +7 -9
- package/dist/dark-dimmed/theme.json +11 -43
- package/dist/dark-high-contrast/INSTALL.md +7 -9
- package/dist/dark-high-contrast/theme.json +11 -43
- package/dist/light/INSTALL.md +7 -9
- package/dist/light/theme.json +11 -43
- package/dist/light-dimmed/INSTALL.md +7 -9
- package/dist/light-dimmed/theme.json +11 -43
- package/dist/light-high-contrast/INSTALL.md +7 -9
- package/dist/light-high-contrast/theme.json +11 -43
- package/dist/src/dark/INSTALL.md +43 -0
- package/dist/src/dark/theme.json +93 -0
- package/dist/src/dark-dimmed/INSTALL.md +43 -0
- package/dist/src/dark-dimmed/theme.json +93 -0
- package/dist/src/dark-high-contrast/INSTALL.md +43 -0
- package/dist/src/dark-high-contrast/theme.json +93 -0
- package/dist/src/light/INSTALL.md +43 -0
- package/dist/src/light/theme.json +93 -0
- package/dist/src/light-dimmed/INSTALL.md +43 -0
- package/dist/src/light-dimmed/theme.json +93 -0
- package/dist/src/light-high-contrast/INSTALL.md +43 -0
- package/dist/src/light-high-contrast/theme.json +93 -0
- package/package.json +2 -2
- package/src/dark/INSTALL.md +7 -9
- package/src/dark/theme.json +11 -43
- package/src/dark-dimmed/INSTALL.md +7 -9
- package/src/dark-dimmed/theme.json +11 -43
- package/src/dark-high-contrast/INSTALL.md +7 -9
- package/src/dark-high-contrast/theme.json +11 -43
- package/src/light/INSTALL.md +7 -9
- package/src/light/theme.json +11 -43
- package/src/light-dimmed/INSTALL.md +7 -9
- package/src/light-dimmed/theme.json +11 -43
- package/src/light-high-contrast/INSTALL.md +7 -9
- package/src/light-high-contrast/theme.json +11 -43
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
# Installing Cyclone UI (Light)
|
|
2
|
+
|
|
3
|
+
Generated by `@razorwind/shiki`.
|
|
4
|
+
|
|
5
|
+
## Files
|
|
6
|
+
|
|
7
|
+
- `theme.json` — Cyclone Light (theme id: `cyclone-light`)
|
|
8
|
+
|
|
9
|
+
## Setup
|
|
10
|
+
|
|
11
|
+
1. Copy or import the generated JSON into your app (paths depend on your bundler).
|
|
12
|
+
|
|
13
|
+
2. Register themes when creating a Shiki highlighter:
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import { createHighlighter } from "shiki"
|
|
17
|
+
import theme from "./theme.json"
|
|
18
|
+
|
|
19
|
+
const highlighter = await createHighlighter({
|
|
20
|
+
themes: [theme],
|
|
21
|
+
langs: ["javascript"]
|
|
22
|
+
})
|
|
23
|
+
|
|
24
|
+
const html = highlighter.codeToHtml("const x = 1", {
|
|
25
|
+
lang: "javascript",
|
|
26
|
+
theme: "cyclone-light"
|
|
27
|
+
})
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Or load at runtime:
|
|
31
|
+
|
|
32
|
+
```ts
|
|
33
|
+
import { readFile } from "node:fs/promises"
|
|
34
|
+
|
|
35
|
+
const theme = JSON.parse(await readFile("./theme.json", "utf8"))
|
|
36
|
+
await highlighter.loadTheme(theme)
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Select / load theme
|
|
40
|
+
|
|
41
|
+
Pass the theme id to `codeToHtml`, `codeToTokens`, or `getTokenStyle`:
|
|
42
|
+
|
|
43
|
+
- `cyclone-light` — Cyclone Light
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "cyclone-light",
|
|
3
|
+
"settings": [
|
|
4
|
+
{
|
|
5
|
+
"scope": ["comment", "punctuation.definition.comment"],
|
|
6
|
+
"settings": {
|
|
7
|
+
"foreground": "#959698",
|
|
8
|
+
"fontStyle": "italic"
|
|
9
|
+
}
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"scope": ["string", "constant.other.symbol"],
|
|
13
|
+
"settings": {
|
|
14
|
+
"foreground": "#216b53"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"scope": ["constant", "constant.numeric", "constant.language"],
|
|
19
|
+
"settings": {
|
|
20
|
+
"foreground": "#765417"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"scope": ["keyword", "storage", "storage.type"],
|
|
25
|
+
"settings": {
|
|
26
|
+
"foreground": "#2055b3"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"scope": ["entity.name.function", "support.function"],
|
|
31
|
+
"settings": {
|
|
32
|
+
"foreground": "#2055b3"
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"scope": [
|
|
37
|
+
"entity.name.type",
|
|
38
|
+
"entity.other.inherited-class",
|
|
39
|
+
"support.type"
|
|
40
|
+
],
|
|
41
|
+
"settings": {
|
|
42
|
+
"foreground": "#594395"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"scope": ["entity.name.tag", "meta.tag"],
|
|
47
|
+
"settings": {
|
|
48
|
+
"foreground": "#2055b3"
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"scope": ["entity.other.attribute-name", "support.constant"],
|
|
53
|
+
"settings": {
|
|
54
|
+
"foreground": "#2055b3"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"scope": ["variable", "identifier"],
|
|
59
|
+
"settings": {
|
|
60
|
+
"foreground": "#555659"
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"scope": ["punctuation", "meta.brace"],
|
|
65
|
+
"settings": {
|
|
66
|
+
"foreground": "#959698"
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"scope": ["invalid", "invalid.illegal"],
|
|
71
|
+
"settings": {
|
|
72
|
+
"foreground": "#8e223e"
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
],
|
|
76
|
+
"displayName": "Cyclone Light",
|
|
77
|
+
"type": "light",
|
|
78
|
+
"fg": "#242528",
|
|
79
|
+
"bg": "#eaeaea",
|
|
80
|
+
"colors": {
|
|
81
|
+
"editor.background": "#eaeaea",
|
|
82
|
+
"editor.foreground": "#242528",
|
|
83
|
+
"editorCursor.foreground": "#2055b3",
|
|
84
|
+
"editor.selectionBackground": "#242528",
|
|
85
|
+
"editor.selectionForeground": "#eaeaea",
|
|
86
|
+
"editor.inactiveSelectionBackground": "#f1f1f1",
|
|
87
|
+
"editorLineNumber.foreground": "#959698",
|
|
88
|
+
"editorLineNumber.activeForeground": "#555659",
|
|
89
|
+
"editorIndentGuide.background1": "#c0c0c1",
|
|
90
|
+
"editorIndentGuide.activeBackground1": "#959698",
|
|
91
|
+
"editorWhitespace.foreground": "#959698"
|
|
92
|
+
}
|
|
93
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
# Installing Cyclone UI (Light Dimmed)
|
|
2
|
+
|
|
3
|
+
Generated by `@razorwind/shiki`.
|
|
4
|
+
|
|
5
|
+
## Files
|
|
6
|
+
|
|
7
|
+
- `theme.json` — Cyclone Light (theme id: `cyclone-light-dimmed`)
|
|
8
|
+
|
|
9
|
+
## Setup
|
|
10
|
+
|
|
11
|
+
1. Copy or import the generated JSON into your app (paths depend on your bundler).
|
|
12
|
+
|
|
13
|
+
2. Register themes when creating a Shiki highlighter:
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import { createHighlighter } from "shiki"
|
|
17
|
+
import theme from "./theme.json"
|
|
18
|
+
|
|
19
|
+
const highlighter = await createHighlighter({
|
|
20
|
+
themes: [theme],
|
|
21
|
+
langs: ["javascript"]
|
|
22
|
+
})
|
|
23
|
+
|
|
24
|
+
const html = highlighter.codeToHtml("const x = 1", {
|
|
25
|
+
lang: "javascript",
|
|
26
|
+
theme: "cyclone-light-dimmed"
|
|
27
|
+
})
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Or load at runtime:
|
|
31
|
+
|
|
32
|
+
```ts
|
|
33
|
+
import { readFile } from "node:fs/promises"
|
|
34
|
+
|
|
35
|
+
const theme = JSON.parse(await readFile("./theme.json", "utf8"))
|
|
36
|
+
await highlighter.loadTheme(theme)
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Select / load theme
|
|
40
|
+
|
|
41
|
+
Pass the theme id to `codeToHtml`, `codeToTokens`, or `getTokenStyle`:
|
|
42
|
+
|
|
43
|
+
- `cyclone-light-dimmed` — Cyclone Light
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "cyclone-light-dimmed",
|
|
3
|
+
"settings": [
|
|
4
|
+
{
|
|
5
|
+
"scope": ["comment", "punctuation.definition.comment"],
|
|
6
|
+
"settings": {
|
|
7
|
+
"foreground": "#8f8f90",
|
|
8
|
+
"fontStyle": "italic"
|
|
9
|
+
}
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"scope": ["string", "constant.other.symbol"],
|
|
13
|
+
"settings": {
|
|
14
|
+
"foreground": "#3e7160"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"scope": ["constant", "constant.numeric", "constant.language"],
|
|
19
|
+
"settings": {
|
|
20
|
+
"foreground": "#786137"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"scope": ["keyword", "storage", "storage.type"],
|
|
25
|
+
"settings": {
|
|
26
|
+
"foreground": "#45649b"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"scope": ["entity.name.function", "support.function"],
|
|
31
|
+
"settings": {
|
|
32
|
+
"foreground": "#45649b"
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"scope": [
|
|
37
|
+
"entity.name.type",
|
|
38
|
+
"entity.other.inherited-class",
|
|
39
|
+
"support.type"
|
|
40
|
+
],
|
|
41
|
+
"settings": {
|
|
42
|
+
"foreground": "#675a8a"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"scope": ["entity.name.tag", "meta.tag"],
|
|
47
|
+
"settings": {
|
|
48
|
+
"foreground": "#45649b"
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"scope": ["entity.other.attribute-name", "support.constant"],
|
|
53
|
+
"settings": {
|
|
54
|
+
"foreground": "#45649b"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"scope": ["variable", "identifier"],
|
|
59
|
+
"settings": {
|
|
60
|
+
"foreground": "#626364"
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"scope": ["punctuation", "meta.brace"],
|
|
65
|
+
"settings": {
|
|
66
|
+
"foreground": "#8f8f90"
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"scope": ["invalid", "invalid.illegal"],
|
|
71
|
+
"settings": {
|
|
72
|
+
"foreground": "#864254"
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
],
|
|
76
|
+
"displayName": "Cyclone Light",
|
|
77
|
+
"type": "lightDimmed",
|
|
78
|
+
"fg": "#3f4043",
|
|
79
|
+
"bg": "#cacaca",
|
|
80
|
+
"colors": {
|
|
81
|
+
"editor.background": "#cacaca",
|
|
82
|
+
"editor.foreground": "#3f4043",
|
|
83
|
+
"editorCursor.foreground": "#45649b",
|
|
84
|
+
"editor.selectionBackground": "#3f4043",
|
|
85
|
+
"editor.selectionForeground": "#cacaca",
|
|
86
|
+
"editor.inactiveSelectionBackground": "#cfcfcf",
|
|
87
|
+
"editorLineNumber.foreground": "#8f8f90",
|
|
88
|
+
"editorLineNumber.activeForeground": "#626364",
|
|
89
|
+
"editorIndentGuide.background1": "#adadad",
|
|
90
|
+
"editorIndentGuide.activeBackground1": "#8f8f90",
|
|
91
|
+
"editorWhitespace.foreground": "#8f8f90"
|
|
92
|
+
}
|
|
93
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
# Installing Cyclone UI (Light High Contrast)
|
|
2
|
+
|
|
3
|
+
Generated by `@razorwind/shiki`.
|
|
4
|
+
|
|
5
|
+
## Files
|
|
6
|
+
|
|
7
|
+
- `theme.json` — Cyclone Light (theme id: `cyclone-light-high-contrast`)
|
|
8
|
+
|
|
9
|
+
## Setup
|
|
10
|
+
|
|
11
|
+
1. Copy or import the generated JSON into your app (paths depend on your bundler).
|
|
12
|
+
|
|
13
|
+
2. Register themes when creating a Shiki highlighter:
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import { createHighlighter } from "shiki"
|
|
17
|
+
import theme from "./theme.json"
|
|
18
|
+
|
|
19
|
+
const highlighter = await createHighlighter({
|
|
20
|
+
themes: [theme],
|
|
21
|
+
langs: ["javascript"]
|
|
22
|
+
})
|
|
23
|
+
|
|
24
|
+
const html = highlighter.codeToHtml("const x = 1", {
|
|
25
|
+
lang: "javascript",
|
|
26
|
+
theme: "cyclone-light-high-contrast"
|
|
27
|
+
})
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Or load at runtime:
|
|
31
|
+
|
|
32
|
+
```ts
|
|
33
|
+
import { readFile } from "node:fs/promises"
|
|
34
|
+
|
|
35
|
+
const theme = JSON.parse(await readFile("./theme.json", "utf8"))
|
|
36
|
+
await highlighter.loadTheme(theme)
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Select / load theme
|
|
40
|
+
|
|
41
|
+
Pass the theme id to `codeToHtml`, `codeToTokens`, or `getTokenStyle`:
|
|
42
|
+
|
|
43
|
+
- `cyclone-light-high-contrast` — Cyclone Light
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "cyclone-light-high-contrast",
|
|
3
|
+
"settings": [
|
|
4
|
+
{
|
|
5
|
+
"scope": ["comment", "punctuation.definition.comment"],
|
|
6
|
+
"settings": {
|
|
7
|
+
"foreground": "#9a9fa7",
|
|
8
|
+
"fontStyle": "italic"
|
|
9
|
+
}
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
"scope": ["string", "constant.other.symbol"],
|
|
13
|
+
"settings": {
|
|
14
|
+
"foreground": "#0a4e38"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"scope": ["constant", "constant.numeric", "constant.language"],
|
|
19
|
+
"settings": {
|
|
20
|
+
"foreground": "#583902"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"scope": ["keyword", "storage", "storage.type"],
|
|
25
|
+
"settings": {
|
|
26
|
+
"foreground": "#0145be"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"scope": ["entity.name.function", "support.function"],
|
|
31
|
+
"settings": {
|
|
32
|
+
"foreground": "#0145be"
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"scope": [
|
|
37
|
+
"entity.name.type",
|
|
38
|
+
"entity.other.inherited-class",
|
|
39
|
+
"support.type"
|
|
40
|
+
],
|
|
41
|
+
"settings": {
|
|
42
|
+
"foreground": "#492b9b"
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"scope": ["entity.name.tag", "meta.tag"],
|
|
47
|
+
"settings": {
|
|
48
|
+
"foreground": "#0145be"
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"scope": ["entity.other.attribute-name", "support.constant"],
|
|
53
|
+
"settings": {
|
|
54
|
+
"foreground": "#0145be"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"scope": ["variable", "identifier"],
|
|
59
|
+
"settings": {
|
|
60
|
+
"foreground": "#3f424a"
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"scope": ["punctuation", "meta.brace"],
|
|
65
|
+
"settings": {
|
|
66
|
+
"foreground": "#9a9fa7"
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"scope": ["invalid", "invalid.illegal"],
|
|
71
|
+
"settings": {
|
|
72
|
+
"foreground": "#840929"
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
],
|
|
76
|
+
"displayName": "Cyclone Light",
|
|
77
|
+
"type": "lightHighContrast",
|
|
78
|
+
"fg": "#000000",
|
|
79
|
+
"bg": "#ffffff",
|
|
80
|
+
"colors": {
|
|
81
|
+
"editor.background": "#ffffff",
|
|
82
|
+
"editor.foreground": "#000000",
|
|
83
|
+
"editorCursor.foreground": "#0145be",
|
|
84
|
+
"editor.selectionBackground": "#000000",
|
|
85
|
+
"editor.selectionForeground": "#ffffff",
|
|
86
|
+
"editor.inactiveSelectionBackground": "#ffffff",
|
|
87
|
+
"editorLineNumber.foreground": "#9a9fa7",
|
|
88
|
+
"editorLineNumber.activeForeground": "#3f424a",
|
|
89
|
+
"editorIndentGuide.background1": "#dcdce0",
|
|
90
|
+
"editorIndentGuide.activeBackground1": "#9a9fa7",
|
|
91
|
+
"editorWhitespace.foreground": "#9a9fa7"
|
|
92
|
+
}
|
|
93
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cyclone-ui/shiki",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.15",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Cyclone UI Shiki themes package",
|
|
6
6
|
"repository": {
|
|
@@ -14,5 +14,5 @@
|
|
|
14
14
|
"./package.json": "./package.json"
|
|
15
15
|
},
|
|
16
16
|
"publishConfig": { "access": "public" },
|
|
17
|
-
"gitHead": "
|
|
17
|
+
"gitHead": "13806869dab99bab5aca14eb5d6d138c42ae7475"
|
|
18
18
|
}
|
package/src/dark/INSTALL.md
CHANGED
|
@@ -13,29 +13,27 @@ Generated by `@razorwind/shiki`.
|
|
|
13
13
|
2. Register themes when creating a Shiki highlighter:
|
|
14
14
|
|
|
15
15
|
```ts
|
|
16
|
-
import { createHighlighter } from "shiki"
|
|
17
|
-
import theme from "./theme.json"
|
|
16
|
+
import { createHighlighter } from "shiki"
|
|
17
|
+
import theme from "./theme.json"
|
|
18
18
|
|
|
19
19
|
const highlighter = await createHighlighter({
|
|
20
20
|
themes: [theme],
|
|
21
21
|
langs: ["javascript"]
|
|
22
|
-
})
|
|
22
|
+
})
|
|
23
23
|
|
|
24
24
|
const html = highlighter.codeToHtml("const x = 1", {
|
|
25
25
|
lang: "javascript",
|
|
26
26
|
theme: "cyclone-dark"
|
|
27
|
-
})
|
|
27
|
+
})
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
Or load at runtime:
|
|
31
31
|
|
|
32
32
|
```ts
|
|
33
|
-
import { readFile } from "node:fs/promises"
|
|
33
|
+
import { readFile } from "node:fs/promises"
|
|
34
34
|
|
|
35
|
-
const theme = JSON.parse(
|
|
36
|
-
|
|
37
|
-
);
|
|
38
|
-
await highlighter.loadTheme(theme);
|
|
35
|
+
const theme = JSON.parse(await readFile("./theme.json", "utf8"))
|
|
36
|
+
await highlighter.loadTheme(theme)
|
|
39
37
|
```
|
|
40
38
|
|
|
41
39
|
## Select / load theme
|
package/src/dark/theme.json
CHANGED
|
@@ -2,49 +2,32 @@
|
|
|
2
2
|
"name": "cyclone-dark",
|
|
3
3
|
"settings": [
|
|
4
4
|
{
|
|
5
|
-
"scope": [
|
|
6
|
-
"comment",
|
|
7
|
-
"punctuation.definition.comment"
|
|
8
|
-
],
|
|
5
|
+
"scope": ["comment", "punctuation.definition.comment"],
|
|
9
6
|
"settings": {
|
|
10
7
|
"foreground": "#959698",
|
|
11
8
|
"fontStyle": "italic"
|
|
12
9
|
}
|
|
13
10
|
},
|
|
14
11
|
{
|
|
15
|
-
"scope": [
|
|
16
|
-
"string",
|
|
17
|
-
"constant.other.symbol"
|
|
18
|
-
],
|
|
12
|
+
"scope": ["string", "constant.other.symbol"],
|
|
19
13
|
"settings": {
|
|
20
14
|
"foreground": "#45c791"
|
|
21
15
|
}
|
|
22
16
|
},
|
|
23
17
|
{
|
|
24
|
-
"scope": [
|
|
25
|
-
"constant",
|
|
26
|
-
"constant.numeric",
|
|
27
|
-
"constant.language"
|
|
28
|
-
],
|
|
18
|
+
"scope": ["constant", "constant.numeric", "constant.language"],
|
|
29
19
|
"settings": {
|
|
30
20
|
"foreground": "#f7ac23"
|
|
31
21
|
}
|
|
32
22
|
},
|
|
33
23
|
{
|
|
34
|
-
"scope": [
|
|
35
|
-
"keyword",
|
|
36
|
-
"storage",
|
|
37
|
-
"storage.type"
|
|
38
|
-
],
|
|
24
|
+
"scope": ["keyword", "storage", "storage.type"],
|
|
39
25
|
"settings": {
|
|
40
26
|
"foreground": "#4d8eff"
|
|
41
27
|
}
|
|
42
28
|
},
|
|
43
29
|
{
|
|
44
|
-
"scope": [
|
|
45
|
-
"entity.name.function",
|
|
46
|
-
"support.function"
|
|
47
|
-
],
|
|
30
|
+
"scope": ["entity.name.function", "support.function"],
|
|
48
31
|
"settings": {
|
|
49
32
|
"foreground": "#4d8eff"
|
|
50
33
|
}
|
|
@@ -60,46 +43,31 @@
|
|
|
60
43
|
}
|
|
61
44
|
},
|
|
62
45
|
{
|
|
63
|
-
"scope": [
|
|
64
|
-
"entity.name.tag",
|
|
65
|
-
"meta.tag"
|
|
66
|
-
],
|
|
46
|
+
"scope": ["entity.name.tag", "meta.tag"],
|
|
67
47
|
"settings": {
|
|
68
48
|
"foreground": "#4d8eff"
|
|
69
49
|
}
|
|
70
50
|
},
|
|
71
51
|
{
|
|
72
|
-
"scope": [
|
|
73
|
-
"entity.other.attribute-name",
|
|
74
|
-
"support.constant"
|
|
75
|
-
],
|
|
52
|
+
"scope": ["entity.other.attribute-name", "support.constant"],
|
|
76
53
|
"settings": {
|
|
77
54
|
"foreground": "#4d8eff"
|
|
78
55
|
}
|
|
79
56
|
},
|
|
80
57
|
{
|
|
81
|
-
"scope": [
|
|
82
|
-
"variable",
|
|
83
|
-
"identifier"
|
|
84
|
-
],
|
|
58
|
+
"scope": ["variable", "identifier"],
|
|
85
59
|
"settings": {
|
|
86
60
|
"foreground": "#b0b0b1"
|
|
87
61
|
}
|
|
88
62
|
},
|
|
89
63
|
{
|
|
90
|
-
"scope": [
|
|
91
|
-
"punctuation",
|
|
92
|
-
"meta.brace"
|
|
93
|
-
],
|
|
64
|
+
"scope": ["punctuation", "meta.brace"],
|
|
94
65
|
"settings": {
|
|
95
66
|
"foreground": "#959698"
|
|
96
67
|
}
|
|
97
68
|
},
|
|
98
69
|
{
|
|
99
|
-
"scope": [
|
|
100
|
-
"invalid",
|
|
101
|
-
"invalid.illegal"
|
|
102
|
-
],
|
|
70
|
+
"scope": ["invalid", "invalid.illegal"],
|
|
103
71
|
"settings": {
|
|
104
72
|
"foreground": "#cf2d56"
|
|
105
73
|
}
|
|
@@ -118,7 +86,7 @@
|
|
|
118
86
|
"editor.inactiveSelectionBackground": "#1f1f21",
|
|
119
87
|
"editorLineNumber.foreground": "#959698",
|
|
120
88
|
"editorLineNumber.activeForeground": "#b0b0b1",
|
|
121
|
-
"editorIndentGuide.background1": "#
|
|
89
|
+
"editorIndentGuide.background1": "#46464a",
|
|
122
90
|
"editorIndentGuide.activeBackground1": "#959698",
|
|
123
91
|
"editorWhitespace.foreground": "#959698"
|
|
124
92
|
}
|
|
@@ -13,29 +13,27 @@ Generated by `@razorwind/shiki`.
|
|
|
13
13
|
2. Register themes when creating a Shiki highlighter:
|
|
14
14
|
|
|
15
15
|
```ts
|
|
16
|
-
import { createHighlighter } from "shiki"
|
|
17
|
-
import theme from "./theme.json"
|
|
16
|
+
import { createHighlighter } from "shiki"
|
|
17
|
+
import theme from "./theme.json"
|
|
18
18
|
|
|
19
19
|
const highlighter = await createHighlighter({
|
|
20
20
|
themes: [theme],
|
|
21
21
|
langs: ["javascript"]
|
|
22
|
-
})
|
|
22
|
+
})
|
|
23
23
|
|
|
24
24
|
const html = highlighter.codeToHtml("const x = 1", {
|
|
25
25
|
lang: "javascript",
|
|
26
26
|
theme: "cyclone-dark-dimmed"
|
|
27
|
-
})
|
|
27
|
+
})
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
Or load at runtime:
|
|
31
31
|
|
|
32
32
|
```ts
|
|
33
|
-
import { readFile } from "node:fs/promises"
|
|
33
|
+
import { readFile } from "node:fs/promises"
|
|
34
34
|
|
|
35
|
-
const theme = JSON.parse(
|
|
36
|
-
|
|
37
|
-
);
|
|
38
|
-
await highlighter.loadTheme(theme);
|
|
35
|
+
const theme = JSON.parse(await readFile("./theme.json", "utf8"))
|
|
36
|
+
await highlighter.loadTheme(theme)
|
|
39
37
|
```
|
|
40
38
|
|
|
41
39
|
## Select / load theme
|