reactmarkdown + tailwindcss + sugar-high + math

global.css

@layer base {
  :root {
    /* Sugar-high theme */

    --sh-class: #4d9ef6;
    /* Brighter blue for class */
    --sh-identifier: #6caedd;
    /* Lighter blue for identifiers */
    --sh-sign: #cdd3de;
    /* Lighter gray to ensure signs are visible */
    --sh-property: #3182ce;
    /* Brighter blue for properties */
    --sh-entity: #2db1bc;
    /* Lighter teal for entities */
    --sh-jsxliterals: #939dfd;
    /* Lighter purple for JSX literals */
    --sh-string: #26dabd;
    /* Lighter teal for strings */
    --sh-keyword: #ff6b6b;
    /* Brighter red for keywords */
    --sh-comment: #cbc3c3;
    /* Lighter gray for comments */

    }

}

markdown.tsx

import { memo } from "react";
import ReactMarkdown from "react-markdown";
import { highlight } from "sugar-high";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
import "katex/dist/katex.min.css";

import { cn } from "@/lib/utils";

function Markdown({ children }: { readonly children: string }) {
  return (
    <div
      className={cn(
        "prose prose-sm dark:prose-invert",
        "prose-h1:text-2xl prose-h1:font-bold",
        "prose-p:text-base prose-strong:font-semibold",
        "prose-ul:list-disc prose-ul:pl-4",
        "prose-ol:list-decimal prose-ol:pl-4"
      )}
    >
      <ReactMarkdown
        remarkPlugins={[[remarkGfm, { singleTilde: false }], remarkMath]}
        rehypePlugins={[rehypeKatex]}
        components={{
          code({ children: codeChildren, ...props }) {
            try {
              return (
                <code
                  dangerouslySetInnerHTML={{
                    __html: highlight(codeChildren as string),
                  }}
                />
              );
            } catch (error) {
              return <code {...props}>{codeChildren}</code>;
            }
          },
        }}
      >
        {children}
      </ReactMarkdown>
    </div>
  );
}

export default memo(Markdown);