feat: add show line number in code

src/renderer/src/assets/styles/markdown.scss

@@ -99,7 +99,6 @@
   }
 
   code {
-    white-space: pre-wrap !important;
     font-family: 'Courier New', Courier, monospace;
   }
 
@@ -111,7 +110,6 @@
   }
 
   pre {
-    white-space: pre-wrap !important;
     border-radius: 5px;
     overflow-x: auto;
     font-family: 'Fira Code', 'Courier New', Courier, monospace;

src/renderer/src/i18n/en-us.json

@@ -103,6 +103,7 @@
       "settings.reset": "Reset",
       "settings.set_as_default": "Apply to default assistant",
       "settings.max": "Max",
+      "settings.show_line_numbers": "Show Line Numbers in Code",
       "suggestions.title": "Suggested Questions",
       "add.assistant.title": "Add Assistant",
       "message.new.context": "New Context",

src/renderer/src/i18n/zh-cn.json

@@ -103,6 +103,7 @@
       "settings.reset": "重置",
       "settings.set_as_default": "应用到默认助手",
       "settings.max": "不限",
+      "settings.show_line_numbers": "代码显示行号",
       "suggestions.title": "建议的问题",
       "add.assistant.title": "添加助手",
       "message.new.context": "清除上下文",

src/renderer/src/i18n/zh-tw.json

@@ -103,6 +103,7 @@
       "settings.reset": "重置",
       "settings.set_as_default": "設為預設助手",
       "settings.max": "最大",
+      "settings.show_line_numbers": "代码顯示行號",
       "suggestions.title": "建議的問題",
       "add.assistant.title": "添加助手",
       "message.new.context": "新上下文",

src/renderer/src/pages/home/Markdown/CodeBlock.tsx

@@ -1,6 +1,7 @@
 import { CheckOutlined } from '@ant-design/icons'
 import CopyIcon from '@renderer/components/Icons/CopyIcon'
 import { useTheme } from '@renderer/context/ThemeProvider'
+import { useSettings } from '@renderer/hooks/useSettings'
 import { initMermaid } from '@renderer/init'
 import { ThemeMode } from '@renderer/types'
 import React, { memo, useState } from 'react'
@@ -21,6 +22,7 @@ interface CodeBlockProps {
 const CodeBlock: React.FC<CodeBlockProps> = ({ children, className }) => {
   const match = /language-(\w+)/.exec(className || '')
   const showFooterCopyButton = children && children.length > 500
+  const { codeShowLineNumbers } = useSettings()
   const { theme } = useTheme()
   const language = match?.[1]
 
@@ -38,7 +40,8 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className }) => {
       <SyntaxHighlighter
         language={match[1]}
         style={theme === ThemeMode.dark ? atomDark : oneLight}
-        wrapLongLines={true}
+        wrapLongLines={false}
+        showLineNumbers={codeShowLineNumbers}
         customStyle={{
           border: '0.5px solid var(--color-code-background)',
           borderTopLeftRadius: 0,

src/renderer/src/pages/home/Tabs/Settings.tsx

@@ -6,6 +6,7 @@ import { useSettings } from '@renderer/hooks/useSettings'
 import { SettingDivider, SettingRow, SettingRowTitle, SettingSubtitle } from '@renderer/pages/settings'
 import { useAppDispatch } from '@renderer/store'
 import {
+  setCodeShowLineNumbers,
   setFontSize,
   setMessageFont,
   setPasteLongTextAsFile,
@@ -43,7 +44,8 @@ const SettingsTab: FC<Props> = (props) => {
     sendMessageShortcut,
     setSendMessageShortcut,
     pasteLongTextAsFile,
-    renderInputMessageAsMarkdown
+    renderInputMessageAsMarkdown,
+    codeShowLineNumbers
   } = useSettings()
 
   const onUpdateAssistantSettings = (settings: Partial<AssistantSettings>) => {
@@ -204,6 +206,15 @@ const SettingsTab: FC<Props> = (props) => {
         />
       </SettingRow>
       <SettingDivider />
+      <SettingRow>
+        <SettingRowTitleSmall>{t('chat.settings.show_line_numbers')}</SettingRowTitleSmall>
+        <Switch
+          size="small"
+          checked={codeShowLineNumbers}
+          onChange={(checked) => dispatch(setCodeShowLineNumbers(checked))}
+        />
+      </SettingRow>
+      <SettingDivider />
       <SettingRow>
         <SettingRowTitleSmall>{t('settings.font_size.title')}</SettingRowTitleSmall>
       </SettingRow>
@@ -274,7 +285,6 @@ const Container = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
-  overflow: hidden;
   padding-bottom: 10px;
   padding: 10px 15px;
 `

src/renderer/src/store/settings.ts

@@ -21,6 +21,7 @@ export interface SettingsState {
   clickAssistantToShowTopic: boolean
   manualUpdateCheck: boolean
   renderInputMessageAsMarkdown: boolean
+  codeShowLineNumbers: boolean
   // webdav 配置 host, user, pass, path
   webdavHost: string
   webdavUser: string
@@ -46,6 +47,7 @@ const initialState: SettingsState = {
   clickAssistantToShowTopic: false,
   manualUpdateCheck: false,
   renderInputMessageAsMarkdown: true,
+  codeShowLineNumbers: false,
   webdavHost: '',
   webdavUser: '',
   webdavPass: '',
@@ -125,6 +127,9 @@ const settingsSlice = createSlice({
     },
     setRenderInputMessageAsMarkdown: (state, action: PayloadAction<boolean>) => {
       state.renderInputMessageAsMarkdown = action.payload
+    },
+    setCodeShowLineNumbers: (state, action: PayloadAction<boolean>) => {
+      state.codeShowLineNumbers = action.payload
     }
   }
 })
@@ -152,7 +157,8 @@ export const {
   setWebdavHost,
   setWebdavUser,
   setWebdavPass,
-  setWebdavPath
+  setWebdavPath,
+  setCodeShowLineNumbers
 } = settingsSlice.actions
 
 export default settingsSlice.reducer