Utility

Code Blocks

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

typescript
import { CodeBlock } from '@skeletonlabs/skeleton';
Source Page Source Highlight.js

Demo

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

Configure Your Project

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);

Supported Languages

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

Accessibility

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