@dxos/react-ui-syntax-highlighter 0.7.2 → 0.7.3-staging.971cd8d

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.
Files changed (15) hide show
  1. package/dist/lib/browser/index.mjs +138 -4
  2. package/dist/lib/browser/index.mjs.map +4 -4
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/lib/node/index.cjs +134 -4
  5. package/dist/lib/node/index.cjs.map +4 -4
  6. package/dist/lib/node/meta.json +1 -1
  7. package/dist/lib/node-esm/index.mjs +138 -4
  8. package/dist/lib/node-esm/index.mjs.map +4 -4
  9. package/dist/lib/node-esm/meta.json +1 -1
  10. package/dist/types/src/SyntaxHighlighter.d.ts.map +1 -1
  11. package/dist/types/src/styles.d.ts +10 -0
  12. package/dist/types/src/styles.d.ts.map +1 -0
  13. package/package.json +6 -6
  14. package/src/SyntaxHighlighter.tsx +4 -6
  15. package/src/styles.ts +149 -0
package/dist/lib/browser/index.mjs CHANGED
@@ -1,16 +1,150 @@
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";
6
4
  import { useThemeContext } from "@dxos/react-ui";
7
5
  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
8
142
  var zeroWidthSpace = "\u200B";
9
143
  var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
10
144
  const { themeMode } = useThemeContext();
11
145
  return /* @__PURE__ */ React.createElement(NativeSyntaxHighlighter, {
12
- className: mx("w-full", classNames),
13
- style: themeMode === "dark" ? styleDark : styleLight,
146
+ className: mx("w-full p-0.5", classNames),
147
+ style: themeMode === "dark" ? alabasterDark : githubLight,
14
148
  ...props
15
149
  }, children || fallback);
16
150
  };
