Skip to content

bennymi/svhighlight

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

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

Focus Blocks

Blur

Blur

Highlighting

Highlighting

About

A code syntax highlighter for Svelte using highlight.js, with line blur, highligthing, and focus buttons. The component can be easily customized with Tailwind CSS.

Topics

Resources

License

Stars

Watchers

Forks