github-markdown

frontend/package-lock.json

@@ -15,6 +15,7 @@
 				"dayjs": "^1.11.13",
 				"dompurify": "^3.2.6",
 				"flowbite": "^3.1.2",
+				"github-markdown-css": "^5.8.1",
 				"marked": "^15.0.12",
 				"openapi-fetch": "^0.13.5",
 				"pinia": "^3.0.1",
@@ -3744,6 +3745,18 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/github-markdown-css": {
+			"version": "5.8.1",
+			"resolved": "http://mirrors.tencent.com/npm/github-markdown-css/-/github-markdown-css-5.8.1.tgz",
+			"integrity": "sha512-8G+PFvqigBQSWLQjyzgpa2ThD9bo7+kDsriUIidGcRhXgmcaAWUIpCZf8DavJgc+xifjbCG+GvMyWr0XMXmc7g==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/glob": {
 			"version": "10.4.5",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",

frontend/package.json

@@ -25,6 +25,7 @@
 		"dayjs": "^1.11.13",
 		"dompurify": "^3.2.6",
 		"flowbite": "^3.1.2",
+		"github-markdown-css": "^5.8.1",
 		"marked": "^15.0.12",
 		"openapi-fetch": "^0.13.5",
 		"pinia": "^3.0.1",

frontend/src/views/AiChatView.vue

@@ -11,7 +11,7 @@
             <LoadingIcon :textColor="'text-gray-900'"
               v-if="isLoading && !chatElement.isUser && chatElement.content === ''" />
           </div>
-          <div class="markdown-content text-base font-normal py-2.5 text-gray-900 dark:text-white"
+          <div class="markdown-content markdown-body text-base font-normal py-2.5 text-gray-900 "
             v-html="renderMarkdown(chatElement.content)">
           </div>
         </div>
@@ -152,4 +152,10 @@ onUnmounted(() => {
 });
 </script>
 
+<style lang="css">
+@import "github-markdown-css/github-markdown.css";
 
+.markdown-body {
+  background: transparent !important;
+}
+</style>