semi-design/content/plus/codehighlight/index.md

---

localeCode: zh-CN order: 0 category: Plus title: CodeHighlight 代码高亮 icon: doc-codehighlight dir: column

brief: 根据语法高亮页面中的代码块

Semi 代码高亮组件使用了 prismjs，支持297 种编程语言的高亮（已自动配置 JavaScript CSS 类 C html svg 等，其他语言需要手动引入），同时具有高扩展性和丰富的插件生态。

向 code props 传入代码纯文本，并在 language 传入编程语言名称。支持的编程语言和对应名称在 Prismjs 官网 查看

代码演示

如何引入

CodeHighlight 从 v2.62.0 开始支持

import { CodeHighlight } from '@douyinfe/semi-ui';

基本用法

import { CodeHighlight } from '@douyinfe/semi-ui';

function Demo() {

    return <CodeHighlight
        language={"javascript"} 
        code={
        `
import * as React from 'react"
const Test = ()=>{
    const handleClick = ()=>{
        alert("Click")
    }
    return <div onClick={handleClick}>test</div>
}`
    }/>
}

CSS

import { CodeHighlight } from '@douyinfe/semi-ui';

function Demo() {

    return <CodeHighlight
        language={"css"} 
        code={
        `.grid {
    .semi-row,
    .semi-row-flex {
        text-align: center;
        .semi-col {
            min-height: 30px;
            line-height: 30px;
            background: var(--semi-color-primary-light-default);
            outline: 1px solid var(--semi-color-primary-light-active);
        }
    }
}
`
    }/>
}

支持其他语言

支持 297 种语言，除去 JavaScript CSS 类 C html svg 外，支持其他语言需要手动引入配置。

例如，高亮用于编写 GTK 程序前端 UI 的 Vala 语言，需要引入 prism-vala.js

import "prismjs/components/prism-vala.js"

import { CodeHighlight } from '@douyinfe/semi-ui';
import "prismjs/components/prism-vala.js"

function Demo() {
    return <CodeHighlight
        language={"vala"} 
        code={
        `public class ExampleApp : Gtk.Application {
    public ExampleApp () {
        Object (application_id: "com.example.App");
    }

    public override void activate () {
        var win = new Gtk.ApplicationWindow (this);

        var btn = new Gtk.Button.with_label ("Hello World");
        btn.clicked.connect (win.close);

        win.child = btn;
        win.present ();
    }

    public static int main (string[] args) {
        var app = new ExampleApp ();
        return app.run (args);
    }
}
`
    }/>
}

自定义主题

设置 defaultTheme={false} 关闭默认主题，然后手动将需要的主题的 css 文件拷贝并放入项目中引入即可。 一些主题可在 node_modules 内 prismjs/themes 下找到，你也可以在网上搜索其他中意的主题。

API

属性	说明	类型	默认值
className	类名	string	-
code	代码纯文本	string	-
defaultTheme	是否使用默认主题，添加自己的主题时设置 false	bool	true
language	语言类型	string	-
lineNumber	是否开启行数显示	boolean	true
style	样式	CSSProperties	-

设计变量