SvHighlight - Code Highlighting with Svelte

A code syntax highlighter for Svelte, with line blur and highligthing and focus buttons. The component can be easily customized with TailwindCSS.

Links

- Documentation
- Github

Features

- ✅ line numbers toggle
- ✅ highlighting lines / blur out non-highlighted lines
- ✅ hovering over blurred area unblurs the code
- ✅ copy button
- ✅ focus blocks and buttons to focus your reader's attention
- ✅ customizable

Installation

``bash
pnpm add svhighlight
`

For this package you also need highlight.js:

`bash
pnpm add highlight.js
`

Additionally install TailwindCSS.

In your tailwind.config.cjs file add the following line "./node_modules/svhighlight/*/.svelte" to the content, so it looks like this:

`javascript
/* @type {import('tailwindcss').Config} /
module.exports = {
content: [
'./src/*/.{html,js,svelte,ts}',
"./node_modules/svhighlight/*/.svelte"
],
theme: {
extend: {},
},
plugins: [],
}
``

Example Screenshots

$3

!Focus Blocks

$3

!Blur

$3

!Highlighting