Code

The Code component provides a styled container for displaying code snippets with syntax highlighting support. It includes built-in copy-to-clipboard functionality and optional file download capability. Perfect for documentation, code examples, and displaying formatted code blocks.

Basic code block

The Code component displays code in a monospace font with a styled background. Content is provided via the default slot.

const greeting = 'Hello, World!';
console.log(greeting);

Source code

<template>
    <IkCode>{{ code1 }}</IkCode>
</template>

<script setup>
import { IkCode } from '@ikol/ui-kit/components/IkCode';
import { ref } from 'vue';

const code1 = ref(`const greeting = 'Hello, World!';
console.log(greeting);`);
</script>

Copy to clipboard

By default, the Code component includes a copy button. Click it to copy the code content to the clipboard. The button icon changes to a checkmark when copied.

function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

Source code

<template>
    <IkCode>{{ code2 }}</IkCode>
</template>

<script setup>
import { IkCode } from '@ikol/ui-kit/components/IkCode';
import { ref } from 'vue';

const code2 = ref(`function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
}`);
</script>

Download as file

Enable the download button using the downloadable prop. Click it to download the code as a file. Use the filename and mime props to customize the downloaded file.

const example = () => {
    return 'This code can be downloaded';
};

Source code

<template>
    <IkCode
        downloadable
        filename="example.js"
        mime="text/javascript"
    >
        {{ code3 }}
    </IkCode>
</template>

<script setup>
import { IkCode } from '@ikol/ui-kit/components/IkCode';
import { ref } from 'vue';

const code3 = ref(`const example = () => {
    return 'This code can be downloaded';
};`);
</script>

Custom filename and MIME type

Customize the downloaded file's name and MIME type for different file formats.

<template>
    <div>Vue Component</div>
</template>

.button {
    background: blue;
    color: white;
}

{
    "name": "Example",
    "value": 123
}

Source code

<template>
    <div class="ik-mb-4">
        <IkCode
            downloadable
            filename="component.vue"
            mime="text/vue"
        >
            {{ code4a }}
        </IkCode>
    </div>
    <div class="ik-mb-4">
        <IkCode
            downloadable
            filename="styles.css"
            mime="text/css"
        >
            {{ code4b }}
        </IkCode>
    </div>
    <div class="ik-mb-4">
        <IkCode
            downloadable
            filename="data.json"
            mime="application/json"
        >
            {{ code4c }}
        </IkCode>
    </div>
</template>

<script setup>
import { IkCode } from '@ikol/ui-kit/components/IkCode';
import { ref } from 'vue';

const code4a = ref(`<template>
    <div>Vue Component</div>
</template>`);

const code4b = ref(`.button {
    background: blue;
    color: white;
}`);

const code4c = ref(`{
    "name": "Example",
    "value": 123
}`);
</script>