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

pnpm add svhighlight

For this package you also need highlight.js:

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:

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

Example Screenshots

Focus Blocks

Blur

Highlighting