参与 WeaveFox「AI艺术家」大赛，赢 SEE Conf 门票与千元好礼

logoAnt Design X

设计研发组件X MarkdownX SDK演示国内镜像
  • 介绍
  • 总览
  • 通用
    • Bubble对话气泡
    • Conversations管理对话
    • Notification系统通知
      2.0.0
  • 唤醒
    • Welcome欢迎
    • Prompts提示集
  • 确认
    • Think思考过程
      2.0.0
    • ThoughtChain思维链
      2.0.0
  • 表达
    • Attachments输入附件
    • Sender输入框
    • Suggestion快捷指令
  • 反馈
    • Actions操作列表
    • CodeHighlighter代码高亮
      2.1.0
    • FileCard文件卡片
      2.0.0
    • Mermaid图表工具
      2.1.0
    • Sources来源引用
      2.0.0
  • 其他
    • XProvider全局化配置

CodeHighlighter
代码高亮

用于高亮代码格式。
使用import { CodeHighlighter } from "@ant-design/x";
源码components/code-highlighter
文档
编辑此页
版本自 2.1.0 起支持

何时使用

CodeHighlighter 组件用于需要展示带有语法高亮的代码片段的场景。

  • 用于展示带语法高亮的代码片段，并提供复制功能及头部语言信息。
  • 与 XMarkdown 结合使用，可在 Markdown 内容中渲染代码块，并增强高亮显示和交互功能。

代码演示

API

通用属性参考：通用属性。

CodeHighlighterProps

属性说明类型默认值
lang语言string-
children代码内容string-
header顶部React.ReactNode | nullReact.ReactNode
className样式类名string
classNames样式类名string-
highlightProps代码高亮配置highlightProps-

CodeHighlighterRef

属性说明类型版本
nativeElement获取原生节点HTMLElement-

Semantic DOM

主题变量（Design Token）

组件 Token如何定制？
Token 名称描述类型默认值
colorBgTitle标题背景颜色stringrgba(0,0,0,0.06)
colorBorderCode代码块边框颜色string#f0f0f0
colorTextTitle标题文本颜色stringrgba(0,0,0,0.88)
全局 Token如何定制？

JavaScript Code

javascript
import React from 'react';
import { Button } from 'antd';

const App = () => (
  <div>
    <Button type="primary">Primary Button</Button>
  </div>
);

export default App;

CSS Code

css
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

HTML Code

html
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>
基本
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
React 计数器示例
JavaScript
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}
自定义 Header
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
配合 XMarkdown
CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
typescript
import React from 'react';
import { XMarkdown } from '@ant-design/x-markdown';

const App = () => <XMarkdown content='Hello World' />;
export default App;
  • root
    根节点
  • header
    头部的容器
  • headerTitle
    标题
  • code
    代码容器