Utility

Code Blocks

Displays pre-formatted source code, with optional support for Highlight.js syntax highlighting.

typescript

import { CodeBlock } from '@skeletonlabs/skeleton';

Usage

Props

Events

html

<div>This is meta</div>

css

.skeleton { color: #bada55; }

typescript

const skeleton: string = 'awesome';

Install Highlight.js

Highlight.js is a required dependency to enable syntax highlighting.

console

npm install highlight.js

Apply the following changes to your app's root component in /src/routes/+layout.svelte.

typescript

import hljs from 'highlight.js';

Import any Highlight.js CSS theme of your choice.

typescript

import 'highlight.js/styles/github-dark.css';

Finally, import the CodeBlock's writable store and pass a referenced to Highlight.js.

typescript

import { storeHighlightJs } from '@skeletonlabs/skeleton';

storeHighlightJs.set(hljs);

Adding the lineNumbers property will add line numbers to the displayed code. Supports up to 1000 lines of code.

html

	<p>
		The quick brown fox jumped over the lazy dog.
	</p>

Syntax highlighting will appear when a valid language alias is provided to the CodeBlock's language prop.

Uses pre-wrap by default to support keyboard-only navigation. Please be mindful of color contrast when customizing the design.