Visualization

Code Block

Well you can see this component all over these docs pages.

/routes/code-sample-imported/+page.svelte

<script lang="ts">
	import { CodeBlock } from '@leon8ix/jhana-ui';
	import code from './code-snippets/my-code.ts?raw';
</script>

<CodeBlock name="my-code.ts" {code} />

For long code snippets, you might want to limit the height, to make the CodeBlock scolling. Just set style="max-height: 10em" or any other value on the CodeBlock component.

/lib/texts/lorem-ipsum.txt

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

When writing the code inline, you might want to use dedent for a better formatting experience.

/routes/code-sample-inline/+page.svelte

<script lang="ts">
	import { CodeBlock } from '@leon8ix/jhana-ui';
	import dedent from 'dedent';
</script>

<CodeBlock
	name="/routes/code-sample/+page.svelte"
	code={dedent`
        <${'script'} lang="ts">
            import { CodeBlock } from '@leon8ix/jhana-ui';
            import code from './code-snippets/my-code.ts?raw';
        </${'script'}>

        <CodeBlock name="my-code.ts" {code} />
    `}
/>
<!-- In Svelte components documenting Svelte components, you will have to escape the script tag somehow. Otherwise Svelte will mistake that string for the actual script tag. -->

However, it has to be said that Jhana UI does not come with any syntax highlighting, to reduce complexity of the bundle. So you will have to bring your own solution. For these docs, I implemented a wrapper component like this. Please note, that I used the sync version of Shiki, since this should only run once on compile time.

/lib/code/code-format.ts

import css from '@shikijs/langs/css';
import svelte from '@shikijs/langs/svelte';
import typescript from '@shikijs/langs/typescript';
import md from '@shikijs/langs/markdown';
import materialThemePalenight from '@shikijs/themes/material-theme-palenight';
import { createHighlighterCoreSync } from 'shiki/core';
import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';

const shiki = createHighlighterCoreSync({
	themes: [materialThemePalenight],
	langs: [typescript, svelte, css, md],
	engine: createJavaScriptRegexEngine(),
});

/** This helper adds syntax highlighting using Shiki */
export function renderCode(lang: 'ts' | 'svelte' | 'css' | 'md', code: string): string {
	return shiki.codeToHtml(code, { lang, theme: 'material-theme-palenight' });
}

/**
 * This helper replaces any local imports with the way a consuming package
 * would import stuff from @leon8ix/jhana-ui
 */
export function globalize(code: string): string {
	return code
		.replaceAll('$lib', '@leon8ix/jhana-ui')
		.replaceAll('$docs', '$lib')
		.replaceAll('./lib', '$lib')
		.replace('<script lang="ts"></script>', '')
		.trimStart();
}

/lib/code/CodeBlockFormatted.svelte

<script lang="ts">
	import { CodeBlock } from '@leon8ix/jhana-ui';
	import dedent from 'dedent';
	import type { ComponentProps } from 'svelte';
	import { globalize, renderCode } from './code-format';

	type Props = Omit<ComponentProps<typeof CodeBlock>, 'lang' | 'code' | 'children'> & {
		lang: Parameters<typeof renderCode>[0];
		code: string;
		/** Skip dedent */
		nodent?: boolean;
		/** Replace internal imports with those a consuming lib would need to import */
		mapImports?: boolean;
	};
	const { lang, code, nodent = false, mapImports = false, ...props }: Props = $props();
</script>

<CodeBlock {...props}>{@html renderCode(lang, mapImports ? globalize(code) : nodent ? code : dedent(code))}</CodeBlock>

<style>
	:global(pre.shiki) {
		background-color: transparent !important;
	}
</style>