feat(highlight-auto): support subset of languages

Closes #383

Author: metonym

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,
+  ));
 </script>
 
 <slot {highlighted}>

src/HighlightAuto.svelte.d.ts

@@ -1,13 +1,20 @@
 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 an array of language names and aliases to restrict language detection.
+     * @example ["javascript", "typescript", "python"]
+     */
+    languages?: LanguageName[];
   };
 
 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} languages={["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");
+});