Code Block - Skeleton

Shiki (式, a Japanese word for “Style”) is a beautiful and powerful syntax highlighter based on TextMate grammar and themes, the same engine as VS Code’s syntax highlighting. Provides very accurate and fast syntax highlighting for almost any mainstream programming language.

Shiki Documentation →

This documentation site is built and maintained use Astro. As such, all code blocks are implemented using Expressive Code, which uses Shiki under the hood. To avoid dependency and configuration conflicts, live previews will be removed in favor of static screenshots. This will more accurately portray what you’ll see in a real world Skeleton project.

Installation

Install Shiki with your package manager of choice.

npm install -D shiki

Create a Component

In most use cases a simple reusable component should suffice. For this, we’ll do the following your project.

Implement a new <CodeBlock> component in /src/lib/components/CodeBlock/CodeBlock.svelte.
Implement the required component prop types in /src/lib/components/CodeBlock/types.ts.
Implement a several variations of our <CodeBlock> component in any SvelteKit route +page.svelte.

<!-- @component Code Block based on: https://shiki.style/ -->

<script module>
	import { createHighlighterCoreSync } from 'shiki/core';
	import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
	// Themes
	// https://shiki.style/themes
	import themeDarkPlus from 'shiki/themes/dark-plus.mjs';
	// Languages
	// https://shiki.style/languages
	import console from 'shiki/langs/console.mjs';
	import html from 'shiki/langs/html.mjs';
	import css from 'shiki/langs/css.mjs';
	import js from 'shiki/langs/javascript.mjs';

	// https://shiki.style/guide/sync-usage
	const shiki = createHighlighterCoreSync({
		engine: createJavaScriptRegexEngine(),
		// Implement your import theme.
		themes: [themeDarkPlus],
		// Implement your imported and supported languages.
		langs: [console, html, css, js]
	});
</script>

<script lang="ts">
	import type { CodeBlockProps } from './types';

	let {
		code = '',
		lang = 'console',
		theme = 'dark-plus',
		// Base Style Props
		base = ' overflow-hidden',
		rounded = 'rounded-container',
		shadow = '',
		classes = '',
		// Pre Style Props
		preBase = '',
		prePadding = '[&>pre]:p-4',
		preClasses = ''
	}: CodeBlockProps = $props();

	// Shiki convert to HTML
	const generatedHtml = shiki.codeToHtml(code, { lang, theme });
</script>

<div class="{base} {rounded} {shadow} {classes} {preBase} {prePadding} {preClasses}">
	<!-- Output Shiki's Generated HTML -->
	{@html generatedHtml}
</div>

export interface CodeBlockProps {
	code?: string;
	lang?: 'console' | 'html' | 'css' | 'js';
	theme?: 'dark-plus';
	// Base Style Props
	base?: string;
	rounded?: string;
	shadow?: string;
	classes?: string;
	// Pre Style Props
	preBase?: string;
	prePadding?: string;
	preClasses?: string;
}

<script lang="ts">
	import CodeBlock from '$lib/components/CodeBlock/CodeBlock.svelte';

	// Source Code
	const exampleConsole = `npx sv create my-skeleton-app`;
	const exampleHtml = `<div class="bg-green-500">Hello World</div>`;
	const exampleCss = `.foobar { background: green; }`;
	const exampleJavascript = `const foo = 'bar';`;
</script>

<div class="p-10 space-y-4">
	<CodeBlock code={exampleConsole} />
	<CodeBlock code={exampleHtml} lang="html" />
	<CodeBlock code={exampleCss} lang="css" />
	<CodeBlock code={exampleJavascript} lang="js" />
</div>

A few things to note about our component:

You will need to import and configure any number of Shiki themes.
You will need to import and configure any number of supported languages.
The component has been implemented using Skeleton’s component style guide.
This provides a number of style props for easy customization via Skeleton’s own conventions.
The source code, lang (language), and even theme can be configured via each respective prop.
The Code Block’s <pre> tag is auto-generated by Shiki; target Tailwind classes with: [&>pre]:myClassHere.

Programmatic Usage

This use case falls outside the scope of Skeleton, but we’ve provided some general guidance below.

In some cases you may not have direct access to the source code, such as code inserted into blog posts or CMS pages. In fact the code came even come baked into the markup using either HTML <pre> or <code> elements. For this, you’ll need to follow the general steps below. Note that the specific implementation will differ based on your application.

Query all <pre> or <code> blocks using Javascript tools like document.querySelectorAll(). Be as specific as possible.
Ensure you have a clean instance of the source code itself - with no extra markup injected within.
Use Shiki’s codeToHtml feature to parse the code as styled HTML markup.
Then append each instance of the code blocks in your DOM.

See also this detialed guide by Joy of Code, explaining how to implement Shiki via MDX.

Skeleton Theme

NOTE: Coming Soon…

Accessibility

We recommend Salma Alam-Naylor’s guidelines for creating accessible code blocks that meet WGAC standards.