- {({ className, style, tokens, getLineProps, getTokenProps }) => (
-
-
- {tokens.map((line, i) => {
- const { key: _lk, ...lineProps } = getLineProps({ line });
- return (
-
- {line.map((token, j) => {
- const { key: _tk, ...tokenProps } = getTokenProps({ token });
- return ;
- })}
-
- );
- })}
-
-
- )}
-
- );
-};
diff --git a/apps/docs/src/components/code-block/code-theme.js b/apps/docs/src/components/demo-block/code-theme.ts
similarity index 100%
rename from apps/docs/src/components/code-block/code-theme.js
rename to apps/docs/src/components/demo-block/code-theme.ts
diff --git a/apps/docs/src/components/demo-block/index.tsx b/apps/docs/src/components/demo-block/index.tsx
index e9a5c34e..044d46c8 100644
--- a/apps/docs/src/components/demo-block/index.tsx
+++ b/apps/docs/src/components/demo-block/index.tsx
@@ -1,7 +1,7 @@
import React, { useState, useCallback, useRef } from 'react';
import { useRunner } from 'react-runner';
import { Highlight, themes } from 'prism-react-renderer';
-import { LightCodeTheme, DarkCodeTheme } from '../code-block/code-theme';
+import { LightCodeTheme, DarkCodeTheme } from './code-theme';
import * as TinyDesign from '@tiny-design/react';
import * as TinyIcons from '@tiny-design/icons';
import CollapseTransition from '@tiny-design/react/collapse-transition';
diff --git a/apps/docs/src/components/highlighted-code/HighlightedCode.tsx b/apps/docs/src/components/highlighted-code/HighlightedCode.tsx
new file mode 100644
index 00000000..f2f8ecde
--- /dev/null
+++ b/apps/docs/src/components/highlighted-code/HighlightedCode.tsx
@@ -0,0 +1,56 @@
+import { Highlight, Prism, PrismTheme } from 'prism-react-renderer';
+import { DarkCodeTheme, LightCodeTheme } from '../demo-block/code-theme';
+import { useTheme } from '@tiny-design/react';
+
+// Register bash/shell grammar (not included in prism-react-renderer's default bundle)
+Prism.languages.bash = Prism.languages.shell = {
+ comment: { pattern: /(^|[^"{\\$])#.*/, lookbehind: true },
+ 'shell-symbol': { pattern: /^\$(?=\s)/m, alias: 'punctuation' },
+ string: [
+ { pattern: /\$'(?:[^'\\]|\\[\s\S])*'/, greedy: true },
+ { pattern: /(^|[^\\])"(?:[^"\\]|\\.)*"/, lookbehind: true, greedy: true },
+ { pattern: /(^|[^\\])'[^']*'/, lookbehind: true, greedy: true },
+ ],
+ variable: [/\$\{[^}]+\}/, /\$\([^)]+\)/, /\$(?:\w+|[!#?*@_])/],
+ keyword: /\b(?:if|then|else|elif|fi|for|do|done|case|esac|while|until|function|in|select|return|exit)\b/,
+ function:
+ /\b(?:npm|npx|node|yarn|pnpm|bun|git|curl|wget|mkdir|cp|mv|rm|ls|cat|grep|sed|awk|chmod|chown|sudo|apt|brew|pip|python|ruby|go|cargo|make|docker|cd|echo|export|source|touch)\b/,
+ 'flag': { pattern: /(^|\s)--?[\w-]+/, lookbehind: true, alias: 'keyword' },
+ number: /\b\d+\b/,
+ operator: /&&|\|\||[|;]/,
+ punctuation: /[{}[\]()]/,
+ };
+
+ export const HighlightedCode = ({ className, children }: { className: string, children: string }) => {
+ const { resolvedTheme } = useTheme();
+ const codeTheme = resolvedTheme === 'dark' ? DarkCodeTheme : LightCodeTheme;
+
+ let language = 'markup';
+ if (className != null) {
+ language = className.replace(/language-/, '');
+ }
+
+ const code = String(children ?? '').trim();
+
+ return (
+ Some contents...
Some contents...
diff --git a/packages/react/src/drawer/demo/MultiLevel.tsx b/packages/react/src/drawer/demo/MultiLevel.tsx
index 5423a8fc..75f40c91 100644
--- a/packages/react/src/drawer/demo/MultiLevel.tsx
+++ b/packages/react/src/drawer/demo/MultiLevel.tsx
@@ -15,7 +15,7 @@ export default function MultiLevelDemo() {
size={520}
closable={false}
onClose={() => setVisible(false)}
- open={visible}
+ visible={visible}
>