chore: version 2.8.2 (#159)

* fix: 修复普通文本代码渲染和深色模式下的问题[#139][#154]

* chore: version 2.8.2

.vscode/settings.json

@@ -29,6 +29,7 @@
  "dockerhub",
  "esno",
  "GPTAPI",
+ "hljs",
  "iconify",
  "logprobs",
  "nodata",

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`

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:

package.json

@@ -1,6 +1,6 @@
 {
  "name": "chatgpt-web",
- "version": "2.8.1",
+ "version": "2.8.2",
  "private": false,
  "description": "ChatGPT Web",
  "author": "ChenZhaoYu <[email protected]>",

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'
 

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
+ }
+}

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 `<pre><code class="hljs ${language}">${highlighted}</code></pre>`
+ if (validLang)
+ return `<pre><code class="hljs ${language}">${hljs.highlight(language, code).value}</code></pre>`
+ return `<pre style="background: none">${hljs.highlightAuto(code).value}</pre>`
 }
 
-marked.setOptions({ renderer })
+marked.setOptions({
+ renderer,
+ highlight(code) {
+ return hljs.highlightAuto(code).value
+ },
+})
 
 const wrapClass = computed(() => {
  return [

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;
  }
 }