feat(highlight-auto): support subset of languageNames

README.md

@@ -164,6 +164,25 @@ The `HighlightAuto` component uses the [highlightAuto API](https://highlightjs.r
 <HighlightAuto {code} />
 ```
 
+### Limiting Language Detection
+
+You can restrict [language auto-detection](https://highlightjs.readthedocs.io/en/latest/api.html#highlightauto-value-languagesubset) to a subset using the `languageNames` prop. This can improve performance and accuracy.
+
+```svelte
+<script>
+  import { HighlightAuto } from "svelte-highlight";
+  import github from "svelte-highlight/styles/github";
+
+  const code = "const x = 42;";
+</script>
+
+<svelte:head>
+  {@html github}
+</svelte:head>
+
+<HighlightAuto {code} languageNames={["javascript", "typescript"]} />
+```
+
 ## Line Numbers
 
 Use the `LineNumbers` component to render the highlighted code with line numbers.
@@ -489,13 +508,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

src/HighlightAuto.svelte

@@ -4,6 +4,9 @@
   /** @type {any} */
   export let code;
 
+  /** @type {(import("./languages").LanguageName | (string & {}))[] | undefined} */
+  export let languageNames = 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,
+    languageNames,
+  ));
 </script>
 
 <slot {highlighted}>

src/HighlightAuto.svelte.d.ts

@@ -1,13 +1,21 @@
 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<HTMLPreElement> &
   LangtagProps & {
     /**
      * Specify the text to highlight.
      */
     code: any;
+
+    /**
+     * Specify a subset of language names to restrict language auto-detection to.
+     * This can improve performance and accuracy.
+     * @example ["javascript", "typescript"]
+     */
+    languageNames?: (LanguageName | (string & {}))[];
   };
 
 export type HighlightAutoEvents = {

tests/e2e/HighlightAuto.languageRestriction.test.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { HighlightAuto } from "svelte-highlight";
+  import atomOneDark from "svelte-highlight/styles/atom-one-dark";
+
+  let code = "const x = 42;";
+</script>
+
+<svelte:head>
+  {@html atomOneDark}
+</svelte:head>
+
+<HighlightAuto {code} languageNames={["javascript", "typescript"]} langtag />

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");
+});

www/components/globals/Index.svelte

@@ -157,6 +157,30 @@
       subtitle="Auto-highlighting will result in a larger bundle size. Specify a language if possible."
     />
   </Column>
+  <Column xlg={6} lg={6} md={12}>
+    <p class="mb-5">
+      Optionally, you can restrict language detection to a specific subset using
+      the <code class="code">languageNames</code> prop. This can improve performance
+      and accuracy.
+    </p>
+  </Column>
+  <Column xlg={10} lg={10} md={12}>
+    <HighlightSvelte
+      code={`<script>
+  import { HighlightAuto } from "svelte-highlight";
+  import atomOneDark from "svelte-highlight/styles/atom-one-dark";
+
+  const code = "const x = 42;";
+<\/script>
+
+<svelte:head>
+  {@html atomOneDark}
+</svelte:head>
+
+<HighlightAuto {code} languageNames={["javascript", "typescript"]} />`}
+      class={THEME_MODULE_NAME}
+    />
+  </Column>
 </Row>
 
 <Row class="mb-9">