fix: 公式显示问题 #239

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

@@ -226,6 +226,7 @@
       "messages.input.send_shortcuts": "Send shortcuts",
       "messages.input.paste_long_text_as_file": "Paste long text as file",
       "messages.markdown_rendering_input_message": "Markdown render input msg",
+      "messages.math_engine": "Math render engine",
       "general.title": "General Settings",
       "general.user_name": "User Name",
       "general.user_name.placeholder": "Enter your name",

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

@@ -226,6 +226,7 @@
       "messages.input.send_shortcuts": "发送快捷键",
       "messages.input.paste_long_text_as_file": "长文本粘贴为文件",
       "messages.markdown_rendering_input_message": "Markdown 渲染输入消息",
+      "messages.math_engine": "数学公式引擎",
       "general.title": "常规设置",
       "general.user_name": "用户名",
       "general.user_name.placeholder": "请输入用户名",

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

@@ -225,7 +225,8 @@
       "messages.input.show_estimated_tokens": "顯示預估輸入 Token 數",
       "messages.input.send_shortcuts": "發送快捷鍵",
       "messages.input.paste_long_text_as_file": "將長文本貼上為檔案",
-      "messages.markdown_rendering_input_message": "Markdown 渲染輸入訊息",
+      "messages.math_engine": "Markdown 渲染輸入訊息",
+      "messages.math_render_engine": "數學公式引擎",
       "general.title": "一般設定",
       "general.user_name": "使用者名稱",
       "general.user_name.placeholder": "輸入您的名稱",

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

@@ -7,6 +7,7 @@ import { isEmpty } from 'lodash'
 import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import ReactMarkdown, { Components } from 'react-markdown'
+import rehypeKatex from 'rehype-katex'
 // @ts-ignore next-line
 import rehypeMathjax from 'rehype-mathjax'
 import rehypeRaw from 'rehype-raw'
