@dxos/react-ui-syntax-highlighter 0.7.2-main.f1adc9f → 0.7.2
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/dist/lib/browser/index.mjs +4 -138
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +4 -134
- package/dist/lib/node/index.cjs.map +4 -4
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +4 -138
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/SyntaxHighlighter.d.ts.map +1 -1
- package/package.json +6 -6
- package/src/SyntaxHighlighter.tsx +6 -4
- package/dist/types/src/styles.d.ts +0 -10
- package/dist/types/src/styles.d.ts.map +0 -1
- package/src/styles.ts +0 -149
|
@@ -1,150 +1,16 @@
|
|
|
1
1
|
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx
|
|
2
2
|
import React from "react";
|
|
3
3
|
import NativeSyntaxHighlighter from "react-syntax-highlighter/dist/esm/light-async";
|
|
4
|
+
import styleDark from "react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark";
|
|
5
|
+
import styleLight from "react-syntax-highlighter/dist/esm/styles/hljs/a11y-light";
|
|
4
6
|
import { useThemeContext } from "@dxos/react-ui";
|
|
5
7
|
import { mx } from "@dxos/react-ui-theme";
|
|
6
|
-
|
|
7
|
-
// packages/ui/react-ui-syntax-highlighter/src/styles.ts
|
|
8
|
-
var alabasterDark = {
|
|
9
|
-
hljs: {
|
|
10
|
-
display: "block",
|
|
11
|
-
overflowX: "auto",
|
|
12
|
-
color: "#CECECE",
|
|
13
|
-
padding: "0.5em"
|
|
14
|
-
},
|
|
15
|
-
"hljs-comment": {
|
|
16
|
-
color: "#DFDF8E"
|
|
17
|
-
},
|
|
18
|
-
"hljs-string": {
|
|
19
|
-
color: "#95CB82"
|
|
20
|
-
},
|
|
21
|
-
"hljs-meta-string": {
|
|
22
|
-
color: "#95CB82"
|
|
23
|
-
},
|
|
24
|
-
"hljs-regexp": {
|
|
25
|
-
color: "#95CB82"
|
|
26
|
-
},
|
|
27
|
-
"hljs-number": {
|
|
28
|
-
color: "#CC8BC9"
|
|
29
|
-
},
|
|
30
|
-
"hljs-literal": {
|
|
31
|
-
color: "#CC8BC9"
|
|
32
|
-
},
|
|
33
|
-
"hljs-title": {
|
|
34
|
-
color: "#71ADE7"
|
|
35
|
-
},
|
|
36
|
-
"hljs-deletion": {
|
|
37
|
-
backgroundColor: "#ffdddd",
|
|
38
|
-
color: "#434343"
|
|
39
|
-
},
|
|
40
|
-
"hljs-addition": {
|
|
41
|
-
backgroundColor: "#ddffdd",
|
|
42
|
-
color: "#434343"
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
var githubLight = {
|
|
46
|
-
hljs: {
|
|
47
|
-
display: "block",
|
|
48
|
-
overflowX: "auto",
|
|
49
|
-
color: "#545454",
|
|
50
|
-
padding: "0.5em"
|
|
51
|
-
},
|
|
52
|
-
"hljs-comment": {
|
|
53
|
-
color: "#696969"
|
|
54
|
-
},
|
|
55
|
-
"hljs-quote": {
|
|
56
|
-
color: "#696969"
|
|
57
|
-
},
|
|
58
|
-
"hljs-variable": {
|
|
59
|
-
color: "#d91e18"
|
|
60
|
-
},
|
|
61
|
-
"hljs-template-variable": {
|
|
62
|
-
color: "#d91e18"
|
|
63
|
-
},
|
|
64
|
-
"hljs-tag": {
|
|
65
|
-
color: "#d91e18"
|
|
66
|
-
},
|
|
67
|
-
"hljs-name": {
|
|
68
|
-
color: "#d91e18"
|
|
69
|
-
},
|
|
70
|
-
"hljs-selector-id": {
|
|
71
|
-
color: "#d91e18"
|
|
72
|
-
},
|
|
73
|
-
"hljs-selector-class": {
|
|
74
|
-
color: "#d91e18"
|
|
75
|
-
},
|
|
76
|
-
"hljs-regexp": {
|
|
77
|
-
color: "#d91e18"
|
|
78
|
-
},
|
|
79
|
-
"hljs-deletion": {
|
|
80
|
-
color: "#d91e18"
|
|
81
|
-
},
|
|
82
|
-
"hljs-number": {
|
|
83
|
-
color: "#aa5d00"
|
|
84
|
-
},
|
|
85
|
-
"hljs-built_in": {
|
|
86
|
-
color: "#aa5d00"
|
|
87
|
-
},
|
|
88
|
-
"hljs-builtin-name": {
|
|
89
|
-
color: "#aa5d00"
|
|
90
|
-
},
|
|
91
|
-
"hljs-literal": {
|
|
92
|
-
color: "#aa5d00"
|
|
93
|
-
},
|
|
94
|
-
"hljs-type": {
|
|
95
|
-
color: "#aa5d00"
|
|
96
|
-
},
|
|
97
|
-
"hljs-params": {
|
|
98
|
-
color: "#aa5d00"
|
|
99
|
-
},
|
|
100
|
-
"hljs-meta": {
|
|
101
|
-
color: "#aa5d00"
|
|
102
|
-
},
|
|
103
|
-
"hljs-link": {
|
|
104
|
-
color: "#aa5d00"
|
|
105
|
-
},
|
|
106
|
-
"hljs-attribute": {
|
|
107
|
-
color: "#aa5d00"
|
|
108
|
-
},
|
|
109
|
-
"hljs-string": {
|
|
110
|
-
color: "#008000"
|
|
111
|
-
},
|
|
112
|
-
"hljs-symbol": {
|
|
113
|
-
color: "#008000"
|
|
114
|
-
},
|
|
115
|
-
"hljs-bullet": {
|
|
116
|
-
color: "#008000"
|
|
117
|
-
},
|
|
118
|
-
"hljs-addition": {
|
|
119
|
-
color: "#008000"
|
|
120
|
-
},
|
|
121
|
-
"hljs-title": {
|
|
122
|
-
color: "#007faa"
|
|
123
|
-
},
|
|
124
|
-
"hljs-section": {
|
|
125
|
-
color: "#007faa"
|
|
126
|
-
},
|
|
127
|
-
"hljs-keyword": {
|
|
128
|
-
color: "#7928a1"
|
|
129
|
-
},
|
|
130
|
-
"hljs-selector-tag": {
|
|
131
|
-
color: "#7928a1"
|
|
132
|
-
},
|
|
133
|
-
"hljs-emphasis": {
|
|
134
|
-
fontStyle: "italic"
|
|
135
|
-
},
|
|
136
|
-
"hljs-strong": {
|
|
137
|
-
fontWeight: "bold"
|
|
138
|
-
}
|
|
139
|
-
};
|
|
140
|
-
|
|
141
|
-
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx
|
|
142
8
|
var zeroWidthSpace = "\u200B";
|
|
143
9
|
var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
|
|
144
10
|
const { themeMode } = useThemeContext();
|
|
145
11
|
return /* @__PURE__ */ React.createElement(NativeSyntaxHighlighter, {
|
|
146
|
-
className: mx("w-full
|
|
147
|
-
style: themeMode === "dark" ?
|
|
12
|
+
className: mx("w-full", classNames),
|
|
13
|
+
style: themeMode === "dark" ? styleDark : styleLight,
|
|
148
14
|
...props
|
|
149
15
|
}, children || fallback);
|
|
150
16
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/SyntaxHighlighter.tsx"
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\nimport { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';\n// Lightweight version will load specific language parsers asynchronously.\n// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\
|
|
5
|
-
"mappings": ";AAIA,OAAOA,WAAW;AAKlB,OAAOC,6BAA6B;AAEpC,
|
|
6
|
-
"names": ["React", "NativeSyntaxHighlighter", "
|
|
3
|
+
"sources": ["../../../src/SyntaxHighlighter.tsx"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\nimport { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';\n// Lightweight version will load specific language parsers asynchronously.\n// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n// eslint-disable-next-line no-restricted-imports\nimport styleDark from 'react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark';\n// eslint-disable-next-line no-restricted-imports\nimport styleLight from 'react-syntax-highlighter/dist/esm/styles/hljs/a11y-light';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n NativeSyntaxHighlighterProps & {\n fallback?: string;\n }\n>;\n\n/**\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n */\nexport const SyntaxHighlighter = ({\n classNames,\n fallback = zeroWidthSpace,\n children,\n ...props\n}: SyntaxHighlighterProps) => {\n const { themeMode } = useThemeContext();\n return (\n <NativeSyntaxHighlighter\n className={mx('w-full', classNames)}\n style={themeMode === 'dark' ? styleDark : styleLight}\n {...props}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n );\n};\n"],
|
|
5
|
+
"mappings": ";AAIA,OAAOA,WAAW;AAKlB,OAAOC,6BAA6B;AAEpC,OAAOC,eAAe;AAEtB,OAAOC,gBAAgB;AAEvB,SAA+BC,uBAAuB;AACtD,SAASC,UAAU;AAEnB,IAAMC,iBAAiB;AAWhB,IAAMC,oBAAoB,CAAC,EAChCC,YACAC,WAAWH,gBACXI,UACA,GAAGC,MAAAA,MACoB;AACvB,QAAM,EAAEC,UAAS,IAAKC,gBAAAA;AACtB,SACE,sBAAA,cAACC,yBAAAA;IACCC,WAAWC,GAAG,UAAUR,UAAAA;IACxBS,OAAOL,cAAc,SAASM,YAAYC;IACzC,GAAGR;KAGHD,YAAYD,QAAAA;AAGnB;",
|
|
6
|
+
"names": ["React", "NativeSyntaxHighlighter", "styleDark", "styleLight", "useThemeContext", "mx", "zeroWidthSpace", "SyntaxHighlighter", "classNames", "fallback", "children", "props", "themeMode", "useThemeContext", "NativeSyntaxHighlighter", "className", "mx", "style", "styleDark", "styleLight"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx":{"bytes":4650,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/light-async","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/hljs/a11y-light","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytes":536,"imports":[{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-syntax-highlighter/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":2380},"packages/ui/react-ui-syntax-highlighter/dist/lib/browser/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/light-async","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/hljs/a11y-light","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["SyntaxHighlighter"],"entryPoint":"packages/ui/react-ui-syntax-highlighter/src/index.ts","inputs":{"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx":{"bytesInOutput":751},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytesInOutput":0}},"bytes":887}}}
|
package/dist/lib/node/index.cjs
CHANGED
|
@@ -33,146 +33,16 @@ __export(node_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(node_exports);
|
|
34
34
|
var import_react = __toESM(require("react"));
|
|
35
35
|
var import_light_async = __toESM(require("react-syntax-highlighter/dist/esm/light-async"));
|
|
36
|
+
var import_a11y_dark = __toESM(require("react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark"));
|
|
37
|
+
var import_a11y_light = __toESM(require("react-syntax-highlighter/dist/esm/styles/hljs/a11y-light"));
|
|
36
38
|
var import_react_ui = require("@dxos/react-ui");
|
|
37
39
|
var import_react_ui_theme = require("@dxos/react-ui-theme");
|
|
38
|
-
var alabasterDark = {
|
|
39
|
-
hljs: {
|
|
40
|
-
display: "block",
|
|
41
|
-
overflowX: "auto",
|
|
42
|
-
color: "#CECECE",
|
|
43
|
-
padding: "0.5em"
|
|
44
|
-
},
|
|
45
|
-
"hljs-comment": {
|
|
46
|
-
color: "#DFDF8E"
|
|
47
|
-
},
|
|
48
|
-
"hljs-string": {
|
|
49
|
-
color: "#95CB82"
|
|
50
|
-
},
|
|
51
|
-
"hljs-meta-string": {
|
|
52
|
-
color: "#95CB82"
|
|
53
|
-
},
|
|
54
|
-
"hljs-regexp": {
|
|
55
|
-
color: "#95CB82"
|
|
56
|
-
},
|
|
57
|
-
"hljs-number": {
|
|
58
|
-
color: "#CC8BC9"
|
|
59
|
-
},
|
|
60
|
-
"hljs-literal": {
|
|
61
|
-
color: "#CC8BC9"
|
|
62
|
-
},
|
|
63
|
-
"hljs-title": {
|
|
64
|
-
color: "#71ADE7"
|
|
65
|
-
},
|
|
66
|
-
"hljs-deletion": {
|
|
67
|
-
backgroundColor: "#ffdddd",
|
|
68
|
-
color: "#434343"
|
|
69
|
-
},
|
|
70
|
-
"hljs-addition": {
|
|
71
|
-
backgroundColor: "#ddffdd",
|
|
72
|
-
color: "#434343"
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
var githubLight = {
|
|
76
|
-
hljs: {
|
|
77
|
-
display: "block",
|
|
78
|
-
overflowX: "auto",
|
|
79
|
-
color: "#545454",
|
|
80
|
-
padding: "0.5em"
|
|
81
|
-
},
|
|
82
|
-
"hljs-comment": {
|
|
83
|
-
color: "#696969"
|
|
84
|
-
},
|
|
85
|
-
"hljs-quote": {
|
|
86
|
-
color: "#696969"
|
|
87
|
-
},
|
|
88
|
-
"hljs-variable": {
|
|
89
|
-
color: "#d91e18"
|
|
90
|
-
},
|
|
91
|
-
"hljs-template-variable": {
|
|
92
|
-
color: "#d91e18"
|
|
93
|
-
},
|
|
94
|
-
"hljs-tag": {
|
|
95
|
-
color: "#d91e18"
|
|
96
|
-
},
|
|
97
|
-
"hljs-name": {
|
|
98
|
-
color: "#d91e18"
|
|
99
|
-
},
|
|
100
|
-
"hljs-selector-id": {
|
|
101
|
-
color: "#d91e18"
|
|
102
|
-
},
|
|
103
|
-
"hljs-selector-class": {
|
|
104
|
-
color: "#d91e18"
|
|
105
|
-
},
|
|
106
|
-
"hljs-regexp": {
|
|
107
|
-
color: "#d91e18"
|
|
108
|
-
},
|
|
109
|
-
"hljs-deletion": {
|
|
110
|
-
color: "#d91e18"
|
|
111
|
-
},
|
|
112
|
-
"hljs-number": {
|
|
113
|
-
color: "#aa5d00"
|
|
114
|
-
},
|
|
115
|
-
"hljs-built_in": {
|
|
116
|
-
color: "#aa5d00"
|
|
117
|
-
},
|
|
118
|
-
"hljs-builtin-name": {
|
|
119
|
-
color: "#aa5d00"
|
|
120
|
-
},
|
|
121
|
-
"hljs-literal": {
|
|
122
|
-
color: "#aa5d00"
|
|
123
|
-
},
|
|
124
|
-
"hljs-type": {
|
|
125
|
-
color: "#aa5d00"
|
|
126
|
-
},
|
|
127
|
-
"hljs-params": {
|
|
128
|
-
color: "#aa5d00"
|
|
129
|
-
},
|
|
130
|
-
"hljs-meta": {
|
|
131
|
-
color: "#aa5d00"
|
|
132
|
-
},
|
|
133
|
-
"hljs-link": {
|
|
134
|
-
color: "#aa5d00"
|
|
135
|
-
},
|
|
136
|
-
"hljs-attribute": {
|
|
137
|
-
color: "#aa5d00"
|
|
138
|
-
},
|
|
139
|
-
"hljs-string": {
|
|
140
|
-
color: "#008000"
|
|
141
|
-
},
|
|
142
|
-
"hljs-symbol": {
|
|
143
|
-
color: "#008000"
|
|
144
|
-
},
|
|
145
|
-
"hljs-bullet": {
|
|
146
|
-
color: "#008000"
|
|
147
|
-
},
|
|
148
|
-
"hljs-addition": {
|
|
149
|
-
color: "#008000"
|
|
150
|
-
},
|
|
151
|
-
"hljs-title": {
|
|
152
|
-
color: "#007faa"
|
|
153
|
-
},
|
|
154
|
-
"hljs-section": {
|
|
155
|
-
color: "#007faa"
|
|
156
|
-
},
|
|
157
|
-
"hljs-keyword": {
|
|
158
|
-
color: "#7928a1"
|
|
159
|
-
},
|
|
160
|
-
"hljs-selector-tag": {
|
|
161
|
-
color: "#7928a1"
|
|
162
|
-
},
|
|
163
|
-
"hljs-emphasis": {
|
|
164
|
-
fontStyle: "italic"
|
|
165
|
-
},
|
|
166
|
-
"hljs-strong": {
|
|
167
|
-
fontWeight: "bold"
|
|
168
|
-
}
|
|
169
|
-
};
|
|
170
40
|
var zeroWidthSpace = "\u200B";
|
|
171
41
|
var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
|
|
172
42
|
const { themeMode } = (0, import_react_ui.useThemeContext)();
|
|
173
43
|
return /* @__PURE__ */ import_react.default.createElement(import_light_async.default, {
|
|
174
|
-
className: (0, import_react_ui_theme.mx)("w-full
|
|
175
|
-
style: themeMode === "dark" ?
|
|
44
|
+
className: (0, import_react_ui_theme.mx)("w-full", classNames),
|
|
45
|
+
style: themeMode === "dark" ? import_a11y_dark.default : import_a11y_light.default,
|
|
176
46
|
...props
|
|
177
47
|
}, children || fallback);
|
|
178
48
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/SyntaxHighlighter.tsx"
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\nimport { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';\n// Lightweight version will load specific language parsers asynchronously.\n// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,mBAAkB;AAKlB,yBAAoC;AAEpC,sBAAsD;AACtD,4BAAmB;
|
|
6
|
-
"names": ["
|
|
3
|
+
"sources": ["../../../src/SyntaxHighlighter.tsx"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\nimport { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';\n// Lightweight version will load specific language parsers asynchronously.\n// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n// eslint-disable-next-line no-restricted-imports\nimport styleDark from 'react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark';\n// eslint-disable-next-line no-restricted-imports\nimport styleLight from 'react-syntax-highlighter/dist/esm/styles/hljs/a11y-light';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n NativeSyntaxHighlighterProps & {\n fallback?: string;\n }\n>;\n\n/**\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n */\nexport const SyntaxHighlighter = ({\n classNames,\n fallback = zeroWidthSpace,\n children,\n ...props\n}: SyntaxHighlighterProps) => {\n const { themeMode } = useThemeContext();\n return (\n <NativeSyntaxHighlighter\n className={mx('w-full', classNames)}\n style={themeMode === 'dark' ? styleDark : styleLight}\n {...props}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,mBAAkB;AAKlB,yBAAoC;AAEpC,uBAAsB;AAEtB,wBAAuB;AAEvB,sBAAsD;AACtD,4BAAmB;AAEnB,IAAMA,iBAAiB;AAWhB,IAAMC,oBAAoB,CAAC,EAChCC,YACAC,WAAWH,gBACXI,UACA,GAAGC,MAAAA,MACoB;AACvB,QAAM,EAAEC,UAAS,QAAKC,iCAAAA;AACtB,SACE,6BAAAC,QAAA,cAACC,mBAAAA,SAAAA;IACCC,eAAWC,0BAAG,UAAUT,UAAAA;IACxBU,OAAON,cAAc,SAASO,iBAAAA,UAAYC,kBAAAA;IACzC,GAAGT;KAGHD,YAAYD,QAAAA;AAGnB;",
|
|
6
|
+
"names": ["zeroWidthSpace", "SyntaxHighlighter", "classNames", "fallback", "children", "props", "themeMode", "useThemeContext", "React", "NativeSyntaxHighlighter", "className", "mx", "style", "styleDark", "styleLight"]
|
|
7
7
|
}
|
package/dist/lib/node/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx":{"bytes":4650,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/light-async","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/hljs/a11y-light","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytes":536,"imports":[{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-syntax-highlighter/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":2380},"packages/ui/react-ui-syntax-highlighter/dist/lib/node/index.cjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/light-async","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/hljs/a11y-light","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["SyntaxHighlighter"],"entryPoint":"packages/ui/react-ui-syntax-highlighter/src/index.ts","inputs":{"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx":{"bytesInOutput":751},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytesInOutput":0}},"bytes":887}}}
|
|
@@ -3,150 +3,16 @@ import { createRequire } from 'node:module';const require = createRequire(import
|
|
|
3
3
|
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx
|
|
4
4
|
import React from "react";
|
|
5
5
|
import NativeSyntaxHighlighter from "react-syntax-highlighter/dist/esm/light-async";
|
|
6
|
+
import styleDark from "react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark";
|
|
7
|
+
import styleLight from "react-syntax-highlighter/dist/esm/styles/hljs/a11y-light";
|
|
6
8
|
import { useThemeContext } from "@dxos/react-ui";
|
|
7
9
|
import { mx } from "@dxos/react-ui-theme";
|
|
8
|
-
|
|
9
|
-
// packages/ui/react-ui-syntax-highlighter/src/styles.ts
|
|
10
|
-
var alabasterDark = {
|
|
11
|
-
hljs: {
|
|
12
|
-
display: "block",
|
|
13
|
-
overflowX: "auto",
|
|
14
|
-
color: "#CECECE",
|
|
15
|
-
padding: "0.5em"
|
|
16
|
-
},
|
|
17
|
-
"hljs-comment": {
|
|
18
|
-
color: "#DFDF8E"
|
|
19
|
-
},
|
|
20
|
-
"hljs-string": {
|
|
21
|
-
color: "#95CB82"
|
|
22
|
-
},
|
|
23
|
-
"hljs-meta-string": {
|
|
24
|
-
color: "#95CB82"
|
|
25
|
-
},
|
|
26
|
-
"hljs-regexp": {
|
|
27
|
-
color: "#95CB82"
|
|
28
|
-
},
|
|
29
|
-
"hljs-number": {
|
|
30
|
-
color: "#CC8BC9"
|
|
31
|
-
},
|
|
32
|
-
"hljs-literal": {
|
|
33
|
-
color: "#CC8BC9"
|
|
34
|
-
},
|
|
35
|
-
"hljs-title": {
|
|
36
|
-
color: "#71ADE7"
|
|
37
|
-
},
|
|
38
|
-
"hljs-deletion": {
|
|
39
|
-
backgroundColor: "#ffdddd",
|
|
40
|
-
color: "#434343"
|
|
41
|
-
},
|
|
42
|
-
"hljs-addition": {
|
|
43
|
-
backgroundColor: "#ddffdd",
|
|
44
|
-
color: "#434343"
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
var githubLight = {
|
|
48
|
-
hljs: {
|
|
49
|
-
display: "block",
|
|
50
|
-
overflowX: "auto",
|
|
51
|
-
color: "#545454",
|
|
52
|
-
padding: "0.5em"
|
|
53
|
-
},
|
|
54
|
-
"hljs-comment": {
|
|
55
|
-
color: "#696969"
|
|
56
|
-
},
|
|
57
|
-
"hljs-quote": {
|
|
58
|
-
color: "#696969"
|
|
59
|
-
},
|
|
60
|
-
"hljs-variable": {
|
|
61
|
-
color: "#d91e18"
|
|
62
|
-
},
|
|
63
|
-
"hljs-template-variable": {
|
|
64
|
-
color: "#d91e18"
|
|
65
|
-
},
|
|
66
|
-
"hljs-tag": {
|
|
67
|
-
color: "#d91e18"
|
|
68
|
-
},
|
|
69
|
-
"hljs-name": {
|
|
70
|
-
color: "#d91e18"
|
|
71
|
-
},
|
|
72
|
-
"hljs-selector-id": {
|
|
73
|
-
color: "#d91e18"
|
|
74
|
-
},
|
|
75
|
-
"hljs-selector-class": {
|
|
76
|
-
color: "#d91e18"
|
|
77
|
-
},
|
|
78
|
-
"hljs-regexp": {
|
|
79
|
-
color: "#d91e18"
|
|
80
|
-
},
|
|
81
|
-
"hljs-deletion": {
|
|
82
|
-
color: "#d91e18"
|
|
83
|
-
},
|
|
84
|
-
"hljs-number": {
|
|
85
|
-
color: "#aa5d00"
|
|
86
|
-
},
|
|
87
|
-
"hljs-built_in": {
|
|
88
|
-
color: "#aa5d00"
|
|
89
|
-
},
|
|
90
|
-
"hljs-builtin-name": {
|
|
91
|
-
color: "#aa5d00"
|
|
92
|
-
},
|
|
93
|
-
"hljs-literal": {
|
|
94
|
-
color: "#aa5d00"
|
|
95
|
-
},
|
|
96
|
-
"hljs-type": {
|
|
97
|
-
color: "#aa5d00"
|
|
98
|
-
},
|
|
99
|
-
"hljs-params": {
|
|
100
|
-
color: "#aa5d00"
|
|
101
|
-
},
|
|
102
|
-
"hljs-meta": {
|
|
103
|
-
color: "#aa5d00"
|
|
104
|
-
},
|
|
105
|
-
"hljs-link": {
|
|
106
|
-
color: "#aa5d00"
|
|
107
|
-
},
|
|
108
|
-
"hljs-attribute": {
|
|
109
|
-
color: "#aa5d00"
|
|
110
|
-
},
|
|
111
|
-
"hljs-string": {
|
|
112
|
-
color: "#008000"
|
|
113
|
-
},
|
|
114
|
-
"hljs-symbol": {
|
|
115
|
-
color: "#008000"
|
|
116
|
-
},
|
|
117
|
-
"hljs-bullet": {
|
|
118
|
-
color: "#008000"
|
|
119
|
-
},
|
|
120
|
-
"hljs-addition": {
|
|
121
|
-
color: "#008000"
|
|
122
|
-
},
|
|
123
|
-
"hljs-title": {
|
|
124
|
-
color: "#007faa"
|
|
125
|
-
},
|
|
126
|
-
"hljs-section": {
|
|
127
|
-
color: "#007faa"
|
|
128
|
-
},
|
|
129
|
-
"hljs-keyword": {
|
|
130
|
-
color: "#7928a1"
|
|
131
|
-
},
|
|
132
|
-
"hljs-selector-tag": {
|
|
133
|
-
color: "#7928a1"
|
|
134
|
-
},
|
|
135
|
-
"hljs-emphasis": {
|
|
136
|
-
fontStyle: "italic"
|
|
137
|
-
},
|
|
138
|
-
"hljs-strong": {
|
|
139
|
-
fontWeight: "bold"
|
|
140
|
-
}
|
|
141
|
-
};
|
|
142
|
-
|
|
143
|
-
// packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx
|
|
144
10
|
var zeroWidthSpace = "\u200B";
|
|
145
11
|
var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
|
|
146
12
|
const { themeMode } = useThemeContext();
|
|
147
13
|
return /* @__PURE__ */ React.createElement(NativeSyntaxHighlighter, {
|
|
148
|
-
className: mx("w-full
|
|
149
|
-
style: themeMode === "dark" ?
|
|
14
|
+
className: mx("w-full", classNames),
|
|
15
|
+
style: themeMode === "dark" ? styleDark : styleLight,
|
|
150
16
|
...props
|
|
151
17
|
}, children || fallback);
|
|
152
18
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/SyntaxHighlighter.tsx"
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\nimport { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';\n// Lightweight version will load specific language parsers asynchronously.\n// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\
|
|
5
|
-
"mappings": ";;;AAIA,OAAOA,WAAW;AAKlB,OAAOC,6BAA6B;AAEpC,
|
|
6
|
-
"names": ["React", "NativeSyntaxHighlighter", "
|
|
3
|
+
"sources": ["../../../src/SyntaxHighlighter.tsx"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\nimport { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'react-syntax-highlighter';\n// Lightweight version will load specific language parsers asynchronously.\n// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.\n// eslint-disable-next-line no-restricted-imports\nimport NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';\n// eslint-disable-next-line no-restricted-imports\nimport styleDark from 'react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark';\n// eslint-disable-next-line no-restricted-imports\nimport styleLight from 'react-syntax-highlighter/dist/esm/styles/hljs/a11y-light';\n\nimport { type ThemedClassName, useThemeContext } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nconst zeroWidthSpace = '\\u200b';\n\nexport type SyntaxHighlighterProps = ThemedClassName<\n NativeSyntaxHighlighterProps & {\n fallback?: string;\n }\n>;\n\n/**\n * https://github.com/react-syntax-highlighter/react-syntax-highlighter\n */\nexport const SyntaxHighlighter = ({\n classNames,\n fallback = zeroWidthSpace,\n children,\n ...props\n}: SyntaxHighlighterProps) => {\n const { themeMode } = useThemeContext();\n return (\n <NativeSyntaxHighlighter\n className={mx('w-full', classNames)}\n style={themeMode === 'dark' ? styleDark : styleLight}\n {...props}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;AAIA,OAAOA,WAAW;AAKlB,OAAOC,6BAA6B;AAEpC,OAAOC,eAAe;AAEtB,OAAOC,gBAAgB;AAEvB,SAA+BC,uBAAuB;AACtD,SAASC,UAAU;AAEnB,IAAMC,iBAAiB;AAWhB,IAAMC,oBAAoB,CAAC,EAChCC,YACAC,WAAWH,gBACXI,UACA,GAAGC,MAAAA,MACoB;AACvB,QAAM,EAAEC,UAAS,IAAKC,gBAAAA;AACtB,SACE,sBAAA,cAACC,yBAAAA;IACCC,WAAWC,GAAG,UAAUR,UAAAA;IACxBS,OAAOL,cAAc,SAASM,YAAYC;IACzC,GAAGR;KAGHD,YAAYD,QAAAA;AAGnB;",
|
|
6
|
+
"names": ["React", "NativeSyntaxHighlighter", "styleDark", "styleLight", "useThemeContext", "mx", "zeroWidthSpace", "SyntaxHighlighter", "classNames", "fallback", "children", "props", "themeMode", "useThemeContext", "NativeSyntaxHighlighter", "className", "mx", "style", "styleDark", "styleLight"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx":{"bytes":4650,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/light-async","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/hljs/a11y-light","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytes":536,"imports":[{"path":"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx","kind":"import-statement","original":"./SyntaxHighlighter"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-syntax-highlighter/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":2382},"packages/ui/react-ui-syntax-highlighter/dist/lib/node-esm/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/light-async","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/styles/hljs/a11y-light","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["SyntaxHighlighter"],"entryPoint":"packages/ui/react-ui-syntax-highlighter/src/index.ts","inputs":{"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx":{"bytesInOutput":751},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytesInOutput":0}},"bytes":980}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../src/SyntaxHighlighter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,sBAAsB,IAAI,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"SyntaxHighlighter.d.ts","sourceRoot":"","sources":["../../../src/SyntaxHighlighter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,sBAAsB,IAAI,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAUvG,OAAO,EAAE,KAAK,eAAe,EAAmB,MAAM,gBAAgB,CAAC;AAKvE,MAAM,MAAM,sBAAsB,GAAG,eAAe,CAClD,4BAA4B,GAAG;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CACF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,iDAK3B,sBAAsB,sBAYxB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-syntax-highlighter",
|
|
3
|
-
"version": "0.7.2
|
|
3
|
+
"version": "0.7.2",
|
|
4
4
|
"description": "A syntax highlighter wrapper.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -32,15 +32,15 @@
|
|
|
32
32
|
"react": "~18.2.0",
|
|
33
33
|
"react-dom": "~18.2.0",
|
|
34
34
|
"vite": "5.4.7",
|
|
35
|
-
"@dxos/
|
|
36
|
-
"@dxos/
|
|
37
|
-
"@dxos/react-ui": "0.7.2
|
|
35
|
+
"@dxos/storybook-utils": "0.7.2",
|
|
36
|
+
"@dxos/react-ui": "0.7.2",
|
|
37
|
+
"@dxos/react-ui-theme": "0.7.2"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"react": "~18.2.0",
|
|
41
41
|
"react-dom": "~18.2.0",
|
|
42
|
-
"@dxos/react-ui
|
|
43
|
-
"@dxos/react-ui": "0.7.2
|
|
42
|
+
"@dxos/react-ui": "0.7.2",
|
|
43
|
+
"@dxos/react-ui-theme": "0.7.2"
|
|
44
44
|
},
|
|
45
45
|
"publishConfig": {
|
|
46
46
|
"access": "public"
|
|
@@ -8,12 +8,14 @@ import { type SyntaxHighlighterProps as NativeSyntaxHighlighterProps } from 'rea
|
|
|
8
8
|
// Using `light-async` version directly from dist to avoid any chance of the heavy one being loaded.
|
|
9
9
|
// eslint-disable-next-line no-restricted-imports
|
|
10
10
|
import NativeSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light-async';
|
|
11
|
+
// eslint-disable-next-line no-restricted-imports
|
|
12
|
+
import styleDark from 'react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark';
|
|
13
|
+
// eslint-disable-next-line no-restricted-imports
|
|
14
|
+
import styleLight from 'react-syntax-highlighter/dist/esm/styles/hljs/a11y-light';
|
|
11
15
|
|
|
12
16
|
import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
|
|
13
17
|
import { mx } from '@dxos/react-ui-theme';
|
|
14
18
|
|
|
15
|
-
import { alabasterDark, githubLight } from './styles';
|
|
16
|
-
|
|
17
19
|
const zeroWidthSpace = '\u200b';
|
|
18
20
|
|
|
19
21
|
export type SyntaxHighlighterProps = ThemedClassName<
|
|
@@ -34,8 +36,8 @@ export const SyntaxHighlighter = ({
|
|
|
34
36
|
const { themeMode } = useThemeContext();
|
|
35
37
|
return (
|
|
36
38
|
<NativeSyntaxHighlighter
|
|
37
|
-
className={mx('w-full
|
|
38
|
-
style={themeMode === 'dark' ?
|
|
39
|
+
className={mx('w-full', classNames)}
|
|
40
|
+
style={themeMode === 'dark' ? styleDark : styleLight}
|
|
39
41
|
{...props}
|
|
40
42
|
>
|
|
41
43
|
{/* Non-empty fallback prevents collapse. */}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { type CSSProperties } from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* https://github.com/findrakecil/hljs-alabaster-dark/blob/master/readme.md
|
|
4
|
-
*/
|
|
5
|
-
export declare const alabasterDark: Record<string, CSSProperties>;
|
|
6
|
-
/**
|
|
7
|
-
* https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css
|
|
8
|
-
*/
|
|
9
|
-
export declare const githubLight: Record<string, CSSProperties>;
|
|
10
|
-
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAM3C;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAoCvD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CA8FrD,CAAC"}
|
package/src/styles.ts
DELETED
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2024 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { type CSSProperties } from 'react';
|
|
6
|
-
|
|
7
|
-
// https://highlightjs.org/examples
|
|
8
|
-
// https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo
|
|
9
|
-
// https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_STYLES_HLJS.MD
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* https://github.com/findrakecil/hljs-alabaster-dark/blob/master/readme.md
|
|
13
|
-
*/
|
|
14
|
-
export const alabasterDark: Record<string, CSSProperties> = {
|
|
15
|
-
hljs: {
|
|
16
|
-
display: 'block',
|
|
17
|
-
overflowX: 'auto',
|
|
18
|
-
color: '#CECECE',
|
|
19
|
-
padding: '0.5em',
|
|
20
|
-
},
|
|
21
|
-
'hljs-comment': {
|
|
22
|
-
color: '#DFDF8E',
|
|
23
|
-
},
|
|
24
|
-
'hljs-string': {
|
|
25
|
-
color: '#95CB82',
|
|
26
|
-
},
|
|
27
|
-
'hljs-meta-string': {
|
|
28
|
-
color: '#95CB82',
|
|
29
|
-
},
|
|
30
|
-
'hljs-regexp': {
|
|
31
|
-
color: '#95CB82',
|
|
32
|
-
},
|
|
33
|
-
'hljs-number': {
|
|
34
|
-
color: '#CC8BC9',
|
|
35
|
-
},
|
|
36
|
-
'hljs-literal': {
|
|
37
|
-
color: '#CC8BC9',
|
|
38
|
-
},
|
|
39
|
-
'hljs-title': {
|
|
40
|
-
color: '#71ADE7',
|
|
41
|
-
},
|
|
42
|
-
'hljs-deletion': {
|
|
43
|
-
backgroundColor: '#ffdddd',
|
|
44
|
-
color: '#434343',
|
|
45
|
-
},
|
|
46
|
-
'hljs-addition': {
|
|
47
|
-
backgroundColor: '#ddffdd',
|
|
48
|
-
color: '#434343',
|
|
49
|
-
},
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
/**
|
|
53
|
-
* https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css
|
|
54
|
-
*/
|
|
55
|
-
export const githubLight: Record<string, CSSProperties> = {
|
|
56
|
-
hljs: {
|
|
57
|
-
display: 'block',
|
|
58
|
-
overflowX: 'auto',
|
|
59
|
-
color: '#545454',
|
|
60
|
-
padding: '0.5em',
|
|
61
|
-
},
|
|
62
|
-
'hljs-comment': {
|
|
63
|
-
color: '#696969',
|
|
64
|
-
},
|
|
65
|
-
'hljs-quote': {
|
|
66
|
-
color: '#696969',
|
|
67
|
-
},
|
|
68
|
-
'hljs-variable': {
|
|
69
|
-
color: '#d91e18',
|
|
70
|
-
},
|
|
71
|
-
'hljs-template-variable': {
|
|
72
|
-
color: '#d91e18',
|
|
73
|
-
},
|
|
74
|
-
'hljs-tag': {
|
|
75
|
-
color: '#d91e18',
|
|
76
|
-
},
|
|
77
|
-
'hljs-name': {
|
|
78
|
-
color: '#d91e18',
|
|
79
|
-
},
|
|
80
|
-
'hljs-selector-id': {
|
|
81
|
-
color: '#d91e18',
|
|
82
|
-
},
|
|
83
|
-
'hljs-selector-class': {
|
|
84
|
-
color: '#d91e18',
|
|
85
|
-
},
|
|
86
|
-
'hljs-regexp': {
|
|
87
|
-
color: '#d91e18',
|
|
88
|
-
},
|
|
89
|
-
'hljs-deletion': {
|
|
90
|
-
color: '#d91e18',
|
|
91
|
-
},
|
|
92
|
-
'hljs-number': {
|
|
93
|
-
color: '#aa5d00',
|
|
94
|
-
},
|
|
95
|
-
'hljs-built_in': {
|
|
96
|
-
color: '#aa5d00',
|
|
97
|
-
},
|
|
98
|
-
'hljs-builtin-name': {
|
|
99
|
-
color: '#aa5d00',
|
|
100
|
-
},
|
|
101
|
-
'hljs-literal': {
|
|
102
|
-
color: '#aa5d00',
|
|
103
|
-
},
|
|
104
|
-
'hljs-type': {
|
|
105
|
-
color: '#aa5d00',
|
|
106
|
-
},
|
|
107
|
-
'hljs-params': {
|
|
108
|
-
color: '#aa5d00',
|
|
109
|
-
},
|
|
110
|
-
'hljs-meta': {
|
|
111
|
-
color: '#aa5d00',
|
|
112
|
-
},
|
|
113
|
-
'hljs-link': {
|
|
114
|
-
color: '#aa5d00',
|
|
115
|
-
},
|
|
116
|
-
'hljs-attribute': {
|
|
117
|
-
color: '#aa5d00',
|
|
118
|
-
},
|
|
119
|
-
'hljs-string': {
|
|
120
|
-
color: '#008000',
|
|
121
|
-
},
|
|
122
|
-
'hljs-symbol': {
|
|
123
|
-
color: '#008000',
|
|
124
|
-
},
|
|
125
|
-
'hljs-bullet': {
|
|
126
|
-
color: '#008000',
|
|
127
|
-
},
|
|
128
|
-
'hljs-addition': {
|
|
129
|
-
color: '#008000',
|
|
130
|
-
},
|
|
131
|
-
'hljs-title': {
|
|
132
|
-
color: '#007faa',
|
|
133
|
-
},
|
|
134
|
-
'hljs-section': {
|
|
135
|
-
color: '#007faa',
|
|
136
|
-
},
|
|
137
|
-
'hljs-keyword': {
|
|
138
|
-
color: '#7928a1',
|
|
139
|
-
},
|
|
140
|
-
'hljs-selector-tag': {
|
|
141
|
-
color: '#7928a1',
|
|
142
|
-
},
|
|
143
|
-
'hljs-emphasis': {
|
|
144
|
-
fontStyle: 'italic',
|
|
145
|
-
},
|
|
146
|
-
'hljs-strong': {
|
|
147
|
-
fontWeight: 'bold',
|
|
148
|
-
},
|
|
149
|
-
};
|