docs: quick start

README.md

@@ -51,6 +51,30 @@ export default () => {
 };
 ```
 
+## 🛠 Custom renderer
+
+```jsx
+import { GPTVis, withDefaultChartCode, VisText } from '@antv/gpt-vis';
+
+const markdownContent = `
+<vis-text type="time_desc">本月</vis-text>共产生<vis-text type="metric_name">决策数量</vis-text><vis-text type="metric_value">2,783</vis-text>个，环比<vis-text type="trend_desc">增长</vis-text><vis-text type="ratio_value_pos">15.2%</vis-text>。<vis-text type="dim_name">高优先级决策</vis-text>占比<vis-text type="proportion">56.2%</vis-text>，呈现稳定<vis-text type="trend_desc" origin="[1, 2, 6, 18, 24, 48]">上升</vis-text>趋势，预计<vis-text type="time_desc">下月</vis-text>将突破<vis-text type="metric_value">3,000</vis-text>大关。
+
+\`\`\`my-ui
+my data
+\`\`\`
+`;
+
+const customRenderers = { 'my-ui': ({ children }) => <div>{children}</div> };
+const components = {
+  'vis-text': VisText,
+  code: withDefaultChartCode({ languageRenderers: customRenderers }),
+};
+
+export default () => {
+  return <GPTVis components={components}>{markdownContent}</GPTVis>;
+};
+```
+
 ## 💻 Development
 
 ```bash

README.zh-CN.md

@@ -51,6 +51,30 @@ export default () => {
 };
 ```
 
+## 🛠 定制渲染器
+
+```jsx
+import { GPTVis, withDefaultChartCode, VisText } from '@antv/gpt-vis';
+
+const markdownContent = `
+<vis-text type="time_desc">本月</vis-text>共产生<vis-text type="metric_name">决策数量</vis-text><vis-text type="metric_value">2,783</vis-text>个，环比<vis-text type="trend_desc">增长</vis-text><vis-text type="ratio_value_pos">15.2%</vis-text>。<vis-text type="dim_name">高优先级决策</vis-text>占比<vis-text type="proportion">56.2%</vis-text>，呈现稳定<vis-text type="trend_desc" origin="[1, 2, 6, 18, 24, 48]">上升</vis-text>趋势，预计<vis-text type="time_desc">下月</vis-text>将突破<vis-text type="metric_value">3,000</vis-text>大关。
+
+\`\`\`my-ui
+my data
+\`\`\`
+`;
+
+const customRenderers = { 'my-ui': ({ children }) => <div>{children}</div> };
+const components = {
+  'vis-text': VisText,
+  code: withDefaultChartCode({ languageRenderers: customRenderers }),
+};
+
+export default () => {
+  return <GPTVis components={components}>{markdownContent}</GPTVis>;
+};
+```
+
 ## 💻 本地开发
 
 ```bash

docs/guide/antd-design-x.md

@@ -5,7 +5,7 @@ toc: content
 order: 1
 ---
 
-## 1⃣️ 使用 Markdown 协议
+## 使用 Markdown 协议
 
 1.定义图表 Markdown 代码块
 
@@ -101,7 +101,7 @@ export default () => {
 };
 ```
 
-## 2⃣️ 使用结构化的数据
+## 使用结构化的数据
 
 1. 定义你的图表数据
 

docs/guide/custome-markdown.md

@@ -0,0 +1,34 @@
+---
+title: 扩展 MD 渲染器使用
+nav: { title: '指南', order: 0 }
+toc: content
+order: 2
+---
+
+## 扩展 react-markdown 使用
+
+```tsx | pure
+import React from 'react';
+import Markdown from 'react-markdown';
+import { withChartCode, withDefaultChartCode, ChartType, Line } from '@antv/gpt-vis';
+
+const markdownContent = `
+# GPT-VIS \n\nComponents for GPTs, generative AI, and LLM projects. Not only UI Components.
+
+Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years.
+
+\`\`\`vis-chart
+{ "type": "line","data": [{"time":2013,"value":59.3},{"time":2014,"value":64.4},{"time":2015,"value":68.9},{"time":2016,"value":74.4},{"time":2017,"value":82.7},{"time":2018,"value":91.9},{"time":2019,"value":99.1},{"time":2020,"value":101.6},{"time":2021,"value":114.4},{"time":2022,"value":121}] }
+\`\`\`
+`;
+
+const CodeBlock = withChartCode({
+  components: { [ChartType.Line]: Line },
+});
+// 或
+// const CodeBlock = withDefaultChartCode();
+
+export default () => {
+  return <Markdown components={{ code: CodeBlock }}>{markdownContent}</Markdown>;
+};
+```

docs/guide/customize-style.md

@@ -2,7 +2,7 @@
 title: 定制样式
 nav: { title: '指南', order: 0 }
 toc: content
-order: 2
+order: 3
 ---
 
 通过在 [ConfigProvider](/components/config-provider) 中传入样式属性，来配置图表组件的全局样式。

docs/guide/quick-start.md

@@ -11,31 +11,7 @@ order: 0
 $ npm install @antv/gpt-vis --save
 ```
 
