From 53ed16d1f19b157729d2dead2a7f052aa90c6ae4 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 21 Oct 2025 14:12:23 -0700 Subject: [PATCH 1/2] feat(highlight-auto): support subset of `languages` Closes #383 --- src/HighlightAuto.svelte | 8 +++++++- src/HighlightAuto.svelte.d.ts | 7 +++++++ .../HighlightAuto.languageRestriction.test.svelte | 12 ++++++++++++ tests/e2e/e2e.test.ts | 15 +++++++++++++++ 4 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 tests/e2e/HighlightAuto.languageRestriction.test.svelte diff --git a/src/HighlightAuto.svelte b/src/HighlightAuto.svelte index 85261e23..1a2f033c 100644 --- a/src/HighlightAuto.svelte +++ b/src/HighlightAuto.svelte @@ -4,6 +4,9 @@ /** @type {any} */ export let code; + /** @type {string[] | undefined} */ + export let languages = undefined; + /** @type {boolean} */ export let langtag = false; @@ -26,7 +29,10 @@ if (highlighted) dispatch("highlight", { highlighted, language }); }); - $: ({ value: highlighted, language = "" } = hljs.highlightAuto(code)); + $: ({ value: highlighted, language = "" } = hljs.highlightAuto( + code, + languages, + )); diff --git a/src/HighlightAuto.svelte.d.ts b/src/HighlightAuto.svelte.d.ts index f40226e1..f7d00c1f 100644 --- a/src/HighlightAuto.svelte.d.ts +++ b/src/HighlightAuto.svelte.d.ts @@ -1,6 +1,7 @@ import type { SvelteComponentTyped } from "svelte"; import type { HTMLAttributes } from "svelte/elements"; import type { LangtagProps } from "./Highlight.svelte"; +import type { LanguageName } from "./languages"; export type HighlightAutoProps = HTMLAttributes & LangtagProps & { @@ -8,6 +9,12 @@ export type HighlightAutoProps = HTMLAttributes & * Specify the text to highlight. */ code: any; + + /** + * Specify an array of language names and aliases to restrict language detection. + * @example ["javascript", "typescript", "python"] + */ + languages?: LanguageName[]; }; export type HighlightAutoEvents = { diff --git a/tests/e2e/HighlightAuto.languageRestriction.test.svelte b/tests/e2e/HighlightAuto.languageRestriction.test.svelte new file mode 100644 index 00000000..072e1ba0 --- /dev/null +++ b/tests/e2e/HighlightAuto.languageRestriction.test.svelte @@ -0,0 +1,12 @@ + + + + {@html atomOneDark} + + + diff --git a/tests/e2e/e2e.test.ts b/tests/e2e/e2e.test.ts index 6ba7ddd0..7b3f16c9 100644 --- a/tests/e2e/e2e.test.ts +++ b/tests/e2e/e2e.test.ts @@ -1,6 +1,7 @@ import { expect, test } from "@playwright/experimental-ct-svelte"; import Highlight from "./Highlight.test.svelte"; import HighlightAuto from "./HighlightAuto.test.svelte"; +import HighlightAutoLanguageRestriction from "./HighlightAuto.languageRestriction.test.svelte"; import LineNumbersCustomStartingLine from "./LineNumbers.customStartingLine.test.svelte"; import LineNumbersHideBorder from "./LineNumbers.hideBorder.test.svelte"; import LineNumbers from "./LineNumbers.test.svelte"; @@ -94,3 +95,17 @@ test("Auto-highlighting detects language", async ({ mount, page }) => { await expect(page.locator(".hljs-selector-tag")).toBeVisible(); await expect(page.locator("pre")).toHaveAttribute("data-language", "css"); }); + +test("Auto-highlighting with language restriction", async ({ mount, page }) => { + await mount(HighlightAutoLanguageRestriction); + + // Should detect as javascript since we restricted to ["javascript", "typescript"] + await expect(page.locator("pre")).toHaveAttribute( + "data-language", + "javascript", + ); + + // Should have JavaScript highlighting + await expect(page.locator(".hljs-keyword")).toBeVisible(); + await expect(page.locator(".hljs-number")).toHaveText("42"); +}); From e6d409937e2170563af75927eb77ef5c32eacd44 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 21 Oct 2025 14:31:51 -0700 Subject: [PATCH 2/2] docs(highlight-auto): support subset of `languages` --- README.md | 36 +++++++++++++++++++++++++---- www/components/globals/Index.svelte | 24 +++++++++++++++++++ 2 files changed, 56 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 8146df9f..98cd9773 100644 --- a/README.md +++ b/README.md @@ -164,6 +164,27 @@ The `HighlightAuto` component uses the [highlightAuto API](https://highlightjs.r ``` +### Limiting Language Detection + +You can restrict language detection to a specific subset using the `languages` prop. This can improve performance and accuracy by limiting the languages considered during auto-detection. + +See the [highlight.js documentation on language subset restriction](https://highlightjs.readthedocs.io/en/latest/api.html#highlightauto-value-languagesubset) for more details. + +```svelte + + + + {@html github} + + + +``` + ## Line Numbers Use the `LineNumbers` component to render the highlighted code with line numbers. @@ -489,13 +510,20 @@ In the example below, the `HighlightAuto` component and injected styles are dyna #### Props -| Name | Type | Default value | -| :------ | :-------- | :------------- | -| code | `any` | N/A (required) | -| langtag | `boolean` | `false` | +| Name | Type | Default value | +| :-------- | :--------------- | :------------- | +| code | `any` | N/A (required) | +| languages | `LanguageName[]` | `undefined` | +| langtag | `boolean` | `false` | `$$restProps` are forwarded to the top-level `pre` element. +**Note:** `LanguageName` is a union type of all supported language names, providing autocomplete and type safety. You can import it from `svelte-highlight`: + +```ts +import type { LanguageName } from "svelte-highlight"; +``` + #### Dispatched Events - **on:highlight**: fired after `code` is highlighted diff --git a/www/components/globals/Index.svelte b/www/components/globals/Index.svelte index c9fe4060..e119e7c3 100644 --- a/www/components/globals/Index.svelte +++ b/www/components/globals/Index.svelte @@ -157,6 +157,30 @@ subtitle="Auto-highlighting will result in a larger bundle size. Specify a language if possible." /> + +

+ Optionally, you can restrict language detection to a specific subset using + the languages prop. This can improve performance + and accuracy. +

+ + + + import { HighlightAuto } from "svelte-highlight"; + import atomOneDark from "svelte-highlight/styles/atom-one-dark"; + + const code = "const x = 42;"; +<\/script> + + + {@html atomOneDark} + + +`} + class={THEME_MODULE_NAME} + /> +