From 94e23bb9162e0540b2736040ffb8f619fac7a567 Mon Sep 17 00:00:00 2001 From: Redon <790348264@qq.com> Date: Tue, 28 Feb 2023 10:00:53 +0800 Subject: [PATCH] chore: version 2.8.2 (#159) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 修复普通文本代码渲染和深色模式下的问题[#139][#154] * chore: version 2.8.2 --- .vscode/settings.json | 1 + CHANGELOG.md | 8 + README.md | 2 +- package.json | 2 +- src/plugins/assets.ts | 2 +- src/styles/lib/highlight.less | 203 +++++++++++++++++++ src/views/chat/components/Message/Text.vue | 12 +- src/views/chat/components/Message/style.less | 17 +- 8 files changed, 234 insertions(+), 13 deletions(-) create mode 100644 src/styles/lib/highlight.less diff --git a/.vscode/settings.json b/.vscode/settings.json index 5d48163..2cc6c11 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -29,6 +29,7 @@ "dockerhub", "esno", "GPTAPI", + "hljs", "iconify", "logprobs", "nodata", diff --git a/CHANGELOG.md b/CHANGELOG.md index f4593fe..d927140 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +## v2.8.2 + +`2023-02-28` +### Enhancement +- 代码主题调整为 `One Dark - light|dark` 适配深色模式 +### BugFix +- 修复普通文本代码渲染和深色模式下的问题[#139][#154] + ## v2.8.1 `2023-02-27` diff --git a/README.md b/README.md index 625c661..b1a1618 100644 --- a/README.md +++ b/README.md @@ -174,7 +174,7 @@ version: '3' services: app: - image: chenzhaoyu94/chatgpt-web # 总是使用latest,更新时重新pull该tag镜像即可 + image: chenzhaoyu94/chatgpt-web # 总是使用latest,更新时重新pull该tag镜像即可 ports: - 3002:3002 environment: diff --git a/package.json b/package.json index 5a21ff8..b9660f1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "chatgpt-web", - "version": "2.8.1", + "version": "2.8.2", "private": false, "description": "ChatGPT Web", "author": "ChenZhaoYu ", diff --git a/src/plugins/assets.ts b/src/plugins/assets.ts index 6c9a15b..27054cb 100644 --- a/src/plugins/assets.ts +++ b/src/plugins/assets.ts @@ -1,5 +1,5 @@ -import 'highlight.js/styles/xcode.css' import '@/styles/lib/tailwind.css' +import '@/styles/lib/highlight.less' import '@/styles/lib/github-markdown.less' import '@/styles/global.less' diff --git a/src/styles/lib/highlight.less b/src/styles/lib/highlight.less new file mode 100644 index 0000000..e3a72c3 --- /dev/null +++ b/src/styles/lib/highlight.less @@ -0,0 +1,203 @@ +html.dark { + pre code.hljs { + display: block; + overflow-x: auto; + padding: 1em + } + + code.hljs { + padding: 3px 5px + } + + .hljs { + color: #abb2bf; + background: #282c34 + } + + .hljs-keyword, + .hljs-operator, + .hljs-pattern-match { + color: #f92672 + } + + .hljs-function, + .hljs-pattern-match .hljs-constructor { + color: #61aeee + } + + .hljs-function .hljs-params { + color: #a6e22e + } + + .hljs-function .hljs-params .hljs-typing { + color: #fd971f + } + + .hljs-module-access .hljs-module { + color: #7e57c2 + } + + .hljs-constructor { + color: #e2b93d + } + + .hljs-constructor .hljs-string { + color: #9ccc65 + } + + .hljs-comment, + .hljs-quote { + color: #b18eb1; + font-style: italic + } + + .hljs-doctag, + .hljs-formula { + color: #c678dd + } + + .hljs-deletion, + .hljs-name, + .hljs-section, + .hljs-selector-tag, + .hljs-subst { + color: #e06c75 + } + + .hljs-literal { + color: #56b6c2 + } + + .hljs-addition, + .hljs-attribute, + .hljs-meta .hljs-string, + .hljs-regexp, + .hljs-string { + color: #98c379 + } + + .hljs-built_in, + .hljs-class .hljs-title, + .hljs-title.class_ { + color: #e6c07b + } + + .hljs-attr, + .hljs-number, + .hljs-selector-attr, + .hljs-selector-class, + .hljs-selector-pseudo, + .hljs-template-variable, + .hljs-type, + .hljs-variable { + color: #d19a66 + } + + .hljs-bullet, + .hljs-link, + .hljs-meta, + .hljs-selector-id, + .hljs-symbol, + .hljs-title { + color: #61aeee + } + + .hljs-emphasis { + font-style: italic + } + + .hljs-strong { + font-weight: 700 + } + + .hljs-link { + text-decoration: underline + } +} + +html { + pre code.hljs { + display: block; + overflow-x: auto; + padding: 1em + } + + code.hljs { + padding: 3px 5px + } + + .hljs { + color: #383a42; + background: #fafafa + } + + .hljs-comment, + .hljs-quote { + color: #a0a1a7; + font-style: italic + } + + .hljs-doctag, + .hljs-formula, + .hljs-keyword { + color: #a626a4 + } + + .hljs-deletion, + .hljs-name, + .hljs-section, + .hljs-selector-tag, + .hljs-subst { + color: #e45649 + } + + .hljs-literal { + color: #0184bb + } + + .hljs-addition, + .hljs-attribute, + .hljs-meta .hljs-string, + .hljs-regexp, + .hljs-string { + color: #50a14f + } + + .hljs-attr, + .hljs-number, + .hljs-selector-attr, + .hljs-selector-class, + .hljs-selector-pseudo, + .hljs-template-variable, + .hljs-type, + .hljs-variable { + color: #986801 + } + + .hljs-bullet, + .hljs-link, + .hljs-meta, + .hljs-selector-id, + .hljs-symbol, + .hljs-title { + color: #4078f2 + } + + .hljs-built_in, + .hljs-class .hljs-title, + .hljs-title.class_ { + color: #c18401 + } + + .hljs-emphasis { + font-style: italic + } + + .hljs-strong { + font-weight: 700 + } + + .hljs-link { + text-decoration: underline + } +} diff --git a/src/views/chat/components/Message/Text.vue b/src/views/chat/components/Message/Text.vue index 0c092bf..247a5ce 100644 --- a/src/views/chat/components/Message/Text.vue +++ b/src/views/chat/components/Message/Text.vue @@ -24,11 +24,17 @@ renderer.html = (html) => { renderer.code = (code, language) => { const validLang = !!(language && hljs.getLanguage(language)) - const highlighted = validLang ? hljs.highlight(language, code).value : code - return `
${highlighted}
` + if (validLang) + return `
${hljs.highlight(language, code).value}
` + return `
${hljs.highlightAuto(code).value}
` } -marked.setOptions({ renderer }) +marked.setOptions({ + renderer, + highlight(code) { + return hljs.highlightAuto(code).value + }, +}) const wrapClass = computed(() => { return [ diff --git a/src/views/chat/components/Message/style.less b/src/views/chat/components/Message/style.less index c230ec4..a7850be 100644 --- a/src/views/chat/components/Message/style.less +++ b/src/views/chat/components/Message/style.less @@ -2,7 +2,7 @@ background-color: transparent; font-size: 14px; - p{ + p { white-space: pre-wrap; } @@ -23,13 +23,16 @@ pre { background-color: #fff; } + + code.hljs{ + padding: 0; + } } -.dark{ - .markdown-body{ - .highlight pre, - pre { - background-color: #18181c; - } +html.dark { + + .highlight pre, + pre { + background-color: #282c34; } }