package/dist/lib/browser/index.mjs.map CHANGED
@@ -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// 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"]
3
+ "sources": ["../../../src/SyntaxHighlighter.tsx", "../../../src/styles.ts"],
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\nimport { alabasterDark, githubLight } from './styles';\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 p-0.5', classNames)}\n style={themeMode === 'dark' ? alabasterDark : githubLight}\n {...props}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type CSSProperties } from 'react';\n\n// https://highlightjs.org/examples\n// https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo\n// https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_STYLES_HLJS.MD\n\n/**\n * https://github.com/findrakecil/hljs-alabaster-dark/blob/master/readme.md\n */\nexport const alabasterDark: Record<string, CSSProperties> = {\n hljs: {\n display: 'block',\n overflowX: 'auto',\n color: '#CECECE',\n padding: '0.5em',\n },\n 'hljs-comment': {\n color: '#DFDF8E',\n },\n 'hljs-string': {\n color: '#95CB82',\n },\n 'hljs-meta-string': {\n color: '#95CB82',\n },\n 'hljs-regexp': {\n color: '#95CB82',\n },\n 'hljs-number': {\n color: '#CC8BC9',\n },\n 'hljs-literal': {\n color: '#CC8BC9',\n },\n 'hljs-title': {\n color: '#71ADE7',\n },\n 'hljs-deletion': {\n backgroundColor: '#ffdddd',\n color: '#434343',\n },\n 'hljs-addition': {\n backgroundColor: '#ddffdd',\n color: '#434343',\n },\n};\n\n/**\n * https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css\n */\nexport const githubLight: Record<string, CSSProperties> = {\n hljs: {\n display: 'block',\n overflowX: 'auto',\n color: '#545454',\n padding: '0.5em',\n },\n 'hljs-comment': {\n color: '#696969',\n },\n 'hljs-quote': {\n color: '#696969',\n },\n 'hljs-variable': {\n color: '#d91e18',\n },\n 'hljs-template-variable': {\n color: '#d91e18',\n },\n 'hljs-tag': {\n color: '#d91e18',\n },\n 'hljs-name': {\n color: '#d91e18',\n },\n 'hljs-selector-id': {\n color: '#d91e18',\n },\n 'hljs-selector-class': {\n color: '#d91e18',\n },\n 'hljs-regexp': {\n color: '#d91e18',\n },\n 'hljs-deletion': {\n color: '#d91e18',\n },\n 'hljs-number': {\n color: '#aa5d00',\n },\n 'hljs-built_in': {\n color: '#aa5d00',\n },\n 'hljs-builtin-name': {\n color: '#aa5d00',\n },\n 'hljs-literal': {\n color: '#aa5d00',\n },\n 'hljs-type': {\n color: '#aa5d00',\n },\n 'hljs-params': {\n color: '#aa5d00',\n },\n 'hljs-meta': {\n color: '#aa5d00',\n },\n 'hljs-link': {\n color: '#aa5d00',\n },\n 'hljs-attribute': {\n color: '#aa5d00',\n },\n 'hljs-string': {\n color: '#008000',\n },\n 'hljs-symbol': {\n color: '#008000',\n },\n 'hljs-bullet': {\n color: '#008000',\n },\n 'hljs-addition': {\n color: '#008000',\n },\n 'hljs-title': {\n color: '#007faa',\n },\n 'hljs-section': {\n color: '#007faa',\n },\n 'hljs-keyword': {\n color: '#7928a1',\n },\n 'hljs-selector-tag': {\n color: '#7928a1',\n },\n 'hljs-emphasis': {\n fontStyle: 'italic',\n },\n 'hljs-strong': {\n fontWeight: 'bold',\n },\n};\n"],
5
+ "mappings": ";AAIA,OAAOA,WAAW;AAKlB,OAAOC,6BAA6B;AAEpC,SAA+BC,uBAAuB;AACtD,SAASC,UAAU;;;ACCZ,IAAMC,gBAA+C;EAC1DC,MAAM;IACJC,SAAS;IACTC,WAAW;IACXC,OAAO;IACPC,SAAS;EACX;EACA,gBAAgB;IACdD,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,oBAAoB;IAClBA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,cAAc;IACZA,OAAO;EACT;EACA,iBAAiB;IACfE,iBAAiB;IACjBF,OAAO;EACT;EACA,iBAAiB;IACfE,iBAAiB;IACjBF,OAAO;EACT;AACF;AAKO,IAAMG,cAA6C;EACxDN,MAAM;IACJC,SAAS;IACTC,WAAW;IACXC,OAAO;IACPC,SAAS;EACX;EACA,gBAAgB;IACdD,OAAO;EACT;EACA,cAAc;IACZA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,0BAA0B;IACxBA,OAAO;EACT;EACA,YAAY;IACVA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,oBAAoB;IAClBA,OAAO;EACT;EACA,uBAAuB;IACrBA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,qBAAqB;IACnBA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,kBAAkB;IAChBA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,cAAc;IACZA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,qBAAqB;IACnBA,OAAO;EACT;EACA,iBAAiB;IACfI,WAAW;EACb;EACA,eAAe;IACbC,YAAY;EACd;AACF;;;ADpIA,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,gBAAgBR,UAAAA;IAC9BS,OAAOL,cAAc,SAASM,gBAAgBC;IAC7C,GAAGR;KAGHD,YAAYD,QAAAA;AAGnB;",
6
+ "names": ["React", "NativeSyntaxHighlighter", "useThemeContext", "mx", "alabasterDark", "hljs", "display", "overflowX", "color", "padding", "backgroundColor", "githubLight", "fontStyle", "fontWeight", "zeroWidthSpace", "SyntaxHighlighter", "classNames", "fallback", "children", "props", "themeMode", "useThemeContext", "NativeSyntaxHighlighter", "className", "mx", "style", "alabasterDark", "githubLight"]
7
7
  }
package/dist/lib/browser/meta.json CHANGED
@@ -1 +1 @@
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}}}
1
+ {"inputs":{"packages/ui/react-ui-syntax-highlighter/src/styles.ts":{"bytes":9075,"imports":[],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx":{"bytes":4144,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/light-async","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/styles.ts","kind":"import-statement","original":"./styles"}],"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":6346},"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":"@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":598},"packages/ui/react-ui-syntax-highlighter/src/styles.ts":{"bytesInOutput":2081},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytesInOutput":0}},"bytes":2943}}}
package/dist/lib/node/index.cjs CHANGED
@@ -33,16 +33,146 @@ __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"));
38
36
  var import_react_ui = require("@dxos/react-ui");
39
37
  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
+ };
40
170
  var zeroWidthSpace = "\u200B";
41
171
  var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
42
172
  const { themeMode } = (0, import_react_ui.useThemeContext)();
