Code

A code component.

Component Source

Basic

const sayHello = () => {
    console.log('Hello!');
}

Installation

			jsrepo add ui/code

To highlight the code you'll need a to initialize the highlighter context you can do that by adding the following code to your ./src/routes/+layout.svelte:




		{@render children()}

You will also need to add the following code to your global css file:

/* Shiki see: https://shiki.matsu.io/guide/dual-themes#class-based-dark-mode */
html.dark .shiki,
html.dark .shiki span {
	color: var(--shiki-dark) !important;
	background-color: transparent !important;
	font-style: var(--shiki-dark-font-style) !important;
	font-weight: var(--shiki-dark-font-weight) !important;
	text-decoration: var(--shiki-dark-text-decoration) !important;
}

/* Remove background from light mode */
html pre.shiki {
	background-color: transparent !important;
}

/* For components that need horizontal scrolling */
.scrollbar-hide {
	-ms-overflow-style: none; /* Internet Explorer and Edge */
	scrollbar-width: none; /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
	display: none; /* Chrome, Safari, and Opera */
}

The highlighter can be configured from shiki-provider.svelte.



{@render children()}

No Line Numbers

import { Code } from "$lib/components/ui/code";

Variants

import { Code } from "$lib/components/ui/code";