Feat: Add structured text highlighting support.

frontend/package.json

@@ -40,9 +40,11 @@
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.5.1",
     "highlight.js": "^11.9.0",
+    "highlightjs-structured-text": "^1.7.3",
     "i18next": "^23.7.16",
     "lodash": "^4.17.21",
     "lucide-react": "^0.555.0",
+    "pdfjs-dist": "5.4.296",
     "plotly.js": "^2.27.0",
     "react": "^18.3.1",
     "react-day-picker": "^9.11.1",
@@ -53,7 +55,6 @@
     "react-hotkeys-hook": "^4.4.1",
     "react-i18next": "^14.0.0",
     "react-markdown": "^9.0.1",
-    "pdfjs-dist": "5.4.296",
     "react-pdf": "^10.4.1",
     "react-player": "^2.16.0",
     "react-plotly.js": "^2.6.0",

frontend/src/components/CodeSnippet.tsx

@@ -1,5 +1,6 @@
 import { cn } from '@/lib/utils';
-import hljs from 'highlight.js';
+import hljs, { LanguageFn } from 'highlight.js';
+import iecst from 'highlightjs-structured-text';
 import { useEffect, useRef } from 'react';
 
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
@@ -8,11 +9,26 @@ import 'highlight.js/styles/monokai-sublime.css';
 
 import CopyButton from './CopyButton';
 
+// Append this list with missing languages as needed, ensuring they are registered with hljs
+const additionalLanguages: LanguageRegistrations = [['iecst', iecst]];
+
+registerAdditionalLanguages();
+
+type LanguageRegistrations = [string, LanguageFn][];
+
 interface CodeSnippetProps {
   language: string;
   children: string;
 }
 
+function registerAdditionalLanguages() {
+  for (const [name, lang] of additionalLanguages) {
+    if (!hljs.getLanguage(name)) {
+      hljs.registerLanguage(name, lang);
+    }
+  }
+}
+
 const HighlightedCode = ({ language, children }: CodeSnippetProps) => {
   const codeRef = useRef<HTMLElement>(null);
 

frontend/src/types/highlightjs-structured-text.d.ts

@@ -0,0 +1,5 @@
+declare module 'highlightjs-structured-text' {
+  import { LanguageFn } from 'highlight.js';
+  const iecst: LanguageFn;
+  export default iecst;
+}