feat: syntax highlighting in MarkDown

Author: StefanFl

frontend/src/commons/custom_fields/MarkdownField.tsx

@@ -1,11 +1,22 @@
 import Markdown from "markdown-to-jsx";
 import { marked } from "marked";
-import { Fragment } from "react";
+import { Fragment, React } from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 
 import { useLinkStyles } from "../../commons/layout/themes";
+import { getPrismTheme } from "../functions";
 import { getResolvedSettingTheme } from "../user_settings/functions";
 import LabeledTextField from "./LabeledTextField";
 
+declare global {
+    interface Window {
+        hljs?: {
+            highlightElement: (el: HTMLElement) => void;
+        };
+    }
+}
+export {};
+
 interface MarkdownProps {
     content: string;
     label: string;
@@ -45,6 +56,31 @@ function isMarkdownValue(value: string): boolean {
     return isMarkdown;
 }
 
+type CodeProps = React.HTMLAttributes<HTMLElement>;
+
+function SyntaxHighlightedCode({ className, children, ...rest }: CodeProps) {
+    // markdown-to-jsx tags fenced blocks with `lang-<language>`.
+    // Inline code (`like this`) has no such class — render it as-is.
+    const match = /lang-(\w+)/.exec(className ?? "");
+    if (!match) {
+        return (
+            <code className={className} {...rest}>
+                {children}
+            </code>
+        );
+    }
+
+    return (
+        <SyntaxHighlighter
+            language={match[1]}
+            style={getPrismTheme()}
+            PreTag="div" // markdown-to-jsx already wraps fenced blocks in <pre>; avoid nesting
+        >
+            {String(children).replace(/\n$/, "")}
+        </SyntaxHighlighter>
+    );
+}
+
 const MarkdownField = (props: MarkdownProps) => {
     const { classes } = useLinkStyles({ setting_theme: getResolvedSettingTheme() });
 
@@ -64,6 +100,7 @@ const MarkdownField = (props: MarkdownProps) => {
                                     className: classes.link,
                                 },
                             },
+                            code: SyntaxHighlightedCode,
                         },
                     }}
                 >

frontend/src/commons/functions.tsx

@@ -1,5 +1,6 @@
 import { PackageURL } from "packageurl-js";
 import { SortPayload } from "ra-core";
+import { oneDark, oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
 
 import { httpClient } from "../commons/ra-data-django-rest-framework";
 import {
@@ -406,3 +407,12 @@ export function has_attribute(attribute: string, data: any, sort: SortPayload |
         }
     });
 }
+
+export function getPrismTheme() {
+    const theme = getResolvedSettingTheme();
+    if (theme === "dark") {
+        return oneDark;
+    } else {
+        return oneLight;
+    }
+}

frontend/src/rules/functions.tsx

@@ -16,9 +16,9 @@ import {
 } from "react-admin";
 import { useWatch } from "react-hook-form";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+
 // import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
 // import rego from "react-syntax-highlighter/dist/esm/languages/prism/rego";
-import { oneDark, oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
 
 import MarkdownEdit from "../commons/custom_fields/MarkdownEdit";
 import MarkdownField from "../commons/custom_fields/MarkdownField";
@@ -33,6 +33,7 @@ import {
 import {
     feature_general_rules_need_approval_enabled,
     feature_vex_enabled,
+    getPrismTheme,
     justificationIsEnabledForStatus,
     remediationsAreEnabledForStatus,
     settings_vex_justification_style,
@@ -45,7 +46,6 @@ import {
     useStyles,
 } from "../commons/layout/themes";
 import { VEX_JUSTIFICATION_TYPE_CSAF_OPENVEX, VEX_JUSTIFICATION_TYPE_CYCLONEDX } from "../commons/types";
-import { getResolvedSettingTheme } from "../commons/user_settings/functions";
 import {
     OBSERVATION_CYCLONEDX_VEX_JUSTIFICATION_CHOICES,
     OBSERVATION_SEVERITY_CHOICES,
@@ -58,15 +58,6 @@ import { RULE_TYPE_CHOICES, RULE_TYPE_FIELDS, RULE_TYPE_REGO } from "./types";
 
 // SyntaxHighlighter.registerLanguage("rego", rego);
 
-export function getRegoTheme() {
-    const theme = getResolvedSettingTheme();
-    if (theme === "dark") {
-        return oneDark;
-    } else {
-        return oneLight;
-    }
-}
-
 export const validateRuleForm = (values: any) => {
     const errors: any = {};
 
@@ -196,7 +187,7 @@ export const RuleShowComponent = ({ rule }: any) => {
                         <Labeled label="Rego module">
                             <SyntaxHighlighter
                                 language="rego"
-                                style={getRegoTheme()}
+                                style={getPrismTheme()}
                                 wrapLongLines
                                 customStyle={{ lineHeight: "1.43", fontSize: "0.875rem" }}
                                 codeTagProps={{