Code Blocks

Utility

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

Import

Stylesheets

Package

Source

Docs

Dependencies

html

<p>Hello Skeleton<p>

css

.skeleton { color: #bada55; }

typescript

const skeleton: string = 'awesome';

Install Highlight.js

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

console

npm install highlight.js

Apply the following changes to your app's root component (ex: /src/routes/+layout.svelte for SvelteKit).

typescript

import hljs from 'highlight.js';

Import any Highlight.js CSS theme of your choice. Skeleton has provided our custom theme near the top of this page.

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

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

plaintext

<CodeBlock language="html" code={`<div>This is meta</div>`}></CodeBlock>

Uses pre-wrap by default to support keyboard-only navigation. Be mindful of color contrast ratios when customizing the design of this component.