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> }` }/>; }

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); } } } ` }/>; }

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); } } ` }/>; }