Fix twig syntax highlighting

Author: Tom Mitchelmore

.vscode/settings.json

@@ -8,4 +8,7 @@
         "editor.formatOnSave": true,
         "editor.defaultFormatter": "dbaeumer.vscode-eslint"
     },
+    "[typescript]": {
+        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    },
 }

docusaurus.config.ts

@@ -170,7 +170,7 @@ const config: Config = {
     prism: {
       theme: prismThemes.vsLight,
       darkTheme: prismThemes.vsDark,
-      additionalLanguages: ["diff", "php"],
+      additionalLanguages: ["diff", "php", "twig"],
     },
   } satisfies Preset.ThemeConfig,
 };

src/theme/prism-include-languages.ts

@@ -0,0 +1,21 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+import siteConfig from "@generated/docusaurus.config";
+import type * as PrismNamespace from "prismjs";
+
+export default function prismIncludeLanguages(
+  PrismObject: typeof PrismNamespace,
+): void {
+  const {
+    themeConfig: { prism },
+  } = siteConfig;
+  const { additionalLanguages } = prism as { additionalLanguages: string[] };
+
+  globalThis.Prism = PrismObject;
+
+  additionalLanguages.forEach((lang) => {
+    if (lang === "php" || lang === "twig") {
+      require("prismjs/components/prism-markup-templating.js");
+    }
+    require(`prismjs/components/prism-${lang}`);
+  });
+}