svelte-highlight

Fixes

• remove language prop type from HighlightAuto TypeScript definitions (f66e5ed, #217)

Refactor

• remove unnecessary language null check when setting data-language attribute (1a6ba47, #213)
• reduce .langtag CSS specificity (64a7596, #211)

Features

• port Svelte components to TypeScript (63a4e31, #209)

Documentation

• fix prop table types and default values (63bdb01)

• update generated SUPPORTED_LANGUAGES.md and SUPPORTED_STYLES.md

Breaking Changes

• use SvelteKit to package the library and auto-generate TypeScript definitions
  • styles are moved from src/styles to styles
  • languages are moved from 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

• specify in docs that vite should optimize both "highlight.js" and "highlight.js/lib/core" if using SvelteKit or vite

# svelte.config.js
export default {
  kit: {
+   vite: {
+     optimizeDeps: {
+       include: ["highlight.js", "highlight.js/lib/core"],
+     },
+   },
  },
};

Fixes

• use default highlight.js library for HighlightAuto

Features

• upgrade highlight.js to version 11.5.0 (net +1 language, +3 styles)
  • languages: graphql
  • styles: felipec, tokyo-night-dark, tokyo-night-light

Fixes

• use default export from highlight.js/lib/core.js

Fixes

• remove whitespace from pre tags because Svelte v3.46.4 now preserves pre whitespace by default

Features

• upgrade highlight.js to version 11.4.0 (net +1 style)

• recommend installing highlight.js as a dependency for pnpm users

• patch highlight.js to version 11.3.1

Fixes

• move TypeScript definitions components to the src/ folder

Fixes

• emit TypeScript definitions for languages and styles to the src/ folder

Features

• upgrade highlight.js to v11.3.0

Breaking Changes

• use .svelte.d.ts extension for TypeScript definitions

Breaking Changes

• move .hljs class from pre to code (ead430a, #173 contributed by @willster277)
• change padding of pre.langtag::after to 1em (ead430a, #173 contributed by @willster277)

Features

• add data-language attribute to pre element to allow targeted styling (b3dbb26, #171 contributed by @willster277)
• add 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;
}

Documentation

• update link to live demo