From 3ff49656267fa376a37ba063d1ce7079ea035a34 Mon Sep 17 00:00:00 2001
From: Jacky <me@jackyu.cn>
Date: Mon, 14 Oct 2024 10:25:48 +0800
Subject: [PATCH] fix: code highlight in ChatGPT history

---
 app/src/components/ChatGPT/ChatGPT.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/src/components/ChatGPT/ChatGPT.vue b/app/src/components/ChatGPT/ChatGPT.vue
index f96fcba5..30c642fc 100644
--- a/app/src/components/ChatGPT/ChatGPT.vue
+++ b/app/src/components/ChatGPT/ChatGPT.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import nginx from 'highlight.js/lib/languages/nginx'
 import Icon, { SendOutlined } from '@ant-design/icons-vue'
 import { storeToRefs } from 'pinia'
 import { Marked } from 'marked'
@@ -21,10 +22,12 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:history_messages'])
 
+hljs.registerLanguage('nginx', nginx)
+
 const { language: current } = storeToRefs(useSettingsStore())
 
 const history_messages = computed(() => props.historyMessages)
-const messages = ref([]) as Ref<ChatComplicationMessage[] | undefined >
+const messages = ref([]) as Ref<ChatComplicationMessage[] | undefined>
 
 onMounted(() => {
   messages.value = props.historyMessages
@@ -165,7 +168,9 @@ const marked = new Marked(
     highlight(code, lang) {
       const language = hljs.getLanguage(lang) ? lang : 'nginx'
 
-      return hljs.highlight(code, { language }).value
+      const highlightedCode = hljs.highlight(code, { language }).value
+
+      return `<pre><code class="hljs ${language}">${highlightedCode}</code></pre>`
     },
   }))
 
@@ -190,7 +195,9 @@ function clear_record() {
   messages.value = []
   emit('update:history_messages', [])
 }
+
 const editing_idx = ref(-1)
+
 async function regenerate(index: number) {
   editing_idx.value = -1
   messages.value = messages.value?.slice(0, index)