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

[SeokminHong]

Description

PR #26525 provides the awesome functionality of handling syntax highlighting during diff highlighting. However, it does not handle all cases of, the language not been loaded yet. I fixed a test and snapshot for diff-highlighting to reproduce the bug.

When you applied the commit a2ecf98, it fails the test.

// gatsby-remark-prismjs/src/__tests__/highlight-code.js
- it(`for language diff-js`, () => {
+ it(`for language diff-typescript`, () => {
    const highlightCode = require(`../highlight-code`)
    const language = `diff`
-   const diffLanguage = `js`
+   const diffLanguage = `typescript`
    ...

    expect(
      highlightCode(
        language,
        code,
        {},
        lineNumbersHighlight,
        false,
        diffLanguage
      )
    ).toMatchSnapshot()
  })

yarn jest packages/gatsby-remark-prismjs/src/__tests__/highlight-code.js 
yarn run v1.21.0
$ jest packages/gatsby-remark-prismjs/src/__tests__/highlight-code.js
 FAIL  packages/gatsby-remark-prismjs/src/__tests__/highlight-code.js
  highlight code and lines with PrismJS
    ✓ for language cpp (26ms)
    ✓ for language jsx (28ms)
    ✕ for language diff-typescript (44ms)
    with language-text
      ✓ escapes &, <, " elements and warns (5ms)
      ✓ can warn about languages missing from inline code (4ms)
      ✓ warns once per language (5ms)
    with language-none
      ✓ does not escape its contents (4ms)
    with non-highlight-lines
      ✓ does not add trailing newlines (4ms)
      ✓ a trailing newline is preserved (3ms)
      ✓ does not add trailing newlines (3ms)
      ✓ a trailing newline is preserved (4ms)

  ● highlight code and lines with PrismJS › for language diff-typescript

    expect(received).toMatchSnapshot()

    Snapshot name: `highlight code and lines with PrismJS for language diff-typescript 1`

    - Snapshot
    + Received

      ↵
    - <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 class="token deleted-sign deleted"><span class="token prefix deleted">-</span>    let foo = bar.baz([1, 2, 3]);
    + <span class="token prefix deleted">-</span>    foo = foo + 1;
    - </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 inserted-sign inserted"><span class="token prefix inserted">+</span>    const foo = bar.baz([1, 2, 3]) + 1;
    - </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><span class="token unchanged"><span class="token prefix unchanged"> </span>    console.log(foo);
      </span>

      77 |         diffLanguage
      78 |       )
    > 79 |     ).toMatchSnapshot()
         |       ^
      80 |   })
      81 | 
      82 |   describe(`with language-text`, () => {

      at Object.<anonymous> (packages/gatsby-remark-prismjs/src/__tests__/highlight-code.js:79:7)

We can see the syntax highlighting is not applying to the newer test. Now, try the test after apply the following change.

// gatsby-remark-prismjs/src/__tests__/highlight-code.js
  it(`for language diff-typescript`, () => {
    const highlightCode = require(`../highlight-code`)
    const language = `diff`
    const diffLanguage = `typescript`
+  // pre-load typescript
+   highlightCode(diffLanguage, ``)
    ...

    expect(
      highlightCode(
        language,
        code,
        {},
        lineNumbersHighlight,
        false,
        diffLanguage
      )
    ).toMatchSnapshot()
  })

Now the test passes. We can figure out it only is styled when the diff-language is already loaded because "highlightCode" doesn't load the diff-language.

Therefore, I added the statements calling load diff-language if it is possible. Also, I removed the duplication-checking statement (if (!Prism.languages[language]) because the loadPrismLanguage function already does itself.

[pieh]

Thanks!

[pieh]

Published gatsby-remark-prismjs@3.6.0 with this change