From cffe15a268b46cf85f6f89ced04b7a6b61009d6f Mon Sep 17 00:00:00 2001 From: Kevin Petschik Date: Wed, 27 May 2026 11:09:45 +0200 Subject: [PATCH] Add structured text highlighting support. --- frontend/package.json | 3 ++- frontend/pnpm-lock.yaml | 16 ++++++++++++++++ frontend/src/components/CodeSnippet.tsx | 18 +++++++++++++++++- .../src/types/highlightjs-structured-text.d.ts | 5 +++++ 4 files changed, 40 insertions(+), 2 deletions(-) create mode 100644 frontend/src/types/highlightjs-structured-text.d.ts diff --git a/frontend/package.json b/frontend/package.json index bb037d4621..5f7b27531d 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 6ecd07b20a..46c483602d 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -111,6 +111,9 @@ importers: highlight.js: specifier: ^11.9.0 version: 11.9.0 + highlightjs-structured-text: + specifier: ^1.7.3 + version: 1.7.3 i18next: specifier: ^23.7.16 version: 23.7.16 @@ -3015,10 +3018,17 @@ packages: hastscript@8.0.0: resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==} + highlight.js@11.11.1: + resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==} + engines: {node: '>=12.0.0'} + highlight.js@11.9.0: resolution: {integrity: sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==} engines: {node: '>=12.0.0'} + highlightjs-structured-text@1.7.3: + resolution: {integrity: sha512-OwIfpV9w7Wi8qvmUyksZnHB4ZcpenbJTAjISke51KflHcWm8V75denT3DiNa5Vl28FrBHF6BbVjgwyjmTehHFA==} + hsluv@0.0.3: resolution: {integrity: sha512-08iL2VyCRbkQKBySkSh6m8zMUa3sADAxGVWs3Z1aPcUkTJeK0ETG4Fc27tEmQBGUAXZjIsXOZqBvacuVNSC/fQ==} @@ -7553,8 +7563,14 @@ snapshots: property-information: 6.4.1 space-separated-tokens: 2.0.2 + highlight.js@11.11.1: {} + highlight.js@11.9.0: {} + highlightjs-structured-text@1.7.3: + dependencies: + highlight.js: 11.11.1 + hsluv@0.0.3: {} html-encoding-sniffer@3.0.0: diff --git a/frontend/src/components/CodeSnippet.tsx b/frontend/src/components/CodeSnippet.tsx index 49093b21c3..eb90396975 100644 --- a/frontend/src/components/CodeSnippet.tsx +++ b/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(null); diff --git a/frontend/src/types/highlightjs-structured-text.d.ts b/frontend/src/types/highlightjs-structured-text.d.ts new file mode 100644 index 0000000000..9a192806b2 --- /dev/null +++ b/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; +}