@@ -23,7 +24,9 @@ interface Props {
 
 const Markdown: FC<Props> = ({ message }) => {
   const { t } = useTranslation()
-  const { renderInputMessageAsMarkdown } = useSettings()
+  const { renderInputMessageAsMarkdown, mathEngine } = useSettings()
+
+  const rehypeMath = mathEngine === 'KaTeX' ? rehypeKatex : rehypeMathjax
 
   const messageContent = useMemo(() => {
     const empty = isEmpty(message.content)
@@ -34,8 +37,8 @@ const Markdown: FC<Props> = ({ message }) => {
 
   const rehypePlugins = useMemo(() => {
     const hasUnsafeElements = /<(input|textarea|select)/i.test(messageContent)
-    return hasUnsafeElements ? [rehypeMathjax] : [rehypeRaw, rehypeMathjax]
-  }, [messageContent])
+    return hasUnsafeElements ? [rehypeMath] : [rehypeRaw, rehypeMath]
+  }, [messageContent, rehypeMath])
 
   if (message.role === 'user' && !renderInputMessageAsMarkdown) {
     return <p style={{ marginBottom: 5, whiteSpace: 'pre-wrap' }}>{messageContent}</p>

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

@@ -9,6 +9,7 @@ import { useAppDispatch } from '@renderer/store'
 import {
   setCodeShowLineNumbers,
   setFontSize,
+  setMathEngine,
   setMessageFont,
   setPasteLongTextAsFile,
   setRenderInputMessageAsMarkdown,
@@ -46,7 +47,8 @@ const SettingsTab: FC<Props> = (props) => {
     setSendMessageShortcut,
     pasteLongTextAsFile,
     renderInputMessageAsMarkdown,
-    codeShowLineNumbers
+    codeShowLineNumbers,
+    mathEngine
   } = useSettings()
 
   const onUpdateAssistantSettings = (settings: Partial<AssistantSettings>) => {
@@ -213,6 +215,18 @@ const SettingsTab: FC<Props> = (props) => {
           />
         </SettingRow>
         <SettingDivider />
+        <SettingRow>
+          <SettingRowTitleSmall>{t('settings.messages.math_engine')}</SettingRowTitleSmall>
+          <Select
+            value={mathEngine}
+            onChange={(value) => dispatch(setMathEngine(value))}
+            style={{ width: 100 }}
+            size="small">
+            <Select.Option value="KaTeX">KaTeX</Select.Option>
+            <Select.Option value="MathJax">MathJax</Select.Option>
+          </Select>
+        </SettingRow>
+        <SettingDivider />
         <SettingRow>
           <SettingRowTitleSmall>{t('settings.font_size.title')}</SettingRowTitleSmall>
         </SettingRow>
@@ -264,17 +278,18 @@ const SettingsTab: FC<Props> = (props) => {
         <SettingDivider />
         <SettingRow>
           <SettingRowTitleSmall>{t('settings.messages.input.send_shortcuts')}</SettingRowTitleSmall>
+          <Select
+            size="small"
+            value={sendMessageShortcut}
+            menuItemSelectedIcon={<CheckOutlined />}
+            options={[
+              { value: 'Enter', label: 'Enter' },
+              { value: 'Shift+Enter', label: `Shift + Enter` }
+            ]}
+            onChange={(value) => setSendMessageShortcut(value)}
+            style={{ width: 100 }}
+          />
         </SettingRow>
-        <Select
-          value={sendMessageShortcut}
-          menuItemSelectedIcon={<CheckOutlined />}
-          options={[
-            { value: 'Enter', label: `Enter ${t('chat.input.send')}` },
-            { value: 'Shift+Enter', label: `Shift + Enter ${t('chat.input.send')}` }
-          ]}
-          onChange={(value) => setSendMessageShortcut(value)}
-          style={{ width: '100%', marginTop: 10 }}
-        />
       </Container>
     </Scrollbar>
   )
@@ -286,6 +301,7 @@ const Container = styled.div`
   flex-direction: column;
   padding-bottom: 10px;
   padding: 10px 15px;
+  margin-bottom: 10px;
 `
 
 const Label = styled.p`

src/renderer/src/store/index.ts

@@ -22,7 +22,7 @@ const persistedReducer = persistReducer(
   {
     key: 'cherry-studio',
     storage,
-    version: 34,
+    version: 35,
     blacklist: ['runtime'],
     migrate
   },

src/renderer/src/store/migrate.ts

@@ -610,6 +610,10 @@ const migrateConfig = {
       })
     })
     return state
+  },
+  '35': (state: RootState) => {
+    state.settings.mathEngine = 'KaTeX'
+    return state
   }
 }
 

src/renderer/src/store/settings.ts

@@ -23,6 +23,7 @@ export interface SettingsState {
   manualUpdateCheck: boolean
   renderInputMessageAsMarkdown: boolean
   codeShowLineNumbers: boolean
+  mathEngine: 'MathJax' | 'KaTeX'
   // webdav 配置 host, user, pass, path
   webdavHost: string
   webdavUser: string
@@ -50,6 +51,7 @@ const initialState: SettingsState = {
   manualUpdateCheck: false,
   renderInputMessageAsMarkdown: true,
   codeShowLineNumbers: false,
+  mathEngine: 'MathJax',
   webdavHost: '',
   webdavUser: '',
   webdavPass: '',
@@ -135,6 +137,9 @@ const settingsSlice = createSlice({
     },
     setCodeShowLineNumbers: (state, action: PayloadAction<boolean>) => {
       state.codeShowLineNumbers = action.payload
+    },
+    setMathEngine: (state, action: PayloadAction<'MathJax' | 'KaTeX'>) => {
+      state.mathEngine = action.payload
     }
   }
 })
@@ -164,7 +169,8 @@ export const {
   setWebdavUser,
   setWebdavPass,
   setWebdavPath,
-  setCodeShowLineNumbers
+  setCodeShowLineNumbers,
+  setMathEngine
 } = settingsSlice.actions
 
 export default settingsSlice.reducer