chore(content): fall back to language-only highlight when diff plugin…

… isn't imported; improve tests
analogjs · Aug 31, 2023 · 36d8a30 · 36d8a30
1 parent 7316d01
commit 36d8a30
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/packages/content/src/lib/markdown-content-renderer.service.spec.ts b/packages/content/src/lib/markdown-content-renderer.service.spec.ts
@@ -35,6 +35,7 @@ describe('MarkdownContentRendererService', () => {
 
   it('render should correctly highlight diff code blocks', async () => {
     const { service } = setup();
+    window.Prism.languages['diff'] = {};
     let testCode = "```diff-javascript\nconsole.log('Hello, world!');\n```";
     let result = await service.render(testCode);
 
@@ -49,4 +50,22 @@ describe('MarkdownContentRendererService', () => {
       '<pre class="language-diff-typescript diff-highlight"><code class="language-diff-typescript diff-highlight">'
     );
   });
+
+  it('render should fall back to language-only highlighting if `diff` plugin is not imported', async () => {
+    const { service } = setup();
+    window.Prism.languages['diff'] = undefined;
+    let testCode = "```diff-javascript\nconsole.log('Hello, world!');\n```";
+    let result = await service.render(testCode);
+
+    expect(result).toContain(
+      '<pre class="language-javascript"><code class="language-javascript">'
+    );
+
+    testCode = "```diff-typescript\nconsole.log('Hello, world!');\n```";
+    result = await service.render(testCode);
+
+    expect(result).toContain(
+      '<pre class="language-typescript"><code class="language-typescript">'
+    );
+  });
 });
diff --git a/packages/content/src/lib/marked-setup.service.ts b/packages/content/src/lib/marked-setup.service.ts
@@ -36,9 +36,10 @@ export class MarkedSetupService {
         return '<pre><code>' + code + '</code></pre>';
       }
 
-      const classes = lang.startsWith('diff')
-        ? `language-${lang} diff-highlight`
-        : `language-${lang}`;
+      const classes =
+        lang.startsWith('diff') && Prism.languages['diff']
+          ? `language-${lang} diff-highlight`
+          : `language-${lang.replace('diff-', '')}`;
       return `<pre class="${classes}"><code class="${classes}">${code}</code></pre>`;
     };
 
@@ -47,10 +48,11 @@ export class MarkedSetupService {
       markedHighlight({
         async: true,
         highlight: (code: string, lang: string) => {
-          const diff = lang?.startsWith('diff-');
+          let diff = lang?.startsWith('diff-');
           lang = diff ? lang.replace('diff-', '') : lang || 'typescript';
 
           if (diff && !Prism.languages['diff']) {
+            diff = false;
             console.warn(`Notice:
     ---------------------------------------------------------------------------------------
     The \`diff\` language and plugin are not available in the provided setup.