Code Blocks

Utility

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

@skeletonlabs/skeleton
Source Code
View Page Source
Highlight.js

Examples

html 
<p>Hello Skeleton<p>
css 
.skeleton { color: #bada55; }
typescript 
const skeleton: string = 'awesome';

Getting Started

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

Create a Code Block

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>

Accessibility

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