docs: add Highlighter example

example/.dumirc.ts

@@ -87,6 +87,7 @@ export default defineConfig({
     ignorePreRenderError: true,
   },
   ...(isProduction ? { ssr: { builder: 'webpack' } } : {}),
+  ...(isPreview ? { devtool: 'source-map' } : {}),
   styles: [
     `html, body { background: transparent;  }
 

example/src/Example/demos/Highlighter.tsx

@@ -0,0 +1,46 @@
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
+import { Highlighter, HighlighterProps } from '@yuntijs/ui';
+
+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 default () => {
+  const store = useCreateStore();
+  const options: HighlighterProps | any = useControls(
+    {
+      children: {
+        rows: true,
+        value: code,
+      },
+      copyable: true,
+      copyButtonSize: {
+        options: ['site', 'large', 'normal', 'small'],
+        value: 'site',
+      },
+      language: 'tsx',
+      showLanguage: true,
+      spotlight: false,
+      type: {
+        options: ['ghost', 'block', 'pure'],
+        value: 'block',
+      },
+      fullFeatured: false,
+    },
+    { store }
+  );
+
+  return (
+    <StoryBook levaStore={store}>
+      <Highlighter {...options} style={{ ...options.style, width: '100%' }} />
+    </StoryBook>
+  );
+};

example/src/Example/index.md

@@ -27,3 +27,7 @@ description: This is an doc example
 ## Typography
 
 <code src="./demos/Typography.tsx"></code>
+
+## Highlighter
+
+<code src="./demos/Highlighter.tsx"></code>