feat(playground): enhance code compilation feedback and add syntax highlighting for output messages

src/actions/docker/compile.ts

@@ -23,7 +23,10 @@ export async function runCode(code: string, language: string) {
         Cmd: [
           "sh",
           "-c",
-          `echo '${code}' > main.c && gcc main.c -o main && ./main`,
+          `export LANG=C.UTF-8 && printf '%s' '${code.replace(
+            /'/g,
+            "'\\''"
+          )}' > main.c && gcc main.c -o main && ./main`,
         ],
         Tty: false,
       });
@@ -39,7 +42,7 @@ export async function runCode(code: string, language: string) {
       const output = await new Promise<string>((resolve, reject) => {
         let output = "";
         stream.on("data", (chunk) => {
-          output += chunk.toString();
+          output += chunk.toString("utf8");
         });
         stream.on("end", () => {
           resolve(output);
@@ -50,13 +53,27 @@ export async function runCode(code: string, language: string) {
       });
 
       console.log("Output:", output);
-      return output;
+
+      // 检查输出中是否有错误信息
+      const isCompilationSuccess = !output.includes("error:");
+
+      return {
+        success: isCompilationSuccess,
+        output: output,
+        message: isCompilationSuccess
+          ? "Compilation successful"
+          : "Compilation failed",
+      };
     } else {
       throw new Error(`Unsupported language: ${language}`);
     }
   } catch (error) {
     console.error("Error running code:", error);
-    throw error;
+    return {
+      success: false,
+      output: error instanceof Error ? error.message : "Unknown error",
+      message: "Compilation failed",
+    };
   } finally {
     if (container) {
       try {

src/app/playground/page.tsx

@@ -11,6 +11,7 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { COriginal, CplusplusOriginal, JavaOriginal } from "devicons-react";
 import { connectToLanguageServer, LSP_SUPPORTED_LANGUAGES } from "@/lib/lsp";
+import { codeToHtml } from "shiki";
 
 const files: {
   [key: string]: { name: string; language: string; value: string };
@@ -48,6 +49,7 @@ loader.config({ monaco });
 
 export default function PlaygroundPage() {
   const [language, setLanguage] = useState<string>("c");
+  const [highlightedMessage, setHighlightedMessage] = useState<string>("");
   const file = files[language];
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
   const webSocketRef = useRef<WebSocket | null>(null);
@@ -99,6 +101,29 @@ export default function PlaygroundPage() {
     handleLanguageChange();
   }, [language]);
 
+  const handleSubmit = async () => {
+    const code = editorRef.current?.getValue();
+    if (!code) {
+      console.error("No code to compile");
+      return;
+    }
+
+    const result = await runCode(code, language);
+
+    // 根据编译结果显示不同的信息
+    const statusMessage = result.success
+      ? "Compilation successful"
+      : "Compilation failed";
+    const fullMessage = `${statusMessage}\n\n${result.output}`;
+
+    const highlighted = await codeToHtml(fullMessage, {
+      lang: "log", // 或者根据你的需求选择合适的语言
+      theme: "one-dark-pro",
+    });
+
+    setHighlightedMessage(highlighted);
+  };
+
   return (
     <div className="h-full flex flex-col">
       <div className="flex items-center justify-between">
@@ -151,17 +176,7 @@ export default function PlaygroundPage() {
           </ScrollArea>
         </Tabs>
         <div className="m-3">
-          <Button
-            variant="outline"
-            onClick={async () => {
-              const code = editorRef.current?.getValue();
-              if (!code) {
-                console.error("No code to compile");
-                return;
-              }
-              await runCode(code, language);
-            }}
-          >
+          <Button variant="outline" onClick={handleSubmit}>
             Submit
             <Send
               className="-me-1 ms-2 opacity-60"
@@ -173,8 +188,7 @@ export default function PlaygroundPage() {
         </div>
       </div>
       <div className="flex flex-1 mt-0 m-3 gap-x-1">
-        <div className="w-1/3"></div>
-        <div className="w-1/3">
+        <div className="w-2/3">
           <Editor
             theme="vs-dark"
             path={file.name}
@@ -208,7 +222,9 @@ export default function PlaygroundPage() {
             }}
           />
         </div>
-        <div className="w-1/3"></div>
+        <div className="h-full w-1/3">
+          <div dangerouslySetInnerHTML={{ __html: highlightedMessage }} />
+        </div>
       </div>
     </div>
   );