Add syntax highlighting to the Markdown element (#356)

Also fixes the styling for the copy button

frontend/app/element/copybutton.less

@@ -2,9 +2,15 @@
 // SPDX-License-Identifier: Apache-2.0
 
 .copy-button {
-    padding: 5px 5px;
+    padding: 5px 5px !important;
+    opacity: 0.5;
 
-    .fa-check {
+    &:hover {
+        opacity: 1;
+    }
+
+    &.copied {
+        opacity: 1;
         color: var(--success-color);
     }
 }

frontend/app/element/copybutton.tsx

@@ -2,9 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { clsx } from "clsx";
-import * as React from "react";
+import { useEffect, useRef, useState } from "react";
 import { Button } from "./button";
-
 import "./copybutton.less";
 
 type CopyButtonProps = {
@@ -14,8 +13,8 @@ type CopyButtonProps = {
 };
 
 const CopyButton = ({ title, className, onClick }: CopyButtonProps) => {
-    const [isCopied, setIsCopied] = React.useState(false);
-    const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
+    const [isCopied, setIsCopied] = useState(false);
+    const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
     const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
         if (isCopied) {
@@ -35,7 +34,7 @@ const CopyButton = ({ title, className, onClick }: CopyButtonProps) => {
         }
     };
 
-    React.useEffect(() => {
+    useEffect(() => {
         return () => {
             if (timeoutRef.current) {
                 clearTimeout(timeoutRef.current);
@@ -44,7 +43,11 @@ const CopyButton = ({ title, className, onClick }: CopyButtonProps) => {
     }, []);
 
     return (
-        <Button onClick={handleOnClick} className={clsx("copy-button secondary ghost", className)} title={title}>
+        <Button
+            onClick={handleOnClick}
+            className={clsx("copy-button secondary ghost", className, { copied: isCopied })}
+            title={title}
+        >
             {isCopied ? <i className="fa-sharp fa-solid fa-check"></i> : <i className="fa-sharp fa-solid fa-copy"></i>}
         </Button>
     );

frontend/app/element/markdown.less

@@ -81,13 +81,11 @@
                 visibility: hidden;
                 display: flex;
                 position: absolute;
-                top: 4px;
-                right: 4px;
+                top: 0;
+                right: 0;
                 border-radius: 4px;
                 align-items: center;
                 justify-content: flex-end;
-                padding-left: 4px;
-                padding-right: 4px;
 
                 i {
                     color: var(--line-actions-inactive-color);
@@ -118,7 +116,7 @@
 
         code {
             color: var(--app-text-color);
-            background-color: var(--panel-bg-color);
+            background-color: transparent;
             font-family: var(--termfontfamily);
             border-radius: 4px;
         }

frontend/app/element/markdown.tsx

@@ -10,7 +10,9 @@ import { Atom } from "jotai";
 import { OverlayScrollbarsComponent, OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import ReactMarkdown, { Components } from "react-markdown";
+import rehypeHighlight from "rehype-highlight";
 import rehypeRaw from "rehype-raw";
+import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
 import rehypeSlug from "rehype-slug";
 import RemarkFlexibleToc, { TocItem } from "remark-flexible-toc";
 import remarkGfm from "remark-gfm";
@@ -47,8 +49,8 @@ const Heading = ({ props, hnum }: { props: React.HTMLAttributes<HTMLHeadingEleme
     );
 };
 
-const Code = ({ children }: { children: React.ReactNode }) => {
-    return <code>{children}</code>;
+const Code = ({ className, children }: { className: string; children: React.ReactNode }) => {
+    return <code className={className}>{children}</code>;
 };
 
 type CodeBlockProps = {
@@ -235,7 +237,26 @@ const Markdown = ({ text, textAtom, showTocAtom, style, className, resolveOpts,
             >
                 <ReactMarkdown
                     remarkPlugins={[remarkGfm, [RemarkFlexibleToc, { tocRef: tocRef.current }]]}
-                    rehypePlugins={[rehypeRaw, () => rehypeSlug({ prefix: idPrefix })]}
+                    rehypePlugins={[
+                        rehypeRaw,
+                        () => rehypeSlug({ prefix: idPrefix }),
+                        rehypeHighlight,
+                        () =>
+                            rehypeSanitize({
+                                ...defaultSchema,
+                                attributes: {
+                                    ...defaultSchema.attributes,
+                                    span: [
+                                        ...(defaultSchema.attributes?.span || []),
+                                        // Allow all class names starting with `hljs-`.
+                                        ["className", /^hljs-./],
+                                        // Alternatively, to allow only certain class names:
+                                        // ['className', 'hljs-number', 'hljs-title', 'hljs-variable']
+                                    ],
+                                },
+                                tagNames: [...(defaultSchema.tagNames || []), "span"],
+                            }),
+                    ]}
                     components={markdownComponents}
                 >
                     {text}

frontend/app/theme.less

@@ -1,6 +1,9 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+// Used for syntax highlighting in markdown
+@import url("../../node_modules/highlight.js/styles/github-dark-dimmed.min.css");
+
 :root {
     --main-text-color: #f7f7f7;
     --title-font-size: 18px;