fix(docusaurus): support diff code blocks #4156 (#4158)

Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>

Author: soundproofboot

docusaurus.config.js

@@ -323,8 +323,9 @@ module.exports = {
     },
     prism: {
       theme: { plain: {}, styles: [] },
-      // https://github.com/FormidableLabs/prism-react-renderer/blob/e6d323332b0363a633407fabab47b608088e3a4d/packages/generate-prism-languages/index.ts#L9-L25
-      additionalLanguages: ['shell-session', 'http'],
+      // Prism provides a [default list of languages](https://github.com/FormidableLabs/prism-react-renderer/blob/e1c83a468b05df7f452b3ad7e4ae5ab874574d4e/packages/generate-prism-languages/index.ts#L9-L26).
+      // A list of [additional languages](https://prismjs.com/#supported-languages) that are supported can be found at their website.
+      additionalLanguages: ['shell-session', 'http', 'diff'],
     },
     algolia: {
       appId: 'O9QSL985BS',

src/styles/components/_code.scss

@@ -137,8 +137,7 @@ pre[class*='language-'] {
 .token.selector,
 .token.char,
 .token.function,
-.token.builtin,
-.token.inserted {
+.token.builtin {
   color: #ff6810;
 }
 
@@ -149,7 +148,9 @@ pre[class*='language-'] {
 .token.attr-value,
 .language-css .token.string,
 .style .token.string,
-.token.variable {
+.token.variable,
+// Code additions (indicated by a leading '+') within a diff.
+.token.inserted {
   color: #42b983;
 }
 
@@ -175,6 +176,7 @@ pre[class*='language-'] {
   cursor: help;
 }
 
+// Code removals (indicated by a leading '-') within a diff.
 .token.deleted {
   color: red;
 }