Diffs snippets are not displayed correctly

[BlueCutOfficial]

How to reproduce

• Visit https://ember-fr-guides.netlify.app/release/tutorial/part-1/reusable-components/
• Look at the paragraph called "Paramétrer des composants avec des arguments"
  • 👀 The diff snippets appears like a regular code snippet.
  • 👉 It should appear with diff color syntax, like the English version https://guides.emberjs.com/release/tutorial/part-1/reusable-components/

First insights

The diff colors are managed in app.scss, you can find the place by searching code[data-diff] in the code.

In the English version, the code lines are embedded in <span class="diff-deletion"> and <span class="diff-insertion"> elements, which is what the CSS applied to. But in the French guides, the generated HTML is wrong and we don't have such elements, so the CSS is unused.

ember-showdown-prism seems related to the generation of the HTML, our custom Guidemaker template uses a non-up-to-date version.
Today, ember-learn/guidemaker-ember-template uses different dependencies. See also https://discord.com/channels/480462759797063690/480777444203429888/1255605726622122044