SvHighlight

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.

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:

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 highlight.js repo has a full list of supported languages, as well as a list of available themes.

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}. Setting lines: '' will not highlight any lines, so it can also be used as an "unblur" button. To specify the text in a button you can set the text property.

Focus buttons can be customized with the focusButtonClasses prop.

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:

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:

Avoiding Errors with Svelte Code

The easiest way to avoid parsing errors of your string codes is to define your strings in a separate .ts or .js file and import them into your svelte file. This also keeps your svelte file cleaner and allows you to avoid the steps below.

If you want to define the code in your svelte file then you need to be aware of the following steps. 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:

Props Overview

Acknowledgements

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