Basic
const sayHello = () => {
console.log('Hello!');
}
Installation
jsrepo add ui/code
The highlighter and languages can be configured from shiki.ts.
// Follows the best practices established in https://shiki.matsu.io/guide/best-performance
import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
import { createHighlighterCore } from 'shiki/core';
const bundledLanguages = {
bash: () => import('@shikijs/langs/bash'),
diff: () => import('@shikijs/langs/diff'),
javascript: () => import('@shikijs/langs/javascript'),
json: () => import('@shikijs/langs/json'),
svelte: () => import('@shikijs/langs/svelte'),
typescript: () => import('@shikijs/langs/typescript')
};
/** The languages configured for the highlighter */
export type SupportedLanguage = keyof typeof bundledLanguages;
/** A preloaded highlighter instance. */
export const highlighter = createHighlighterCore({
themes: [
import('@shikijs/themes/github-light-default'),
import('@shikijs/themes/github-dark-default')
],
langs: Object.entries(bundledLanguages).map(([_, lang]) => lang),
engine: createJavaScriptRegexEngine()
});
No Line Numbers
import { Code } from "$lib/components/ui/code";
Variants
import { Code } from "$lib/components/ui/code";
Button
`}
/>
Highlight Lines
export type Language =
| 'English (US)'
| 'English (UK)'
| 'Español (MX)';
export const greet = (name: string, language: Language): string => {
switch (language) {
case 'English (US)':
return `Hello ${name}!`
case 'English (UK)':
return `Hello ${name}, mate!`
case 'Español (MX)':
return `¡Hola ${name}!`
}
}