CodeHighlight

When to use

Semi CodeHighlight component is built on Shiki, which uses the same TextMate grammars as VS Code. The languages to highlight are registered by the application, so the bundle only contains the grammars it registers; an unregistered language is shown as plain text. Colors default to Shiki's built-in github-light and github-dark themes, follow Semi's light and dark mode, and can be replaced with other themes.

Demos

How to introduce

<script lang="ts">
    import { CodeHighlight } from '@fibrae/semi-ui-svelte';
</script>

Register languages and themes

Grammars and themes come from the shiki package, so install shiki in the project first. Call CodeHighlight.register once at the application entry: every CodeHighlight can then use those languages.

A language passed as () => import(...) is fetched when the first code block is highlighted, and then every registered language is fetched, not only the one that block uses. Available languages, their names and aliases are listed in the Shiki language list, and themes in the Shiki theme list. Blocks mounted before the registration highlight again once it happens.

The Svelte version has no CodeHighlight.register: use the named export registerCodeHighlight instead, with the same arguments and the same registry as the other frameworks.

import { registerCodeHighlight } from '@fibrae/semi-ui-svelte';

registerCodeHighlight({
    languages: [() => import('shiki/langs/javascript.mjs'), () => import('shiki/langs/css.mjs')],
    // Optional, replaces the default github-light and github-dark
    themes: { light: () => import('shiki/themes/min-light.mjs'), dark: () => import('shiki/themes/nord.mjs') },
});

Basic usage

Pass the code plain text to code, and the name or alias of a registered language to language.

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

<script lang="ts">
    import { CodeHighlight } from '@fibrae/semi-ui-svelte';

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

<CodeHighlight {code} language="javascript" />

CSS

.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);
        }
    }
}

<script lang="ts">
    import { CodeHighlight } from '@fibrae/semi-ui-svelte';

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

<CodeHighlight {code} language="css" />

Languages for a single block

A language only a few blocks need can be passed to those blocks through languages instead of being registered for the whole application; themes likewise replaces the themes of one block. Declare both values outside the component, so a new array or object on every render does not trigger another highlight. For example, to highlight the Vala language used to write the front-end UI of GTK programs

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

<script lang="ts">
    import { CodeHighlight } from '@fibrae/semi-ui-svelte';

    // declared at the top level so the array is not new on every render, which would highlight again
    const languages = [() => import('shiki/langs/vala.mjs')];

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

<CodeHighlight {code} language="vala" {languages} />

API

Props

class, style (a string) and native attributes such as id and aria-label land on the root element (div). The component has no static methods: register languages and themes with the named export registerCodeHighlight, see "Register languages and themes" above.

Static methods

Accessibility

• With aria-label or aria-labelledby and no role on the root, the root gets role="group" (a generic element cannot be named); a role you pass wins

Design Tokens