🐛 fix: 修正默认的语法高亮不准确的问题

example/docs/config.zh-CN.md

@@ -0,0 +1,21 @@
+---
+title: 配置
+nav:
+  title: 配置
+  order: 4
+---
+
+# 开发说明
+
+## 开发状态
+
+`dumi-theme-antd-style` 目前处于开发中，如果相关问题提 [issues](https://github.com/arvinxx/dumi-theme-antd-style/issues) 反馈。
+
+## 开发
+
+```bash
+pnpm install
+
+# start dumi server
+pnpm run start
+```

example/docs/guide/markdown.zh-CN.md

@@ -0,0 +1,129 @@
+---
+order: 4
+title: Markdown 解析
+---
+
+# Markdown 解析
+
+本主题包内建了两种语法高亮器供你使用：
+
+- Prism
+- Shiki
+
+**Prism** 是最受欢迎的语法高亮器之一。它在代码文本中插入标签包裹需要高亮的元素并通过 CSS 文件来设置高亮样式。你可以直接使用 [Prism 官方预设的主题](https://github.com/PrismJS/prism-themes)，或者通过 [prism-theme-vars](https://github.com/antfu/prism-theme-vars) 快速创建自己的高亮主题。
+
+**Shiki**，一个基于 TextMate 语法的代码高亮器。它直接生成带样式的包裹元素，所以不需要引入额外的 CSS 文件。因为基于 TextMate 语法，所以生成的高亮区块非常准确，效果类似于 VS Code。同时这也意味着 shiki 可以支持任意 vscode 主题包。Shiki 也提供了 [很多预设主题](https://github.com/shikijs/shiki/blob/main/docs/themes.md)。不过 Shiki 需要通过 TextMate 主题来自定义高亮，这相对来说会比较麻烦。
+
+你可以参考以下描述来选择使用哪种高亮器：
+
+Prism 更容易自定义样式
+Shiki 生成的高亮区块更加准确
+默认情况下本主题包使用 Prism，你可以在 frontmatter 中修改设置：
+
+```markdown
+---
+highlighter: shiki
+---
+```
+
+## 开发状态
+
+`dumi-theme-antd-style` 默认采用
+
+## 开发
+
+```bash
+$ pnpm install
+
+# start dumi server
+$ pnpm run start
+```
+
+### Typescript 高亮
+
+```tsx | pure
+import { ReactElement, useMemo } from 'react';
+
+import { useAntdTheme, useThemeMode } from '@/hooks';
+import { PedestalProvider, reactCss } from '@/pedestal';
+import { Theme } from '@/types';
+
+import type { ThemeProviderProps } from './type';
+
+type TokenContainerProps<T, S = Record<string, string>> = Pick<
+  ThemeProviderProps<T, S>,
+  'children' | 'customToken' | 'customStylish' | 'prefixCls'
+>;
+
+const TokenContainer: <T, S>(props: TokenContainerProps<T, S>) => ReactElement | null = ({
+  children,
+  customToken: customTokenOrFn,
+  customStylish: stylishOrGetStylish,
+  prefixCls = 'ant',
+}) => {
+  const themeState = useThemeMode();
+  const { appearance, isDarkMode } = themeState;
+  const { stylish: antdStylish, ...token } = useAntdTheme();
+
+  // 获取 自定义 token
+  const customToken = useMemo(() => {
+    if (customTokenOrFn instanceof Function) {
+      return customTokenOrFn({ token, appearance, isDarkMode });
+    }
+
+    return customTokenOrFn;
+  }, [customTokenOrFn, token, appearance]);
+
+  // 获取 stylish
+  const customStylish = useMemo(() => {
+    if (!stylishOrGetStylish) return {};
+
+    return stylishOrGetStylish({
+      token: { ...token, ...customToken },
+      stylish: antdStylish,
+      appearance,
+      isDarkMode,
+      css: reactCss,
+    });
+  }, [stylishOrGetStylish, token, customToken, antdStylish, appearance]);
+
+  const stylish = useMemo(
+    () => ({ ...customStylish, ...antdStylish }),
+    [customStylish, antdStylish],
+  );
+
+  const theme: Theme = {
+    ...token,
+    ...customToken,
+    stylish,
+    ...themeState,
+    prefixCls,
+  };
+
+  return <PedestalProvider theme={theme}>{children}</PedestalProvider>;
+};
+
+export default TokenContainer;
+```
+
+### Diff
+
+```diff
+// index.tsx
+- import './index.less';
++ import useStyles from './style.ts';
+
+
+const Statistic: React.FC = () => {
++  const { styles } = useStyles();
+
+  //...
+
+  return (
+-      <div className={classString} style={style}>
++      <div className={cx(styles, classString)} style={style}>
+  // 下面的代码保持不变
+  //...
+  )}
+
+```

src/builtins/SourceCode/index.tsx

@@ -1,47 +1,17 @@
 import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
 import { Button, ConfigProvider, Tooltip } from 'antd';
-import { createStyles } from 'antd-style';
 import copy from 'copy-to-clipboard';
 import { FC } from 'react';
-import Highlighter, { HighlighterProps } from '../../components/Highlighter';
-import { useCopied } from '../../hooks/useCopied';
-
-const useStyles = createStyles(({ token, css, cx }) => {
-  const prefixCls = 'source-code';
-  const buttonHoverCls = `${prefixCls}-hover-btn`;
 
-  return {
-    container: cx(
-      prefixCls,
-      css`
-        position: relative;
-
-        pre {
-          background: ${token.colorFillTertiary} !important;
-          border-radius: 8px;
-          padding: 12px !important;
-        }
-
-        &:hover {
-          .${buttonHoverCls} {
-            opacity: 1;
-          }
-        }
-      `,
-    ),
-    button: cx(
-      buttonHoverCls,
-      css`
-        opacity: 0;
-        position: absolute;
-        right: 8px;
-        top: 8px;
-      `,
-    ),
-  };
-});
+import Highlighter from '../../components/Highlighter';
+import { useCopied } from '../../hooks/useCopied';
+import { useStyles } from './style';
 
-const SourceCode: FC<HighlighterProps> = ({ children, language }) => {
+interface SourceCodeProps {
+  lang: string;
+  children: string;
+}
+const SourceCode: FC<SourceCodeProps> = ({ children, lang: language }) => {
   const { copied, setCopied } = useCopied();
   const { styles, theme } = useStyles();
 

src/builtins/SourceCode/style.ts

@@ -0,0 +1,36 @@
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ token, css, cx }) => {
+  const prefixCls = 'source-code';
+  const buttonHoverCls = `${prefixCls}-hover-btn`;
+
+  return {
+    container: cx(
+      prefixCls,
+      css`
+        position: relative;
+
+        pre {
+          background: ${token.colorFillTertiary} !important;
+          border-radius: 8px;
+          padding: 12px !important;
+        }
+
+        &:hover {
+          .${buttonHoverCls} {
+            opacity: 1;
+          }
+        }
+      `,
+    ),
+    button: cx(
+      buttonHoverCls,
+      css`
+        opacity: 0;
+        position: absolute;
+        right: 8px;
+        top: 8px;
+      `,
+    ),
+  };
+});

src/components/Highlighter/index.tsx

@@ -1,21 +1,26 @@
 import { useThemeMode } from 'antd-style';
 import { memo } from 'react';
-import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { atomOneDark, githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
-import javascript from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript';
-import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json';
-import less from 'react-syntax-highlighter/dist/cjs/languages/hljs/less';
-import markdown from 'react-syntax-highlighter/dist/cjs/languages/hljs/markdown';
-import typescript from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript';
+import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash';
+import diff from 'react-syntax-highlighter/dist/cjs/languages/prism/diff';
+import javascript from 'react-syntax-highlighter/dist/cjs/languages/prism/javascript';
+import json from 'react-syntax-highlighter/dist/cjs/languages/prism/json';
+import less from 'react-syntax-highlighter/dist/cjs/languages/prism/less';
+import markdown from 'react-syntax-highlighter/dist/cjs/languages/prism/markdown';
+import tsx from 'react-syntax-highlighter/dist/cjs/languages/prism/tsx';
+import typescript from 'react-syntax-highlighter/dist/cjs/languages/prism/typescript';
 
 SyntaxHighlighter.registerLanguage('javascript', javascript);
 SyntaxHighlighter.registerLanguage('jsx', javascript);
 SyntaxHighlighter.registerLanguage('json', json);
 SyntaxHighlighter.registerLanguage('markdown', markdown);
 SyntaxHighlighter.registerLanguage('less', less);
 SyntaxHighlighter.registerLanguage('typescript', typescript);
-SyntaxHighlighter.registerLanguage('tsx', typescript);
+SyntaxHighlighter.registerLanguage('tsx', tsx);
+SyntaxHighlighter.registerLanguage('diff', diff);
+SyntaxHighlighter.registerLanguage('bash', bash);
 
 export interface HighlighterProps {
   children: string;
@@ -25,7 +30,7 @@ const Highlighter = memo<HighlighterProps>(({ children, language }) => {
   const { isDarkMode } = useThemeMode();
 
   return (
-    <SyntaxHighlighter language={language} style={isDarkMode ? atomOneDark : githubGist}>
+    <SyntaxHighlighter language={language} style={isDarkMode ? oneDark : oneLight}>
       {children}
     </SyntaxHighlighter>
   );