diff --git a/example/docs/config.zh-CN.md b/example/docs/config.zh-CN.md index e69de29..2637a7d 100644 --- a/example/docs/config.zh-CN.md +++ b/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 +``` diff --git a/example/docs/guide/markdown.zh-CN.md b/example/docs/guide/markdown.zh-CN.md new file mode 100644 index 0000000..475b5fb --- /dev/null +++ b/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> = Pick< + ThemeProviderProps, + 'children' | 'customToken' | 'customStylish' | 'prefixCls' +>; + +const TokenContainer: (props: TokenContainerProps) => 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 {children}; +}; + +export default TokenContainer; +``` + +### Diff + +```diff +// index.tsx +- import './index.less'; ++ import useStyles from './style.ts'; + + +const Statistic: React.FC = () => { ++ const { styles } = useStyles(); + + //... + + return ( +-
++
+ // 下面的代码保持不变 + //... + )} + +``` diff --git a/src/builtins/SourceCode/index.tsx b/src/builtins/SourceCode/index.tsx index 93e4b2e..f3dd79f 100644 --- a/src/builtins/SourceCode/index.tsx +++ b/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 = ({ children, language }) => { +interface SourceCodeProps { + lang: string; + children: string; +} +const SourceCode: FC = ({ children, lang: language }) => { const { copied, setCopied } = useCopied(); const { styles, theme } = useStyles(); diff --git a/src/builtins/SourceCode/style.ts b/src/builtins/SourceCode/style.ts new file mode 100644 index 0000000..db9d782 --- /dev/null +++ b/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; + `, + ), + }; +}); diff --git a/src/components/Highlighter/index.tsx b/src/components/Highlighter/index.tsx index 99c6778..25caf1d 100644 --- a/src/components/Highlighter/index.tsx +++ b/src/components/Highlighter/index.tsx @@ -1,13 +1,16 @@ 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); @@ -15,7 +18,9 @@ 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(({ children, language }) => { const { isDarkMode } = useThemeMode(); return ( - + {children} );