Code

NOTE: Introduced feature in v0.2.0.

Code is used to render inline monospaced text, typically for showing programming code / application configuration to an user.

<script>
    import {Code} from "@kahi-ui/framework";
</script>

<Code>
    import * as Kahi from "@kahi-ui/framework";
</Code>

Imports

<script>
    import {Code} from "@kahi-ui/framework";
</script>

Palette

You can change the color palette of Code via the palette property.

<script>
    import {
        Code,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Stack.Container alignment_x="left" spacing="medium">
    <div>
        <Text is="strong">DEFAULT</Text>

        <br />
        <Code>
            import * as Kahi from "@kahi-ui/framework";
        </Code>
    </div>

    <div>
        <Text is="strong">ACCENT</Text>

        <br />
        <Code palette="accent">
            import * as Kahi from "@kahi-ui/framework";
        </Code>
    </div>

    <div>
        <Text is="strong">NEUTRAL</Text>

        <br />
        <Code palette="neutral">
            import * as Kahi from "@kahi-ui/framework";
        </Code>
    </div>

    <div>
        <Text is="strong">DARK</Text>

        <br />
        <Code palette="dark">
            import * as Kahi from "@kahi-ui/framework";
        </Code>
    </div>

    <div>
        <Text is="strong">LIGHT</Text>

        <br />
        <Code palette="light">
            import * as Kahi from "@kahi-ui/framework";
        </Code>
    </div>

    <div>
        <Text is="strong">ALERT</Text>

        <br />
        <Code palette="alert">
            import * as Kahi from "@kahi-ui/framework";
        </Code>
    </div>

    <div>
        <Text is="strong">AFFIRMATIVE</Text>

        <br />
        <Code palette="affirmative">
            import * as Kahi from "@kahi-ui/framework";
        </Code>
    </div>

    <div>
        <Text is="strong">INFORMATIVE</Text>

        <br />
        <Code palette="informative">
            import * as Kahi from "@kahi-ui/framework";
        </Code>
    </div>

    <div>
        <Text is="strong">NEGATIVE</Text>

        <br />
        <Code palette="negative">
            import * as Kahi from "@kahi-ui/framework";
        </Code>
    </div>
</Stack.Container>

Code Block

You can display blocks of code via a <pre> HTML tag by passing is="pre".

<script>
    import {Code} from "@kahi-ui/framework";
</script>

<Code is="pre">
import math from "a-math-library";

const result = math.add(1, 1);
console.log("Our value is:", result);
</Code>