43
173
  return /* @__PURE__ */ import_react.default.createElement(import_light_async.default, {
44
- className: (0, import_react_ui_theme.mx)("w-full", classNames),
45
- style: themeMode === "dark" ? import_a11y_dark.default : import_a11y_light.default,
174
+ className: (0, import_react_ui_theme.mx)("w-full p-0.5", classNames),
175
+ style: themeMode === "dark" ? alabasterDark : githubLight,
46
176
  ...props
47
177
  }, children || fallback);
48
178
  };
package/dist/lib/node/index.cjs.map CHANGED
@@ -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// 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"]
3
+ "sources": ["../../../src/SyntaxHighlighter.tsx", "../../../src/styles.ts"],
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\nimport { alabasterDark, githubLight } from './styles';\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 p-0.5', classNames)}\n style={themeMode === 'dark' ? alabasterDark : githubLight}\n {...props}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type CSSProperties } from 'react';\n\n// https://highlightjs.org/examples\n// https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo\n// https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_STYLES_HLJS.MD\n\n/**\n * https://github.com/findrakecil/hljs-alabaster-dark/blob/master/readme.md\n */\nexport const alabasterDark: Record<string, CSSProperties> = {\n hljs: {\n display: 'block',\n overflowX: 'auto',\n color: '#CECECE',\n padding: '0.5em',\n },\n 'hljs-comment': {\n color: '#DFDF8E',\n },\n 'hljs-string': {\n color: '#95CB82',\n },\n 'hljs-meta-string': {\n color: '#95CB82',\n },\n 'hljs-regexp': {\n color: '#95CB82',\n },\n 'hljs-number': {\n color: '#CC8BC9',\n },\n 'hljs-literal': {\n color: '#CC8BC9',\n },\n 'hljs-title': {\n color: '#71ADE7',\n },\n 'hljs-deletion': {\n backgroundColor: '#ffdddd',\n color: '#434343',\n },\n 'hljs-addition': {\n backgroundColor: '#ddffdd',\n color: '#434343',\n },\n};\n\n/**\n * https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css\n */\nexport const githubLight: Record<string, CSSProperties> = {\n hljs: {\n display: 'block',\n overflowX: 'auto',\n color: '#545454',\n padding: '0.5em',\n },\n 'hljs-comment': {\n color: '#696969',\n },\n 'hljs-quote': {\n color: '#696969',\n },\n 'hljs-variable': {\n color: '#d91e18',\n },\n 'hljs-template-variable': {\n color: '#d91e18',\n },\n 'hljs-tag': {\n color: '#d91e18',\n },\n 'hljs-name': {\n color: '#d91e18',\n },\n 'hljs-selector-id': {\n color: '#d91e18',\n },\n 'hljs-selector-class': {\n color: '#d91e18',\n },\n 'hljs-regexp': {\n color: '#d91e18',\n },\n 'hljs-deletion': {\n color: '#d91e18',\n },\n 'hljs-number': {\n color: '#aa5d00',\n },\n 'hljs-built_in': {\n color: '#aa5d00',\n },\n 'hljs-builtin-name': {\n color: '#aa5d00',\n },\n 'hljs-literal': {\n color: '#aa5d00',\n },\n 'hljs-type': {\n color: '#aa5d00',\n },\n 'hljs-params': {\n color: '#aa5d00',\n },\n 'hljs-meta': {\n color: '#aa5d00',\n },\n 'hljs-link': {\n color: '#aa5d00',\n },\n 'hljs-attribute': {\n color: '#aa5d00',\n },\n 'hljs-string': {\n color: '#008000',\n },\n 'hljs-symbol': {\n color: '#008000',\n },\n 'hljs-bullet': {\n color: '#008000',\n },\n 'hljs-addition': {\n color: '#008000',\n },\n 'hljs-title': {\n color: '#007faa',\n },\n 'hljs-section': {\n color: '#007faa',\n },\n 'hljs-keyword': {\n color: '#7928a1',\n },\n 'hljs-selector-tag': {\n color: '#7928a1',\n },\n 'hljs-emphasis': {\n fontStyle: 'italic',\n },\n 'hljs-strong': {\n fontWeight: 'bold',\n },\n};\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,mBAAkB;AAKlB,yBAAoC;AAEpC,sBAAsD;AACtD,4BAAmB;ACCZ,IAAMA,gBAA+C;EAC1DC,MAAM;IACJC,SAAS;IACTC,WAAW;IACXC,OAAO;IACPC,SAAS;EACX;EACA,gBAAgB;IACdD,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,oBAAoB;IAClBA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,cAAc;IACZA,OAAO;EACT;EACA,iBAAiB;IACfE,iBAAiB;IACjBF,OAAO;EACT;EACA,iBAAiB;IACfE,iBAAiB;IACjBF,OAAO;EACT;AACF;AAKO,IAAMG,cAA6C;EACxDN,MAAM;IACJC,SAAS;IACTC,WAAW;IACXC,OAAO;IACPC,SAAS;EACX;EACA,gBAAgB;IACdD,OAAO;EACT;EACA,cAAc;IACZA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,0BAA0B;IACxBA,OAAO;EACT;EACA,YAAY;IACVA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,oBAAoB;IAClBA,OAAO;EACT;EACA,uBAAuB;IACrBA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,qBAAqB;IACnBA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,kBAAkB;IAChBA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,cAAc;IACZA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,qBAAqB;IACnBA,OAAO;EACT;EACA,iBAAiB;IACfI,WAAW;EACb;EACA,eAAe;IACbC,YAAY;EACd;AACF;ADpIA,IAAMC,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,gBAAgBT,UAAAA;IAC9BU,OAAON,cAAc,SAAShB,gBAAgBO;IAC7C,GAAGQ;KAGHD,YAAYD,QAAAA;AAGnB;",
6
+ "names": ["alabasterDark", "hljs", "display", "overflowX", "color", "padding", "backgroundColor", "githubLight", "fontStyle", "fontWeight", "zeroWidthSpace", "SyntaxHighlighter", "classNames", "fallback", "children", "props", "themeMode", "useThemeContext", "React", "NativeSyntaxHighlighter", "className", "mx", "style"]
7
7
  }