-## 🌰 示例
-
-### 📦 组件中使用
-
-```tsx | pure
-import React from 'react';
-import { Pie } from '@antv/gpt-vis';
-
-const data = [
-  { category: '分类一', value: 27 },
-  { category: '分类二', value: 25 },
-  { category: '分类三', value: 18 },
-  { category: '分类四', value: 15 },
-  { category: '分类五', value: 10 },
-  { category: '其他', value: 5 },
-];
-
-export default () => {
-  return <Pie data={data} />;
-};
-```
-
-### 📝 Markdown 中使用
-
-#### 方式一：使用 GPTVis 组件
+## 🌰 使用
 
 ```tsx | pure
 import React from 'react';
@@ -44,18 +20,10 @@ import { GPTVis } from '@antv/gpt-vis';
 const markdownContent = `
 # GPT-VIS \n\nComponents for GPTs, generative AI, and LLM projects. Not only UI Components.
 
+Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022. You can see a steady increase over the years, with notable *growth* particularly in recent years.
+
 \`\`\`vis-chart
-{
-  "type": "pie",
-  "data": [
-    { "category": "分类一", "value": 27 },
-    { "category": "分类二", "value": 25 },
-    { "category": "分类三", "value": 18 },
-    { "category": "分类四", "value": 15 },
-    { "category": "分类五", "value": 10 },
-    { "category": "其他", "value": 5 }
-  ]
-}
+{ "type": "line","data": [{"time":2013,"value":59.3},{"time":2014,"value":64.4},{"time":2015,"value":68.9},{"time":2016,"value":74.4},{"time":2017,"value":82.7},{"time":2018,"value":91.9},{"time":2019,"value":99.1},{"time":2020,"value":101.6},{"time":2021,"value":114.4},{"time":2022,"value":121}] }
 \`\`\`
 `;
 
@@ -64,34 +32,30 @@ export default () => {
 };
 ```
 
-#### 方式二：扩展 react-markdown 使用
+## 🛠 定制渲染器
+
+业务定制 UI 场景，提供方便的扩展机制，支持标签和代码块扩展。
 
 ```tsx | pure
-import React from 'react';
-import Markdown from 'react-markdown';
-import { withDefaultChartCode } from '@antv/gpt-vis';
+import { GPTVis, withDefaultChartCode, VisText } from '@antv/gpt-vis';
 
 const markdownContent = `
-# GPT-VIS \n\nComponents for GPTs, generative AI, and LLM projects. Not only UI Components.
-
-\`\`\`vis-chart
-{
-  "type": "pie",
-  "data": [
-    { "name": "分类一", "value": 27 },
-    { "name": "分类二", "value": 25 },
-    { "name": "分类三", "value": 18 },
-    { "name": "分类四", "value": 15 },
-    { "name": "分类五", "value": 10 },
-    { "name": "其他", "value": 5 }
-  ]
-}
+\`\`\`my-ui
+my data
 \`\`\`
+
+<vis-text type="time_desc">本月</vis-text>共产生<vis-text type="metric_name">决策数量</vis-text><vis-text type="metric_value">2,783</vis-text>个，环比<vis-text type="trend_desc">增长</vis-text><vis-text type="ratio_value_pos">15.2%</vis-text>。<vis-text type="dim_name">高优先级决策</vis-text>占比<vis-text type="proportion">56.2%</vis-text>，呈现稳定<vis-text type="trend_desc" origin="[1, 2, 6, 18, 24, 48]">上升</vis-text>趋势，预计<vis-text type="time_desc">下月</vis-text>将突破<vis-text type="metric_value">3,000</vis-text>大关。
 `;
 
