代码高亮

1. 组件概述

代码高亮是一个内容展示组件，用于以语法高亮的方式展示代码片段。它能够自动识别代码结构，用不同颜色标记关键字、字符串、注释等元素，使代码更易于阅读和理解。该组件支持多种常见编程语言，适用于展示示例代码、分享代码片段、展示 AI 生成的代码结果等场景。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：展示 AI 生成的代码。在编程辅导类应用中，学生提问后，AI 工作流返回的代码答案可以通过代码高亮组件展示。将组件的默认值绑定到工作流返回的代码变量，选择对应的编程语言（如 Python、JavaScript），代码就会以高亮格式清晰呈现，方便学生阅读和学习。

• 场景二：教学示例展示。在编程教学页面中，需要展示固定的代码示例供学生参考。直接在默认值中填入示例代码，选择对应语言，代码中的关键字、函数名、字符串等会以不同颜色显示，帮助学生理解代码结构。

加载中...

查看 JSON

复制 JSON

3. 功能配置

配置

基础折叠组

配置项	说明
名称	组件的名称标识，用于在页面中定位该组件。当需要通过事件控制该组件（如显示/隐藏）时，可以通过名称来指定目标。
语言	选择代码使用的编程语言，组件会根据所选语言应用对应的语法高亮规则。支持的语言包括：C、C++、C#、CSS、Go、HTML、INI、Java、JavaScript、JSON、Less、Markdown、Objective-C、纯文本、Python、R、Swift、TypeScript、XML、YAML。选择正确的语言可以让代码中的关键字、字符串、注释等以不同颜色显示。如果不确定语言类型，可以选择”纯文本”。
默认值	要展示的代码内容。可以直接输入静态代码文本，也可以绑定变量来动态展示内容。例如绑定工作流返回的代码变量，当 AI 生成代码后，组件会自动显示最新内容。

显隐折叠组

配置项	说明
可见	控制组件是否显示。默认可见。可以设置为始终可见、始终隐藏，或根据条件动态控制。例如只有当用户请求查看代码时才显示该组件。