package/dist/lib/node/meta.json CHANGED
@@ -1 +1 @@
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}}}
1
+ {"inputs":{"packages/ui/react-ui-syntax-highlighter/src/styles.ts":{"bytes":9075,"imports":[],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx":{"bytes":4144,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/light-async","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/styles.ts","kind":"import-statement","original":"./styles"}],"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":6346},"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":"@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":598},"packages/ui/react-ui-syntax-highlighter/src/styles.ts":{"bytesInOutput":2081},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytesInOutput":0}},"bytes":2943}}}
package/dist/lib/node-esm/index.mjs CHANGED
@@ -3,16 +3,150 @@ 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";
8
6
  import { useThemeContext } from "@dxos/react-ui";
9
7
  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
10
144
  var zeroWidthSpace = "\u200B";
11
145
  var SyntaxHighlighter = ({ classNames, fallback = zeroWidthSpace, children, ...props }) => {
12
146
  const { themeMode } = useThemeContext();
13
147
  return /* @__PURE__ */ React.createElement(NativeSyntaxHighlighter, {
14
- className: mx("w-full", classNames),
15
- style: themeMode === "dark" ? styleDark : styleLight,
148
+ className: mx("w-full p-0.5", classNames),
149
+ style: themeMode === "dark" ? alabasterDark : githubLight,
16
150
  ...props
17
151
  }, children || fallback);
18
152
  };
