Syntax Highlighting for Svelte using highlight.js
MIT License
Breaking Changes
src/styles
to styles
src/languages
to languages
- import github from "svelte-highlight/src/styles/github";
+ import github from "svelte-highlight/styles/github";
- import typescript from "svelte-highlight/src/languages/typescript";
+ import typescript from "svelte-highlight/languages/typescript";
Documentation
# svelte.config.js
export default {
kit: {
+ vite: {
+ optimizeDeps: {
+ include: ["highlight.js", "highlight.js/lib/core"],
+ },
+ },
},
};
Fixes
pre
tags because Svelte v3.46.4 now preserves pre
whitespace by default
Features
highlight.js
to version 11.4.0 (net +1 style)Features
data-language
attribute to pre
element to allow targeted styling (b3dbb26, #171 contributed by @willster277)langtag
prop that displays the highlighted language if enabled (b3dbb26, #171 contributed by @willster277)Set langtag
to true
to display the highlighted language.
<script>
import { HighlightAuto } from "svelte-highlight";
$: code = `.body { padding: 0; margin: 0; }`;
</script>
<HighlightAuto {code} langtag="{true}" />
Style the language tag by targeting the data-language
attribute:
pre.hljs[data-language="css"] {
--hljs-background: linear-gradient(135deg, #2996cf, 80%, white);
--hljs-foreground: #fff;
--hljs-radius: 8px;
}