logoAnt Design X

设计研发组件X MarkdownX SDKX CardX Skill演示国内镜像
  • 介绍
  • 总览
  • 通用
    • 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
    • Folder文件夹
      2.4.0
    • Mermaid图表工具
      2.1.0
    • Sources来源引用
      2.0.0
  • 其他
    • XProvider全局化配置

CodeHighlighter
代码高亮

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

何时使用

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

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

代码演示

API

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

CodeHighlighterProps

属性说明类型默认值
lang代码语言类型string-
children代码内容string-
header头部内容，为 false 时不显示头部React.ReactNode | (() => React.ReactNode | false) | false-
highlightProps代码高亮配置，透传给 react-syntax-highlighterSyntaxHighlighterProps-
prismLightMode是否使用 Prism 轻量模式，根据 lang 自动按需加载语言支持以减少打包体积booleantrue

CodeHighlighterRef

属性说明类型版本
nativeElement获取原生 DOM 节点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>

Prism Light Mode

使用 prismLightMode 属性启用轻量模式，按需加载语言支持，可显著减少打包体积。

javascript
import React from 'react'; import { Button } from 'antd'; const App = () => ( <div> <Button type="primary">Primary Button</Button> </div> ); export default App;
基本
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
    代码容器
import React from 'react';
import { Button } from 'antd';

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

export default App;
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>
import React from 'react';
import { Button } from 'antd';

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

export default App;
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}