Highlighter

A component to show highlighted code using Prism.js . The component highlights the supplied code reactively, but doesn't load any languages by default. You can decide which languages you would like to load, as well as external libraries and the theme.

It is recommended to wrap the Highlighter component in another component which imports the necessary languages and themes to avoid duplicated logic.

If you have a large code sample you would like to keep separate, vite allows you to import files as a string. For example: import code from './code.svelte?raw';

<script>
import { Highlighter } from '@thetinkerinc/colibri';

import style from './style.js';

import 'prismjs/components/prism-python';
import 'prism-svelte';

import 'prismjs/themes/prism-okaidia.min.css';

const python =
	'import numpy as np\n' +
	'nums = np.random.normal(0, 0.1, 25)';
</script>

<Highlighter language="svelte" code={`<div class="example">Hello</div>`} {style} />
<Highlighter language="python" code={python} {style} />

<div class="example">Hello</div>

import numpy as np
nums = np.random.normal(0, 0.1, 25)

Props

language:

string - Prism language

code:

format:

function(code: string): string

strict:

style:

Object

Slots

This component doesn't have any slots

Events

This component doesn't emit any events

Styling

backgroundColor:

fontColor:

//style.js
export default style = {};