diff --git a/packages/shaku-code-annotate-shiki-transformer/src/__tests__/__snapshots__/codeToHtml.test.ts.snap b/packages/shaku-code-annotate-shiki-transformer/src/__tests__/__snapshots__/codeToHtml.test.ts.snap
index d9cd06f..369a121 100644
--- a/packages/shaku-code-annotate-shiki-transformer/src/__tests__/__snapshots__/codeToHtml.test.ts.snap
+++ b/packages/shaku-code-annotate-shiki-transformer/src/__tests__/__snapshots__/codeToHtml.test.ts.snap
@@ -126,3 +126,15 @@ exports[`codeToHtml() 4`] = `"function useSomeEffect({blog}) { useEffect(() => { return () => { location.href = 'https://jser.dev' } }, [blog])}
"`;
exports[`codeToHtml() 6`] = `" function useSomeEffect({blog}) { location.href = 'https://jser.dev' }
"`;
+
+exports[`unknown lang should fallback to text 1`] = `"function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // ^ // [<a href=\\"https:jser.dev\\">jser.dev</a>] useEffect(() => { // ( ) const connection = createConnection(serverUrl, roomId); // (1 ) connection.connect(); return () => { //(2 ) connection.disconnect(); }; //(3 ) }, [serverUrl, roomId]);}
"`;
+
+exports[`unknown lang should fallback to text 2`] = `"function hello() { // ^! // [Hello world!]! // ^ // [Shaku <b>Shaku</b>] const blog = \\"https://jser.dev\\"}
"`;
+
+exports[`unknown lang should fallback to text 3`] = `"function useSomeEffect({blog}) { useEffect(() => { // do some stuff // @fold start return () => { // @highlight location.href = 'https://jser.dev' } // @fold ^ }, [blog])}
"`;
+
+exports[`unknown lang should fallback to text 4`] = `"// @class abc h123// @highlightfunction useSomeEffect({blog}) { useEffect(() => { return () => { location.href = 'https://jser.dev' } }, [blog])}
"`;
+
+exports[`unknown lang should fallback to text 5`] = `"function useSomeEffect({blog}) { useEffect(() => { // @data a=1 return () => { // @data a-b-c=1-2-3 beg-1=hello-2 location.href = 'https://jser.dev' } }, [blog])}
"`;
+
+exports[`unknown lang should fallback to text 6`] = `" function useSomeEffect({blog}) { // @cut v useEffect(() => { return () => { // @cut ^ location.href = 'https://jser.dev' // @cut start } }, [blog]) // @cut end // @cut // a comment to cut }
"`;
diff --git a/packages/shaku-code-annotate-shiki-transformer/src/__tests__/codeToHtml.test.ts b/packages/shaku-code-annotate-shiki-transformer/src/__tests__/codeToHtml.test.ts
index f7a1126..ce00c17 100644
--- a/packages/shaku-code-annotate-shiki-transformer/src/__tests__/codeToHtml.test.ts
+++ b/packages/shaku-code-annotate-shiki-transformer/src/__tests__/codeToHtml.test.ts
@@ -129,3 +129,18 @@ test("codeToHtml() + raw HTML + explicit trigger", async () => {
expect(html).toMatchSnapshot();
}
});
+
+test("unknown lang should fallback to text", async () => {
+ const processor = await fetchProcessor(
+ "javascript",
+ true /* useDangerousRawHtml */
+ );
+
+ for (const snippet of snippets) {
+ const html = await processor
+ .process(`\`\`\`unknown \n${snippet}\n\`\`\``)
+ .then((result) => result.toString());
+
+ expect(html).toMatchSnapshot();
+ }
+});
diff --git a/packages/shaku-code-annotate-shiki-transformer/src/__tests__/util.ts b/packages/shaku-code-annotate-shiki-transformer/src/__tests__/util.ts
index e3c94c7..5900717 100644
--- a/packages/shaku-code-annotate-shiki-transformer/src/__tests__/util.ts
+++ b/packages/shaku-code-annotate-shiki-transformer/src/__tests__/util.ts
@@ -5,12 +5,27 @@ import remarkRehype from "remark-rehype";
import { unified } from "unified";
import shakuCodeAnnotateShikiTransformer from "..";
import * as shiki from "shiki";
+import { visit } from "unist-util-visit";
+import { commentPatterns } from "../commentPatterns";
export const unifiedProcessor = unified()
.use(remarkParse)
.use(remarkRehype) // this sanitize html by default
.use(rehypeStringify);
+function remarkFallbackLang() {
+ return (tree) => {
+ visit(tree, "code", (node) => {
+ if (node.lang) {
+ node.lang = node.lang.toLowerCase();
+ if (!(node.lang in commentPatterns)) {
+ node.lang = "text";
+ }
+ }
+ });
+ };
+}
+
export function fetchProcessor(
lang: string,
useDangerousRawHtml: boolean,
@@ -24,6 +39,7 @@ export function fetchProcessor(
.then((highlighter) =>
unified()
.use(remarkParse)
+ .use(remarkFallbackLang)
.use(remarkRehype)
.use(rehypeShiki, {
transformers: [