Syntax Highlighting for Svelte using highlight.js
MIT License
Features
--langtag-top
, --langtag-right
style propsThe Highlight
components support style props to customize the langtag
, if displayed.
The default value for --langtag-top
and --langtag-right
is 0
.
<HighlightAuto
{code}
langtag
--langtag-top="0.5rem"
--langtag-right="0.5rem"
--langtag-background="linear-gradient(135deg, #2996cf, 80%, white)"
--langtag-color="#fff"
--langtag-border-radius="6px"
--langtag-padding="0.5rem"
/>
Features
--langtag-padding
style propThe Highlight
components support style props to customize the langtag
, if displayed.
The default value for --langtag-padding
is "1em"
.
<HighlightAuto
{code}
langtag
--langtag-background="linear-gradient(135deg, #2996cf, 80%, white)"
--langtag-color="#fff"
--langtag-border-radius="6px"
--langtag-padding="0.5rem"
/>
Fixes
exports
to allow importing from svelte-highlight/styles
and svelte-highlight/languages
(#316, 12e7830)This fix supports the following import variations:
// Base import for styles/languages
import { _default } from "svelte-highlight/styles";
import { _1c } from "svelte-highlight/languages";
// Explicit index
import { _default } from "svelte-highlight/styles/index";
import { typescript } from "svelte-highlight/languages/index";
// Explicit extension
import lang from "svelte-highlight/languages/1c.js"
import style from "svelte-highlight/styles/3024.js";
Fixes
Fixes
From version 7.4.0:
Features
highlight.js
to version 11.9.0
Features
highlight.js
to version 11.9.0
Features
highlight.js
to version 11.8.0
Fixes
Breaking Changes
--hljs-background
-> --langtag-background
--hljs-foreground
-> --langtag-color
--hljs-radius
-> --langtag-border-radius
code
, language
as required props (86acf4c, #218)Features
language
in on:highlight
event detail in HighlightAuto
(2c82ca3, #252)LineNumbers
component to support rendering line numbers (82f9366, #248)highlight.js
to version 11.7.0 (d463d9b, #245)Fixes
HTMLAttributes
from svelte/elements
to correctly type $$restProps
(076b2b4)Fixes
svelte-highlight/languages/*
, svelte-highlight/styles/*
(5ea7dbd, #231)Documentation