fix(gatsby-remark-prismjs): Handle diff-language styling issue (#27659)

* Fix test to fail for PrismJS diff-highlight

* Handle diff-language for PrismJS plugin

* Restore checking the existence of PrismJS language early

Author: SeokminHong

packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/highlight-code.js.snap

@@ -6,12 +6,12 @@ exports[`highlight code and lines with PrismJS for language cpp 1`] = `
 "
 `;
 
-exports[`highlight code and lines with PrismJS for language diff-js 1`] = `
+exports[`highlight code and lines with PrismJS for language diff-typescript 1`] = `
 "
-<span class=\\"token deleted-sign deleted language-js\\"><span class=\\"token prefix deleted\\">-</span>    <span class=\\"token keyword\\">let</span> foo <span class=\\"token operator\\">=</span> bar<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">baz</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">[</span><span class=\\"token number\\">1</span><span class=\\"token punctuation\\">,</span> <span class=\\"token number\\">2</span><span class=\\"token punctuation\\">,</span> <span class=\\"token number\\">3</span><span class=\\"token punctuation\\">]</span><span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span>
+<span class=\\"token deleted-sign deleted language-typescript\\"><span class=\\"token prefix deleted\\">-</span>    <span class=\\"token keyword\\">let</span> foo <span class=\\"token operator\\">=</span> bar<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">baz</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">[</span><span class=\\"token number\\">1</span><span class=\\"token punctuation\\">,</span> <span class=\\"token number\\">2</span><span class=\\"token punctuation\\">,</span> <span class=\\"token number\\">3</span><span class=\\"token punctuation\\">]</span><span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span>
 <span class=\\"token prefix deleted\\">-</span>    foo <span class=\\"token operator\\">=</span> foo <span class=\\"token operator\\">+</span> <span class=\\"token number\\">1</span><span class=\\"token punctuation\\">;</span>
-</span><span class=\\"token inserted-sign inserted language-js\\"><span class=\\"token prefix inserted\\">+</span>    <span class=\\"token keyword\\">const</span> foo <span class=\\"token operator\\">=</span> bar<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">baz</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">[</span><span class=\\"token number\\">1</span><span class=\\"token punctuation\\">,</span> <span class=\\"token number\\">2</span><span class=\\"token punctuation\\">,</span> <span class=\\"token number\\">3</span><span class=\\"token punctuation\\">]</span><span class=\\"token punctuation\\">)</span> <span class=\\"token operator\\">+</span> <span class=\\"token number\\">1</span><span class=\\"token punctuation\\">;</span>
-</span><span class=\\"token unchanged language-js\\"><span class=\\"token prefix unchanged\\"> </span>    console<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">log</span><span class=\\"token punctuation\\">(</span>foo<span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span>
+</span><span class=\\"token inserted-sign inserted language-typescript\\"><span class=\\"token prefix inserted\\">+</span>    <span class=\\"token keyword\\">const</span> foo <span class=\\"token operator\\">=</span> bar<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">baz</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">[</span><span class=\\"token number\\">1</span><span class=\\"token punctuation\\">,</span> <span class=\\"token number\\">2</span><span class=\\"token punctuation\\">,</span> <span class=\\"token number\\">3</span><span class=\\"token punctuation\\">]</span><span class=\\"token punctuation\\">)</span> <span class=\\"token operator\\">+</span> <span class=\\"token number\\">1</span><span class=\\"token punctuation\\">;</span>
+</span><span class=\\"token unchanged language-typescript\\"><span class=\\"token prefix unchanged\\"> </span>    <span class=\\"token builtin\\">console</span><span class=\\"token punctuation\\">.</span><span class=\\"token function\\">log</span><span class=\\"token punctuation\\">(</span>foo<span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span>
 </span>"
 `;
 

packages/gatsby-remark-prismjs/src/__tests__/highlight-code.js

@@ -55,10 +55,10 @@ export default Counter
     expect(/<span[^>]*>[^<]*\n[^<]*<\/span>/g.exec(processed)).not.toBeTruthy()
   })
 
-  it(`for language diff-js`, () => {
+  it(`for language diff-typescript`, () => {
     const highlightCode = require(`../highlight-code`)
     const language = `diff`
-    const diffLanguage = `js`
+    const diffLanguage = `typescript`
     const lineNumbersHighlight = []
     const code = `
 -    let foo = bar.baz([1, 2, 3]);

packages/gatsby-remark-prismjs/src/highlight-code.js

@@ -43,6 +43,23 @@ module.exports = (
     }
   }
 
+  // (Try to) load diffLanguage on demand.
+  if (diffLanguage && !Prism.languages[diffLanguage]) {
+    try {
+      loadPrismLanguage(diffLanguage)
+    } catch (e) {
+      let message = `unable to find prism language '${diffLanguage}' for highlighting.`
+
+      const lang = diffLanguage.toLowerCase()
+      if (!unsupportedLanguages.has(lang)) {
+        console.warn(message, `applying generic code block`)
+        unsupportedLanguages.add(lang)
+      }
+      // Ignore diffLanguage when it does not exist.
+      diffLanguage = null
+    }
+  }
+
   const grammar = Prism.languages[language]
   const highlighted = Prism.highlight(
     code,