SvHighlight

A code highlighter with blur and focus buttons for using Highlight.js and .
SVELTE

Installation

For the installation, simply install the package, as well as highlight.js and TailwindCSS (link to instructions on how to install Tailwind), with npm or pnpm.

SHELL

Once you have Tailwind installed you need to update the tailwind.config.cjs file, to make sure that Tailwind knows to also compile files from this package. Simply add the following line to the content:

tailwind.config.cjs

Highlighting Lines

To highlight lines you can define a string with the line numbers that should be highlighted with the highlightLines prop. You can separate multiple lines with commas and add ranges. The highlight color can be changed with highlightColor.

The full list of supported languages from highlight.js is here, and a list of available themes is here.

SVELTE

Focus Type

You can switch the focus type between 'highlight' and 'blur' using the focusType prop. By default blur is used.

Focus Blocks

You can define a list of focus blocks, in which you can define lines that should be highlighted, as well as which line to scroll to when the focus block is active. If you are using Typescript, you can import the FocusBlock type from the library. If you want to see focus buttons for each focus block, you can set showFocusButtons={true}. Focus buttons can be customized with the focusButtonClasses prop.

SVELTE

Active Focus Store

You can either style the focus buttons to your liking with the focusButtonClasses prop, or remove them all together with the showFocusButtons prop.

Additionally, if you rather create a different control for focus blocks, you can pass a store to activeFocusBlockStore. With the store you can control the active index. Here for example, a button will focus the next block in the focusBlocks list:

SVELTE

Dimensions & Style Props

There are a lot of props to customize the look of the code block. Here I will only mention a few. For the complete list look at the table at the bottom of the page.

By default the dimensions of the table are set to 'w-full h-fit', but you can change this with the dimensions prop.

You can enable / disable both the header and the line numbers with showHeader and showLineNumbers respectively. You can change the displayed header text with the headerText prop, which by default is the uppercase of the specified language.

To change the text size and default text color of non-highlighted code you can use the codeTextClasses prop. You can change the background color of the code block with background.

Adding Line Number Bar

You can add a bar between the line numbers and the code by updating the lineNumberTextClasses prop:

Customization: Line Numbers

Avoiding Errors with Svelte Code

When pasting Svelte code that you want to display, you have to escape the closing script tag to avoid errors: <\/script>.

Another error can occur if you have a <style> tag in your string, in which case you might see *{}added to the end of your code. This is due to some parsing error. You can read more about it in this Stackoverflow thread. To avoid this, make sure that you add style tags like this:

<style> tag inside string

Props Overview

Prop Type Options Default
(Click to Expand)
Description
language string - plaintext Set the Highlight.js language used for syntax highlighting.
code string - - Provide the code as a string.
highlightLines string - - Provide lines that should be highlighted. Ranges are accepted, e.g.: '1-5, 8, 10-12, 42'.
focusType string 'blur' | 'highlight' blur Set focus type.
showHeader boolean true | false true Show header.
headerText string - language.toUppercase() Set header text. Is the same as the language by default.
showLineNumbers boolean true | false true Show line numbers.
focusBlocks FocusBlock[] - [] Define focus blocks. The focus block type can be imported from the library.
showFocusButtons boolean true | false false Show focus buttons.
activeFocusBlockStore Writable<number> - null Provide store that states which focus block index should be active.
background string - bg-gray-900 Provide classes to set the background color.
headerClasses string - Provide classes to set the header style (background / text-color / etc).
focusButtonClasses string - Provide classes for the focus buttons.
codeTextClasses string - text-sm text-white Provide classes to set the code text style (size and color).
lineNumberTextClasses string - text-white/90 Provide classes to style the default line number text.
rounded string - rounded-lg Provide classes to set the CodeBlock border radius.
dimensions string - w-full h-fit Provide classes to set dimensions of the code block.
highlightColor string - bg-gray-200/10 Provide classes to set highlight color.

Acknowledgements

This component was adopted from Skeleton UI's CodeBlock component and inspired by their customizability, as well as Torchlight's syntax highlighting API.