Package Exports

ai-code-formatter-plugin
ai-code-formatter-plugin/dist/index.cjs
ai-code-formatter-plugin/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ai-code-formatter-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Code Formatter Plugin

简体中文|English

介绍

AI 代码格式化插件是一个强大的React组件库，专为AI问答场景设计，能够智能识别和渲染流式返回的代码内容。它提供了一套完整的解决方案，包括代码块检测、语法高亮、流式数据模拟和插件化集成能力。

安装

npm install ai-code-formatter-plugin
# 或
yarn add ai-code-formatter-plugin

基本使用

import { CodeFormatter } from 'ai-code-formatter-plugin';
import 'ai-code-formatter-plugin/dist/index.css'

function App() {
  const content = `
    这是一个React组件示例：
    \`\`\`jsx
    import React from 'react';
    
    function Hello() {
      return <h1>Hello World!</h1>;
    }
    \`\`\`
  `;

  return (
    <div className="app">
      <CodeFormatter content={content} />
    </div>
  );
}

流式数据模拟

import { useStreamingSimulator, CodeFormatter } from 'ai-code-formatter-plugin';

function StreamingDemo() {
  const streamConfig = {
    chunks: [
      '开始讲解代码：\n```js\n',
      'function sum(a, b) {\n',
      '  return a + b;\n',
      '}\n',
      '```\n\n这是一个简单的加法函数。'
    ],
    interval: 80
  };

  const { content, startStreaming } = useStreamingSimulator(streamConfig);

  return (
    <div>
      <button onClick={startStreaming}>开始模拟流式传输</button>
      <CodeFormatter content={content} />
    </div>
  );
}

插件SDK使用

import { createCodeFormatterPlugin } from 'ai-code-formatter-plugin';

// 初始化插件
const plugin = createCodeFormatterPlugin();

// 在DOM元素中渲染
const container = document.getElementById('code-container');
if (container) {
  plugin.render({
    container,
    content: '```python\ndef greet():\n    print("Hello!")\n```'
  });
}

// 更新内容
plugin.update('新内容```js\nconsole.log("Updated");\n```');

// 卸载

setTimeout(() => {
  plugin.unmount();
}, 5000);

使用案例

AI聊天机器人集成

import { CodeFormatter } from 'ai-code-formatter-plugin';

function AIChatMessage({ response }) {
  return (
    <div className="ai-response">
      <CodeFormatter content={response} />
    </div>
  );
}

技术文档展示

please see the demo.

import { createCodeFormatterPlugin } from 'ai-code-formatter-plugin';

function DocumentationPage() {
  useEffect(() => {
    const codeSections = document.querySelectorAll('.code-sample');
    codeSections.forEach(section => {
      const plugin = createCodeFormatterPlugin();
      plugin.render({
        container: section,
        content: section.dataset.code
      });
    });
  }, []);
  
  return (
    <div>
      <div className="code-sample" data-code="```js\n// 示例代码\n```"></div>
    </div>
  );
}

编程教学平台

import { useStreamingSimulator, CodeFormatter } from 'ai-code-formatter-plugin';

function CodingTutorial() {
  const steps = [
    { chunks: ['第一步：基础语法\n```python\nprint("Hello")\n```'], interval: 100 },
    { chunks: ['第二步：函数定义\n```python\ndef add(a, b):\n    return a + b\n```'], interval: 100 }
  ];
  
  const [stepIndex, setStepIndex] = useState(0);
  const { content, startStreaming } = useStreamingSimulator(steps[stepIndex]);
  
  useEffect(() => {
    startStreaming();
  }, [stepIndex]);
  
  return (
    <div>
      <CodeFormatter content={content} />
      <button onClick={() => setStepIndex(i => i + 1)}>下一步</button>
    </div>
  );
}

核心架构

模块化设计

src/
├── core/
│   ├── codeDetector.ts       # 代码块检测算法
│   ├── highlighter.tsx       # 语法高亮组件
│   ├── codeFormatter.tsx     # 主格式化组件
│   ├── streamingSimulator.ts # 流式模拟逻辑
│   └── plugin.ts             # 插件SDK实现
├── demo/                     # 演示应用
├── tests/                    # 单元测试
└── types.ts                  # 类型定义

代码检测算法

文本扫描：使用三重反引号(```)作为代码块分隔符
语言识别：解析第一行获取编程语言标识
内容提取：智能处理代码块内的换行和缩进
混合渲染：无缝集成文本和代码块

流式处理引擎

function useStreamingSimulator(config: {
  chunks: string[];   // 内容片段数组
  interval?: number;   // 传输间隔(ms)
  initialContent?: string;
}): {
  content: string;     // 当前内容
  isStreaming: boolean; // 传输状态
  startStreaming: () => void; // 启动函数
  stopStreaming: () => void;  // 停止函数
}

插件架构

class CodeFormatterPlugin {
  // 渲染内容到指定容器
  render(options: { container: HTMLElement; content: string }): void;
  
  // 更新内容
  update(content: string): void;
  
  // 卸载组件
  unmount(): void;
}

语法高亮系统

语言分类：基于检测到的语言添加CSS类名
可扩展设计：支持集成Prism.js等第三方高亮库
主题支持：提供深色/浅色主题选项
复制功能：每个代码块内置一键复制按钮