Merge pull request #25 from devchat-ai/fix216

Add PrismJS for code highlighting

Author: small-stone

package.json

@@ -136,6 +136,7 @@
     "node-fetch": "^3.3.1",
     "nonce": "^1.0.4",
     "prism-react-renderer": "^2.3.1",
+    "prismjs": "^1.29.0",
     "quote": "^0.4.0",
     "react-i18next": "^13.5.0",
     "react-markdown": "^8.0.7",

src/views/components/MessageMarkdown/index.tsx

@@ -2,7 +2,7 @@ import { Button, Anchor, Stack, Group, Box, createStyles } from "@mantine/core";
 import React, { useEffect, useMemo, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
-import { Highlight, themes } from "prism-react-renderer";
+import { Highlight, themes, Prism } from "prism-react-renderer";
 import CodeButtons from "./CodeButtons";
 import Step from "./Step";
 import LanguageCorner from "./LanguageCorner";
@@ -14,7 +14,10 @@ import { fromMarkdown } from "mdast-util-from-markdown";
 import { visit } from "unist-util-visit";
 import ChatMark from "@/views/components/ChatMark";
 import { useSetState } from "@mantine/hooks";
-import { Trans, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
+
+(typeof global !== "undefined" ? global : window).Prism = Prism;
+require("prismjs/components/prism-java");
 
 const useStyles = createStyles((theme) => ({
   link: {
@@ -228,7 +231,7 @@ Generate a professionally written and formatted release note in markdown with th
             "Devchat key is missing from your environment or settings"
           )
         ) {
-          if(process.env.platform === "vscode") {
+          if (process.env.platform === "vscode") {
             return t("devchat.setkey_vscode");
           }
           return t("devchat.setkey");
@@ -307,6 +310,7 @@ Generate a professionally written and formatted release note in markdown with th
           const match = /language-(\w+)/.exec(className || "");
           const value = String(children).replace(/\n$/, "");
           let lanugage = match && match[1];
+
           if (!lanugage) {
             lanugage = "plaintext";
           }

yarn.lock

@@ -6892,7 +6892,7 @@ prism-react-renderer@^2.3.1:
     "@types/prismjs" "^1.26.0"
     clsx "^2.0.0"
 
-prismjs@^1.27.0:
+prismjs@^1.27.0, prismjs@^1.29.0:
   version "1.29.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
   integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==