package/dist/lib/node-esm/index.mjs.map CHANGED
@@ -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// 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"]
3
+ "sources": ["../../../src/SyntaxHighlighter.tsx", "../../../src/styles.ts"],
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\nimport { alabasterDark, githubLight } from './styles';\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 p-0.5', classNames)}\n style={themeMode === 'dark' ? alabasterDark : githubLight}\n {...props}\n >\n {/* Non-empty fallback prevents collapse. */}\n {children || fallback}\n </NativeSyntaxHighlighter>\n );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type CSSProperties } from 'react';\n\n// https://highlightjs.org/examples\n// https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo\n// https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_STYLES_HLJS.MD\n\n/**\n * https://github.com/findrakecil/hljs-alabaster-dark/blob/master/readme.md\n */\nexport const alabasterDark: Record<string, CSSProperties> = {\n hljs: {\n display: 'block',\n overflowX: 'auto',\n color: '#CECECE',\n padding: '0.5em',\n },\n 'hljs-comment': {\n color: '#DFDF8E',\n },\n 'hljs-string': {\n color: '#95CB82',\n },\n 'hljs-meta-string': {\n color: '#95CB82',\n },\n 'hljs-regexp': {\n color: '#95CB82',\n },\n 'hljs-number': {\n color: '#CC8BC9',\n },\n 'hljs-literal': {\n color: '#CC8BC9',\n },\n 'hljs-title': {\n color: '#71ADE7',\n },\n 'hljs-deletion': {\n backgroundColor: '#ffdddd',\n color: '#434343',\n },\n 'hljs-addition': {\n backgroundColor: '#ddffdd',\n color: '#434343',\n },\n};\n\n/**\n * https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css\n */\nexport const githubLight: Record<string, CSSProperties> = {\n hljs: {\n display: 'block',\n overflowX: 'auto',\n color: '#545454',\n padding: '0.5em',\n },\n 'hljs-comment': {\n color: '#696969',\n },\n 'hljs-quote': {\n color: '#696969',\n },\n 'hljs-variable': {\n color: '#d91e18',\n },\n 'hljs-template-variable': {\n color: '#d91e18',\n },\n 'hljs-tag': {\n color: '#d91e18',\n },\n 'hljs-name': {\n color: '#d91e18',\n },\n 'hljs-selector-id': {\n color: '#d91e18',\n },\n 'hljs-selector-class': {\n color: '#d91e18',\n },\n 'hljs-regexp': {\n color: '#d91e18',\n },\n 'hljs-deletion': {\n color: '#d91e18',\n },\n 'hljs-number': {\n color: '#aa5d00',\n },\n 'hljs-built_in': {\n color: '#aa5d00',\n },\n 'hljs-builtin-name': {\n color: '#aa5d00',\n },\n 'hljs-literal': {\n color: '#aa5d00',\n },\n 'hljs-type': {\n color: '#aa5d00',\n },\n 'hljs-params': {\n color: '#aa5d00',\n },\n 'hljs-meta': {\n color: '#aa5d00',\n },\n 'hljs-link': {\n color: '#aa5d00',\n },\n 'hljs-attribute': {\n color: '#aa5d00',\n },\n 'hljs-string': {\n color: '#008000',\n },\n 'hljs-symbol': {\n color: '#008000',\n },\n 'hljs-bullet': {\n color: '#008000',\n },\n 'hljs-addition': {\n color: '#008000',\n },\n 'hljs-title': {\n color: '#007faa',\n },\n 'hljs-section': {\n color: '#007faa',\n },\n 'hljs-keyword': {\n color: '#7928a1',\n },\n 'hljs-selector-tag': {\n color: '#7928a1',\n },\n 'hljs-emphasis': {\n fontStyle: 'italic',\n },\n 'hljs-strong': {\n fontWeight: 'bold',\n },\n};\n"],
5
+ "mappings": ";;;AAIA,OAAOA,WAAW;AAKlB,OAAOC,6BAA6B;AAEpC,SAA+BC,uBAAuB;AACtD,SAASC,UAAU;;;ACCZ,IAAMC,gBAA+C;EAC1DC,MAAM;IACJC,SAAS;IACTC,WAAW;IACXC,OAAO;IACPC,SAAS;EACX;EACA,gBAAgB;IACdD,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,oBAAoB;IAClBA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,cAAc;IACZA,OAAO;EACT;EACA,iBAAiB;IACfE,iBAAiB;IACjBF,OAAO;EACT;EACA,iBAAiB;IACfE,iBAAiB;IACjBF,OAAO;EACT;AACF;AAKO,IAAMG,cAA6C;EACxDN,MAAM;IACJC,SAAS;IACTC,WAAW;IACXC,OAAO;IACPC,SAAS;EACX;EACA,gBAAgB;IACdD,OAAO;EACT;EACA,cAAc;IACZA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,0BAA0B;IACxBA,OAAO;EACT;EACA,YAAY;IACVA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,oBAAoB;IAClBA,OAAO;EACT;EACA,uBAAuB;IACrBA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,qBAAqB;IACnBA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,aAAa;IACXA,OAAO;EACT;EACA,kBAAkB;IAChBA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,eAAe;IACbA,OAAO;EACT;EACA,iBAAiB;IACfA,OAAO;EACT;EACA,cAAc;IACZA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,gBAAgB;IACdA,OAAO;EACT;EACA,qBAAqB;IACnBA,OAAO;EACT;EACA,iBAAiB;IACfI,WAAW;EACb;EACA,eAAe;IACbC,YAAY;EACd;AACF;;;ADpIA,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,gBAAgBR,UAAAA;IAC9BS,OAAOL,cAAc,SAASM,gBAAgBC;IAC7C,GAAGR;KAGHD,YAAYD,QAAAA;AAGnB;",
6
+ "names": ["React", "NativeSyntaxHighlighter", "useThemeContext", "mx", "alabasterDark", "hljs", "display", "overflowX", "color", "padding", "backgroundColor", "githubLight", "fontStyle", "fontWeight", "zeroWidthSpace", "SyntaxHighlighter", "classNames", "fallback", "children", "props", "themeMode", "useThemeContext", "NativeSyntaxHighlighter", "className", "mx", "style", "alabasterDark", "githubLight"]
7
7
  }
