Code Blocks

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

javascript

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

html

<p>Hello Skeleton<p>

css

.skeleton { color: #bada55; }

typescript

const skeleton: string = 'awesome';

Setup Highlight.js

If you wish to enable syntax highlighting, install Highlight.js as a dependency.

console

npm install highlight.js

Add the following three imports 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.

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 '@brainandbones/skeleton';
storeHighlightJs.set(hljs);

This will trigger highlighting only when a supported language alias is provided to the CodeBlock's language prop.

Add the following anywhere you wish to display a codeblock.

plaintext

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

Prop	Type	Values	Default	Description
language	string	Language Alias	plaintext	Sets a language alias for Highlight.js syntax highlighting.
code	string	-	-	Takes a Template Literal. Be mindful to escape as needed.
background	string	(class)	bg-[#141517]	Provided classes to set the background color.
text	string	(class)	text-sm	Provided classes to set the text size.
color	string	(class)	text-white	Provided classes to set the text color.
rounded	string	(class)	rounded-lg	Provided classes to set the border radius.
buttonCopy	string	(class)	btn btn-sm bg-white/5 hover:bg-white/10	Provided classes to set the button styles.

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