💄 style: Fix shiki theme (resolve #292)

Author: canisminor1990

package.json

@@ -92,21 +92,21 @@
     ]
   },
   "dependencies": {
-    "@ant-design/cssinjs": "^1.22.1",
+    "@ant-design/cssinjs": "^1.23.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
-    "@floating-ui/react": "^0.27.3",
+    "@floating-ui/react": "^0.27.5",
     "@giscus/react": "^3.1.0",
     "@lobehub/fluent-emoji": "^1.2.0",
-    "@lobehub/icons": "^1.62.0",
+    "@lobehub/icons": "^1.89.0",
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@shikijs/transformers": "^1.26.1",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@shikijs/transformers": "^3.2.1",
     "@splinetool/runtime": "0.9.526",
     "ahooks": "^3.8.4",
     "antd-style": "^3.7.1",
@@ -116,77 +116,77 @@
     "emoji-mart": "^5.6.0",
     "fast-deep-equal": "^3.1.3",
     "immer": "^10.1.1",
-    "leva": "^0.9.35",
+    "leva": "^0.9.36",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.475.0",
-    "mermaid": "^11.4.1",
+    "mermaid": "^11.5.0",
     "numeral": "^2.0.6",
     "polished": "^4.3.1",
     "query-string": "^9.1.1",
     "rc-footer": "^0.6.8",
-    "re-resizable": "^6.10.3",
+    "re-resizable": "^6.11.2",
     "react-avatar-editor": "^13.0.2",
     "react-error-boundary": "^5.0.0",
     "react-layout-kit": "^1.9.1",
-    "react-markdown": "^9.0.3",
+    "react-markdown": "^9.1.0",
     "react-merge-refs": "^2.1.1",
-    "react-rnd": "^10.4.14",
+    "react-rnd": "^10.5.2",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
     "remark-breaks": "^4.0.0",
-    "remark-gfm": "^4.0.0",
+    "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "shiki": "^1.26.1",
-    "swr": "^2.3.0",
+    "shiki": "^3.2.1",
+    "swr": "^2.3.3",
     "ts-md5": "^1.3.1",
     "unified": "^11.0.5",
     "url-join": "^5.0.0",
     "use-merge-value": "^1.2.0",
-    "uuid": "^11.0.4"
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@ant-design/icons": "^5.5.2",
-    "@commitlint/cli": "^19.6.1",
-    "@lobehub/lint": "^1.25.4",
-    "@testing-library/react": "^16.1.0",
-    "@types/chroma-js": "^3.1.0",
+    "@ant-design/icons": "^5.6.1",
+    "@commitlint/cli": "^19.8.0",
+    "@lobehub/lint": "^1.25.7",
+    "@testing-library/react": "^16.2.0",
+    "@types/chroma-js": "^3.1.1",
     "@types/lodash-es": "^4.17.12",
     "@types/mdx": "^2.0.13",
     "@types/numeral": "^2.0.5",
     "@types/pangu": "^4.0.2",
-    "@types/react": "^19.0.4",
-    "@types/react-avatar-editor": "^13.0.3",
-    "@types/react-dom": "^19.0.2",
+    "@types/react": "^19.0.12",
+    "@types/react-avatar-editor": "^13.0.4",
+    "@types/react-dom": "^19.0.4",
     "@types/unist": "^3.0.3",
     "@types/uuid": "^10.0.0",
-    "@vitest/coverage-v8": "^3",
-    "antd": "^5.23.0",
+    "@vitest/coverage-v8": "^3.0.9",
+    "antd": "^5.24.4",
     "babel-plugin-antd-style": "^1.0.4",
     "clean-package": "^2.2.0",
-    "commitlint": "^19.6.1",
+    "commitlint": "^19.8.0",
     "concurrently": "^9.1.2",
     "cross-env": "^7.0.3",
     "dpdm": "^3.14.0",
-    "dumi": "^2.4.17",
+    "dumi": "^2.4.18",
     "dumi-theme-lobehub": "^1.15.0",
     "eslint": "^8.57.1",
-    "father": "^4.5.1",
+    "father": "^4.5.2",
     "husky": "^9.1.7",
     "jsdom": "^26.0.0",
-    "lint-staged": "^15.3.0",
+    "lint-staged": "^15.5.0",
     "mdast-util-to-markdown": "^2.1.2",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "remark": "^15.0.1",
     "remark-cli": "^12.0.1",
     "semantic-release": "^21.1.2",
     "stylelint": "^15.11.0",
-    "tsx": "^4.19.2",
-    "typescript": "^5.7.3",
+    "tsx": "^4.19.3",
+    "typescript": "^5.8.2",
     "unist-util-is": "^6.0.0",
     "unist-util-visit": "^5.0.0",
-    "vitest": "^3.0.4"
+    "vitest": "^3.0.9"
   },
   "peerDependencies": {
     "antd": "^5.23.0",

src/Highlighter/demos/data.ts

@@ -1,11 +1,61 @@
-export const code = `export default ({ children, className }: MarkdownProps) => {
-  const { styles } = useStyles();
-  return (
-    <ReactMarkdown
-      className={cx(styles.container, className)}
-      components={{ pre: CodeBlock, code: Code }}
-    >
-      {children}
-    </ReactMarkdown>
-  );
-}`;
+export const code = `import { useTheme } from 'antd-style';
+import mermaid from 'mermaid';
+import { useCallback, useEffect, useState } from 'react';
+
+export const useMermaid = (content: string) => {
+  const [mermaidContent, setMermaidContent] = useState<string>();
+  const theme = useTheme();
+  useEffect(() => {
+    mermaid.initialize({
+      fontFamily: theme.fontFamilyCode,
+      gantt: {
+        useWidth: 1920,
+      },
+      securityLevel: 'loose',
+      startOnLoad: true,
+      theme: theme.isDarkMode ? 'dark' : 'default',
+      themeVariables: {
+        errorBkgColor: theme.colorError,
+        errorTextColor: theme.colorText,
+        fontSize: 14,
+        lineColor: theme.colorText,
+        primaryBorderColor: theme.colorPrimaryBorder,
+        primaryColor: theme.colorPrimaryBg,
+        primaryTextColor: theme.colorText,
+        secondaryColor: theme.colorInfo,
+        tertiaryColor: theme.colorSuccess,
+      },
+    });
+    mermaid.contentLoaded();
+  }, [mermaidContent, theme.isDarkMode]);
+
+  const checkSyntax = async (textStr: string) => {
+    try {
+      if (await mermaid.parse(textStr)) {
+        setMermaidContent(textStr);
+      }
+    } catch {}
+  };
+
+  useEffect(() => {
+    checkSyntax(content);
+  }, [content]);
+
+  return useCallback(() => {
+    return (
+      <pre
+        className={'mermaid'}
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          fontSize: 14,
+          justifyContent: 'center',
+          overflow: 'auto',
+        }}
+      >
+        {mermaidContent}
+      </pre>
+    );
+  }, [mermaidContent, theme.isDarkMode]);
+};
+`;