mdsvex-shiki

A highlighter for mdsvex using Shiki with support for most common transformers out of the box.

It was created to provide a better, more feature-rich, and customizable code highlighting solution for SvelteKit projects, addressing the limitations of mdsvex's built-in Prism highlighter.

Key Features & Purpose:

• Replaces mdsvex's default Prism highlighter with Shiki.
• Supports a wide array of Shiki transformers by default, including syntax highlighting for meta strings, words, diffs, and error levels.
• Offers a customizable title bar for code blocks, which can display the code block's title and language label.
• Includes a functional copy button to copy code to the clipboard.
• Provides extensive theming and configuration options through Shiki's native codeToHtml settings.

Target Audience: Primarily developers using mdsvex within Svelte or SvelteKit projects who require advanced and aesthetically pleasing code syntax highlighting.

Configuration Highlights: The library is configured within svelte.config.js as part of the mdsvex preprocessor. Key options include:

• displayTitle: Controls the visibility of the title bar.
• displayLang: Controls the visibility of the language label.
• disableCopyButton: Controls the copy button.
• shikiOptions: Directly passes options (like theme and transformers) to Shiki.

Required Setup for Advanced Features: To use the title bar and copy button functionality, you must:

1. Import the library's CSS file (import '@mistweaverco/mdsvex-shiki/styles.css';).
2. Apply the provided copyAction Svelte action to a container element wrapping your markdown content.