-const CodeBlock = withDefaultChartCode();
+const customRenderers = {
+  'my-ui': ({ children }) => <div>{children}</div>,
+};
+const components = {
+  'vis-text': VisText,
+  code: withDefaultChartCode({ languageRenderers: customRenderers }),
+};
 
 export default () => {
-  return <Markdown components={{ code: CodeBlock }}>{markdownContent}</Markdown>;
+  return <GPTVis components={components}>{markdownContent}</GPTVis>;
 };
 ```

src/ChartCodeRender/demos/extra.tsx

@@ -1,31 +1,17 @@
+import type { CodeBlockComponent } from '@antv/gpt-vis';
 import { GPTVis, withDefaultChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 /**
- * 自定义的 Kotlin 代码块渲染器
+ * 自定义代码块渲染器
  */
-const KotlinRenderer: React.FC<{
-  className?: string;
-  children: React.ReactNode;
-}> = ({ children }) => {
-  return (
-    <pre style={{ backgroundColor: '#f0f0f0', padding: '10px' }}>
-      <code>{children}</code>
-    </pre>
-  );
+const MyUIRenderer: CodeBlockComponent = ({ children }) => {
+  return <div style={{ backgroundColor: '#f0f0f0', padding: '10px' }}>{children}</div>;
 };
 
 const markdownContent = `
-\`\`\`kotlin
-// A Kotlin code block
-fun main() {
-  println("Hello, world!")
-}
-\`\`\`
-
-\`\`\`javascript
-// Normal code block
-console.log('Hello World');
+\`\`\`my-ui
+my data ...
 \`\`\`
 
 \`\`\`vis-chart
@@ -46,7 +32,7 @@ console.log('Hello World');
 // 自定义代码块渲染组件，NOTE: withDefaultChartCode 不要直接放入函数内部，避免重复渲染抖动问题！！！
 const CodeComponent = withDefaultChartCode({
   languageRenderers: {
-    kotlin: KotlinRenderer,
+    'my-ui': MyUIRenderer,
   },
 });
 

src/GPTVis/demos/code.tsx

@@ -1,35 +1,24 @@
+import type { CodeBlockComponent } from '@antv/gpt-vis';
 import { ChartType, GPTVis, PinMap, withChartCode } from '@antv/gpt-vis';
 import React from 'react';
 
 /**
- * 自定义的 Kotlin 代码块渲染器
+ * 自定义代码块渲染器
  */
-const KotlinRenderer = ({ children }) => {
-  return (
-    <pre style={{ backgroundColor: '#000', color: '#fff', padding: '10px' }}>
-      <code>{children}</code>
-    </pre>
-  );
+const MyUIRenderer: CodeBlockComponent = ({ children }) => {
+  return <div style={{ backgroundColor: '#f0f0f0', padding: '10px' }}>{children}</div>;
 };
 
 const components = {
   code: withChartCode({
-    languageRenderers: { kotlin: KotlinRenderer },
+    languageRenderers: { kotlin: MyUIRenderer },
     components: { [ChartType.PinMap]: PinMap },
   }),
 };
 
 const content = `
-\`\`\`kotlin
-// A Kotlin code block
-fun main() {
-  println("Hello, world!")
-}
-\`\`\`
-
-\`\`\`javascript
-// Normal code block
-console.log('Hello World');
+\`\`\`my-ui
+my data ...
 \`\`\`
 
 \`\`\`vis-chart

src/index.ts

@@ -2,6 +2,7 @@ export * from './export';
 export { default as version } from './version';
 
 export { withChartCode, withDefaultChartCode } from './ChartCodeRender';
+export type { CodeBlockComponent, WithChartCodeOptions } from './ChartCodeRender/type';
 export { default as GPTVis, type GPTVisProps } from './GPTVis';
 
 export * from './types';