package/dist/lib/node-esm/meta.json CHANGED
@@ -1 +1 @@
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
+ {"inputs":{"packages/ui/react-ui-syntax-highlighter/src/styles.ts":{"bytes":9075,"imports":[],"format":"esm"},"packages/ui/react-ui-syntax-highlighter/src/SyntaxHighlighter.tsx":{"bytes":4144,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"react-syntax-highlighter/dist/esm/light-async","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-syntax-highlighter/src/styles.ts","kind":"import-statement","original":"./styles"}],"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":6348},"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":"@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":598},"packages/ui/react-ui-syntax-highlighter/src/styles.ts":{"bytesInOutput":2081},"packages/ui/react-ui-syntax-highlighter/src/index.ts":{"bytesInOutput":0}},"bytes":3036}}}
package/dist/types/src/SyntaxHighlighter.d.ts.map CHANGED
@@ -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;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"}
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;AAMvG,OAAO,EAAE,KAAK,eAAe,EAAmB,MAAM,gBAAgB,CAAC;AAOvE,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/dist/types/src/styles.d.ts ADDED
@@ -0,0 +1,10 @@
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
package/dist/types/src/styles.d.ts.map ADDED
@@ -0,0 +1 @@
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/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.3-staging.971cd8d",
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/storybook-utils": "0.7.2",
36
- "@dxos/react-ui": "0.7.2",
37
- "@dxos/react-ui-theme": "0.7.2"
35
+ "@dxos/react-ui-theme": "0.7.3-staging.971cd8d",
36
+ "@dxos/storybook-utils": "0.7.3-staging.971cd8d",
37
+ "@dxos/react-ui": "0.7.3-staging.971cd8d"
38
38
  },
39
39
  "peerDependencies": {
40
40
  "react": "~18.2.0",
41
41
  "react-dom": "~18.2.0",
42
- "@dxos/react-ui": "0.7.2",
43
- "@dxos/react-ui-theme": "0.7.2"
42
+ "@dxos/react-ui-theme": "0.7.3-staging.971cd8d",
43
+ "@dxos/react-ui": "0.7.3-staging.971cd8d"
44
44
  },
45
45
  "publishConfig": {
46
46
  "access": "public"
package/src/SyntaxHighlighter.tsx CHANGED
@@ -8,14 +8,12 @@ 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';
15
11
 
16
12
  import { type ThemedClassName, useThemeContext } from '@dxos/react-ui';
17
13
  import { mx } from '@dxos/react-ui-theme';
18
14
 
15
+ import { alabasterDark, githubLight } from './styles';
16
+
19
17
  const zeroWidthSpace = '\u200b';
20
18
 
21
19
  export type SyntaxHighlighterProps = ThemedClassName<
@@ -36,8 +34,8 @@ export const SyntaxHighlighter = ({
36
34
  const { themeMode } = useThemeContext();
37
35
  return (
38
36
  <NativeSyntaxHighlighter
39
- className={mx('w-full', classNames)}
40
- style={themeMode === 'dark' ? styleDark : styleLight}
37
+ className={mx('w-full p-0.5', classNames)}
38
+ style={themeMode === 'dark' ? alabasterDark : githubLight}
41
39
  {...props}
42
40
  >
43
41
  {/* Non-empty fallback prevents collapse. */}
package/src/styles.ts ADDED
@@ -0,0 +1,149 @@
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
+ };