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 | - |