Synaptrix · ayangweb · Apr 4, 2023 · Apr 4, 2023
diff --git a/index.html b/index.html
@@ -1,16 +1,14 @@
 <!DOCTYPE html>
 <html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ChatGPT-Desktop</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>ChatGPT-Desktop</title>
-</head>
-
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
-</body>
-
-</html>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -27,10 +27,9 @@
     "clipboard": "^2.0.11",
     "dayjs": "^1.11.7",
     "gpt3-tokenizer": "^1.1.5",
-    "highlight.js": "^11.7.0",
     "html2canvas": "^1.4.1",
     "markdown-it": "^13.0.1",
-    "markdown-it-highlightjs": "^4.0.1",
+    "markdown-it-prism": "^2.3.0",
     "nanoid": "^4.0.2",
     "pinia": "^2.0.33",
     "pinia-plugin-persistedstate": "^3.1.0",
@@ -73,4 +72,4 @@
     "vite-plugin-top-level-await": "^1.3.0",
     "vue-tsc": "^1.0.11"
   }
-}
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/assets/css/code.scss b/src/assets/css/code.scss
@@ -0,0 +1,2 @@
+
+pre[class*='language-'],code[class*='language-']{text-align: left;white-space: pre;word-spacing: normal;word-break: normal;tab-size: 2;hyphens: none;color: #e5c07b;background: #272b33;text-shadow: 0 1px rgba(0, 0, 0, 0.3);line-height: 1.5;direction: ltr}code[class*='language-'] ::-moz-selection,code[class*='language-']::-moz-selection,pre[class*='language-'] ::-moz-selection{color: inherit;background: #3e4450;text-shadow: none}code[class*='language-'] ::selection,code[class*='language-']::selection,pre[class*='language-'] ::selection{color: inherit;background: #3e4450;text-shadow: none}pre[class*='language-']{overflow: auto;margin: 0.5em 0;padding: 1em;border-radius: 0.3em}:not(pre) > code[class*='language-']{padding: 0.2em 0.3em;white-space: normal;border-radius: 0.3em}@media print{code[class*='language-'],pre[class*='language-']{text-shadow: none}}.token.cdata,.token.comment,.token.prolog{color: #5b6270}.token.doctype,.token.entity,.token.punctuation{color: #aab1bf}.token.atrule,.token.attr-name,.token.boolean,.token.class-name,.token.constant,.token.number{color: #d19965}.token.keyword{color: #c578dd}.token.deleted,.token.important,.token.property,.token.symbol,.token.tag{color: #df6b75}.token.attr-value,.token.attr-value > .token.punctuation,.token.builtin,.token.char,.token.inserted,.token.regex,.token.selector,.token.string{color: #97c279}.token.function,.token.operator,.token.variable{color: #61afef}.token.url{color: #56b5c2}.token.attr-value > .token.punctuation.attr-equals,.token.special-attr > .token.attr-value > .token.value.css{color: #aab1bf}.language-css .token.selector{color: #df6b75}.language-css .token.property{color: #aab1bf}.language-css .token.function,.language-css .token.url > .token.function{color: #56b5c2}.language-css .token.url > .token.string.url{color: #97c279}.language-css .token.atrule .token.rule,.language-css .token.important{color: #c578dd}.language-javascript .token.operator{color: #c578dd}.language-javascript.token.template-string> .token.interpolation> .token.interpolation-punctuation.punctuation{color: #be5046}.language-json .token.operator{color: #aab1bf}.language-json .token.null.keyword{color: #d19965}.language-markdown .token.url,.language-markdown .token.url-reference.url > .token.string,.language-markdown .token.url > .token.operator{color: #aab1bf}.language-markdown .token.url > .token.content{color: #61afef}.language-markdown .token.url-reference.url,.language-markdown .token.url > .token.url{color: #56b5c2}.language-markdown .token.blockquote.punctuation,.language-markdown .token.hr.punctuation{color: #5b6270;font-style: italic}.language-markdown .token.code-snippet{color: #97c279}.language-markdown .token.bold .token.content{color: #d19965}.language-markdown .token.italic .token.content{color: #c578dd}.language-markdown .token.list.punctuation,.language-markdown .token.strike .token.content,.language-markdown .token.strike .token.punctuation,.language-markdown .token.title.important > .token.punctuation{color: #df6b75}.token.bold{font-weight: 700}.token.comment,.token.italic{font-style: italic}.token.entity{cursor: help}.token.namespace{opacity: 0.8}.token.token.cr:before,.token.token.lf:before,.token.token.space:before,.token.token.tab:not(:empty):before{color: hsla(220, 14%, 71%, 0.15);text-shadow: none}div.code-toolbar > .toolbar.toolbar > .toolbar-item{margin-right: 0.4em}div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,div.code-toolbar > .toolbar.toolbar > .toolbar-item > button,div.code-toolbar > .toolbar.toolbar > .toolbar-item > span{padding: 0.1em 0.4em;color: #818896;border-radius: 0.3em;background: #393f4a}div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus,div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus,div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover{color: #aab1bf;background: #3e4450}.line-highlight.line-highlight{background: hsla(220, 100%, 80%, 0.04)}.line-highlight.line-highlight:before,.line-highlight.line-highlight[data-end]:after{padding: 0.1em 0.6em;color: #aab1bf;border-radius: 0.3em;background: #393f4a;box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2)}pre[id].linkable-line-numbers.linkable-line-numbersspan.line-numbers-rows> span:hover:before{background-color: hsla(220, 100%, 80%, 0.04)}.command-line .command-line-prompt,.line-numbers.line-numbers .line-numbers-rows{border-right-color: hsla(220, 14%, 71%, 0.15)}.command-line .command-line-prompt > span:before,.line-numbers .line-numbers-rows > span:before{color: #626d82}.rainbow-braces .token.token.punctuation.brace-level-1,.rainbow-braces .token.token.punctuation.brace-level-5,.rainbow-braces .token.token.punctuation.brace-level-9{color: #df6b75}.rainbow-braces .token.token.punctuation.brace-level-10,.rainbow-braces .token.token.punctuation.brace-level-2,.rainbow-braces .token.token.punctuation.brace-level-6{color: #97c279}.rainbow-braces .token.token.punctuation.brace-level-11,.rainbow-braces .token.token.punctuation.brace-level-3,.rainbow-braces .token.token.punctuation.brace-level-7{color: #61afef}.rainbow-braces .token.token.punctuation.brace-level-12,.rainbow-braces .token.token.punctuation.brace-level-4,.rainbow-braces .token.token.punctuation.brace-level-8{color: #c578dd}pre.diff-highlight > code .token.token.deleted:not(.prefix),pre > code.diff-highlight .token.token.deleted:not(.prefix){background-color: hsla(353, 100%, 66%, 0.15)}pre.diff-highlight > code .token.token.deleted:not(.prefix) ::-moz-selection,pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,pre > code.diff-highlight .token.token.deleted:not(.prefix) ::-moz-selection,pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection{background-color: hsla(353, 95%, 66%, 0.25)}pre.diff-highlight > code .token.token.deleted:not(.prefix) ::selection,pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,pre > code.diff-highlight .token.token.deleted:not(.prefix) ::selection,pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection{background-color: hsla(353, 95%, 66%, 0.25)}pre.diff-highlight > code .token.token.inserted:not(.prefix),pre > code.diff-highlight .token.token.inserted:not(.prefix){background-color: hsla(137, 100%, 55%, 0.15)}pre.diff-highlight > code .token.token.inserted:not(.prefix) ::-moz-selection,pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,pre > code.diff-highlight .token.token.inserted:not(.prefix) ::-moz-selection,pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection{background-color: hsla(135, 73%, 55%, 0.25)}pre.diff-highlight > code .token.token.inserted:not(.prefix) ::selection,pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,pre > code.diff-highlight .token.token.inserted:not(.prefix) ::selection,pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection{background-color: hsla(135, 73%, 55%, 0.25)}.prism-previewer-gradient.prism-previewer-gradient div,.prism-previewer.prism-previewer:before{border-color: #252830}.prism-previewer-color.prism-previewer-color:before,.prism-previewer-easing.prism-previewer-easing:before,.prism-previewer-gradient.prism-previewer-gradient div{border-radius: 0.3em}.prism-previewer.prism-previewer:after{border-top-color: #252830}.prism-previewer-flipped.prism-previewer-flipped.after{border-bottom-color: #252830}.prism-previewer-angle.prism-previewer-angle:before,.prism-previewer-easing.prism-previewer-easing,.prism-previewer-time.prism-previewer-time:before{background: #30353f}.prism-previewer-angle.prism-previewer-angle circle,.prism-previewer-time.prism-previewer-time circle{stroke: #aab1bf;stroke-opacity: 1}.prism-previewer-easing.prism-previewer-easing circle,.prism-previewer-easing.prism-previewer-easing line,.prism-previewer-easing.prism-previewer-easing path{stroke: #aab1bf}.prism-previewer-easing.prism-previewer-easing circle{fill: transparent}
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
@@ -1,5 +1,6 @@
 @import './reset.scss';
 @import './theme.scss';
+@import './code.scss';
 
 * {
   &::-webkit-scrollbar {

diff --git a/src/components/Session/components/SessionContent.vue b/src/components/Session/components/SessionContent.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import MarkdownIt from 'markdown-it'
-import MarkdownItHighlight from 'markdown-it-highlightjs'
+import MarkdownItPrism from 'markdown-it-prism'
 import { emit } from '@tauri-apps/api/event'
 import type { SessionData } from '@/types'
 
@@ -31,7 +31,9 @@ const imageSpan = computed(() => {
 const marked = new MarkdownIt({
   linkify: true
 })
-  .use(MarkdownItHighlight)
+  .use(MarkdownItPrism, {
+    defaultLanguage: 'html'
+  })
   .use(copyCode)
 
 const position = computed(() => (props.data.is_ask ? 'left' : 'right'))

diff --git a/src/main.ts b/src/main.ts
@@ -2,7 +2,6 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import App from './App.vue'
 import '@arco-design/web-vue/es/message/style/css.js'
 import 'uno.css'
-import 'highlight.js/styles/github-dark-dimmed.css'
 import './assets/css/global.scss'
 
 const app = createApp(App)