fix: expand code syntax highlighting options (#307)

* added locale for context-menu * fix: expand code syntax highlighting options * fix: type for theme --------- Co-authored-by: injurka <ikornilov.ext@prosebya.ru~>
2024-11-08 07:59:05 +04:00 · 2024-11-08 07:59:05 +04:00 · 8491141edc
commit 8491141edc
parent 088628f89f
13 changed files with 287 additions and 253 deletions
--- a/package.json
+++ b/package.json
@ -103,7 +103,6 @@
    "react-router": "6",
    "react-router-dom": "6",
    "react-spinners": "^0.14.1",
-    "react-syntax-highlighter": "^15.5.0",
    "redux": "^5.0.1",
    "redux-persist": "^6.0.0",
    "rehype-katex": "^7.0.1",
@ -112,6 +111,7 @@
    "remark-gfm": "^4.0.0",
    "remark-math": "^6.0.0",
    "sass": "^1.77.2",
+    "shiki": "^1.22.2",
    "styled-components": "^6.1.11",
    "tinycolor2": "^1.6.0",
    "typescript": "^5.6.2",
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@ -4,8 +4,8 @@
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="initial-scale=1, width=device-width" />
-  <meta http-equiv="Content-Security-Policy"
-    content="default-src 'self'; connect-src *; script-src 'self' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data: file: *; frame-src * file:" />
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src *; script-src 'self' 'unsafe-eval' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data: file: *; frame-src * file:" />
+  
  <style>
    html,
    body {
@ -37,4 +37,4 @@
  <script type="module" src="/src/main.tsx"></script>
 </body>

-</html>
+</html>
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@ -8,6 +8,7 @@ import { PersistGate } from 'redux-persist/integration/react'
 import Sidebar from './components/app/Sidebar'
 import TopViewContainer from './components/TopView'
 import AntdProvider from './context/AntdProvider'
+import { SyntaxHighlighterProvider } from './context/SyntaxHighlighterProvider'
 import { ThemeProvider } from './context/ThemeProvider'
 import AgentsPage from './pages/agents/AgentsPage'
 import AppsPage from './pages/apps/AppsPage'
@ -23,23 +24,25 @@ function App(): JSX.Element {
    <Provider store={store}>
      <ThemeProvider>
        <AntdProvider>
-          <PersistGate loading={null} persistor={persistor}>
-            <TopViewContainer>
-              <HashRouter>
-                <Sidebar />
-                <Routes>
-                  <Route path="/" element={<HomePage />} />
-                  <Route path="/files" element={<FilesPage />} />
-                  <Route path="/agents" element={<AgentsPage />} />
-                  <Route path="/paintings" element={<PaintingsPage />} />
-                  <Route path="/translate" element={<TranslatePage />} />
-                  <Route path="/apps" element={<AppsPage />} />
-                  <Route path="/messages/*" element={<HistoryPage />} />
-                  <Route path="/settings/*" element={<SettingsPage />} />
-                </Routes>
-              </HashRouter>
-            </TopViewContainer>
-          </PersistGate>
+          <SyntaxHighlighterProvider>
+            <PersistGate loading={null} persistor={persistor}>
+              <TopViewContainer>
+                <HashRouter>
+                  <Sidebar />
+                  <Routes>
+                    <Route path="/" element={<HomePage />} />
+                    <Route path="/files" element={<FilesPage />} />
+                    <Route path="/agents" element={<AgentsPage />} />
+                    <Route path="/paintings" element={<PaintingsPage />} />
+                    <Route path="/translate" element={<TranslatePage />} />
+                    <Route path="/apps" element={<AppsPage />} />
+                    <Route path="/messages/*" element={<HistoryPage />} />
+                    <Route path="/settings/*" element={<SettingsPage />} />
+                  </Routes>
+                </HashRouter>
+              </TopViewContainer>
+            </PersistGate>
+          </SyntaxHighlighterProvider>
        </AntdProvider>
      </ThemeProvider>
    </Provider>
--- a/src/renderer/src/context/SyntaxHighlighterProvider.tsx
+++ b/src/renderer/src/context/SyntaxHighlighterProvider.tsx
@ -0,0 +1,87 @@
+import { useTheme } from '@renderer/context/ThemeProvider'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { CodeStyleVarious, ThemeMode } from '@renderer/types'
+import { loadScript } from '@renderer/utils'
+import React, { createContext, PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react'
+import {
+  BundledLanguage,
+  bundledLanguages,
+  BundledTheme,
+  bundledThemes,
+  createHighlighter,
+  HighlighterGeneric
+} from 'shiki'
+
+interface SyntaxHighlighterContextType {
+  codeToHtml: (code: string, language: string) => string
+}
+
+const SyntaxHighlighterContext = createContext<SyntaxHighlighterContextType | undefined>(undefined)
+
+export const SyntaxHighlighterProvider: React.FC<PropsWithChildren> = ({ children }) => {
+  const { theme } = useTheme()
+  const [highlighter, setHighlighter] = useState<HighlighterGeneric<BundledLanguage, BundledTheme> | null>(null)
+  const { codeStyle } = useSettings()
+
+  const highlighterTheme = useMemo(() => {
+    if (codeStyle === 'auto') return theme === ThemeMode.light ? 'one-light' : 'material-theme-darker'
+    else return codeStyle
+  }, [theme, codeStyle])
+
+  useEffect(() => {
+    const initMermaid = async () => {
+      if (!window.mermaid) {
+        await loadScript('https://unpkg.com/mermaid@10.9.1/dist/mermaid.min.js')
+        window.mermaid.initialize({
+          startOnLoad: true,
+          theme: theme === ThemeMode.dark ? 'dark' : 'default',
+          securityLevel: 'loose'
+        })
+        window.mermaid.contentLoaded()
+      }
+    }
+
+    initMermaid()
+  }, [theme])
+
+  useEffect(() => {
+    const initHighlighter = async () => {
+      const hl = await createHighlighter({
+        themes: Object.keys(bundledThemes),
+        langs: Object.keys(bundledLanguages)
+      })
+      setHighlighter(hl)
+    }
+
+    initHighlighter()
+  }, [])
+
+  const codeToHtml = (code: string, language: string) => {
+    if (!highlighter) return ''
+
+    return highlighter.codeToHtml(code, {
+      lang: language,
+      theme: highlighterTheme,
+      transformers: [
+        {
+          preprocess(code) {
+            if (code.endsWith('\n')) code = code.slice(0, -1)
+            return code
+          }
+        }
+      ]
+    })
+  }
+
+  return <SyntaxHighlighterContext.Provider value={{ codeToHtml }}>{children}</SyntaxHighlighterContext.Provider>
+}
+
+export const useSyntaxHighlighter = () => {
+  const context = useContext(SyntaxHighlighterContext)
+  if (!context) {
+    throw new Error('useSyntaxHighlighter must be used within a SyntaxHighlighterProvider')
+  }
+  return context
+}
+
+export const codeThemes = ['auto', ...Object.keys(bundledThemes)] as CodeStyleVarious[]
--- a/src/renderer/src/i18n/locales/en-us.json
+++ b/src/renderer/src/i18n/locales/en-us.json
@ -67,6 +67,7 @@
      "upgrade.success.button": "Restart",
      "topic.added": "New topic added",
      "save.success.title": "Saved successfully",
+      "message.code_style": "Code style",
      "message.style": "Message Style",
      "message.style.bubble": "Bubble",
      "message.style.plain": "Plain"
--- a/src/renderer/src/i18n/locales/zh-cn.json
+++ b/src/renderer/src/i18n/locales/zh-cn.json
@ -67,6 +67,7 @@
      "upgrade.success.button": "重启",
      "topic.added": "话题添加成功",
      "save.success.title": "保存成功",
+      "message.code_style": "代码风格",
      "message.style": "消息样式",
      "message.style.bubble": "气泡",
      "message.style.plain": "简洁"
--- a/src/renderer/src/i18n/locales/zh-tw.json
+++ b/src/renderer/src/i18n/locales/zh-tw.json
@ -67,6 +67,7 @@
      "upgrade.success.button": "重新啟動",
      "topic.added": "新話題已添加",
      "save.success.title": "保存成功",
+      "message.code_style": "程式碼風格",
      "message.style": "消息樣式",
      "message.style.bubble": "氣泡",
      "message.style.plain": "簡潔"
--- a/src/renderer/src/init.ts
+++ b/src/renderer/src/init.ts
@ -2,20 +2,6 @@ import KeyvStorage from '@kangfenmao/keyv-storage'
 import localforage from 'localforage'

 import { APP_NAME } from './config/env'
-import { ThemeMode } from './types'
-import { loadScript } from './utils'
-
-export async function initMermaid(theme: ThemeMode) {
-  if (!window.mermaid) {
-    await loadScript('https://unpkg.com/mermaid@10.9.1/dist/mermaid.min.js')
-    window.mermaid.initialize({
-      startOnLoad: true,
-      theme: theme === ThemeMode.dark ? 'dark' : 'default',
-      securityLevel: 'loose'
-    })
-    window.mermaid.contentLoaded()
-  }
-}

 function init() {
  localforage.config({
--- a/src/renderer/src/pages/home/Markdown/CodeBlock.tsx
+++ b/src/renderer/src/pages/home/Markdown/CodeBlock.tsx
@ -1,13 +1,9 @@
 import { CheckOutlined } from '@ant-design/icons'
 import CopyIcon from '@renderer/components/Icons/CopyIcon'
-import { useTheme } from '@renderer/context/ThemeProvider'
+import { useSyntaxHighlighter } from '@renderer/context/SyntaxHighlighterProvider'
 import { useSettings } from '@renderer/hooks/useSettings'
-import { initMermaid } from '@renderer/init'
-import { ThemeMode } from '@renderer/types'
 import React, { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { atomDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import styled from 'styled-components'

 import Artifacts from './Artifacts'
@ -23,11 +19,13 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className }) => {
  const match = /language-(\w+)/.exec(className || '')
  const showFooterCopyButton = children && children.length > 500
  const { codeShowLineNumbers, fontSize } = useSettings()
-  const { theme } = useTheme()
-  const language = match?.[1]
+  const language = match?.[1] ?? 'text'
+
+  const { codeToHtml } = useSyntaxHighlighter()
+
+  const html = codeToHtml(children, language)

  if (language === 'mermaid') {
-    initMermaid(theme)
    return <Mermaid chart={children} />
  }

@ -37,20 +35,17 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className }) => {
        <CodeLanguage>{'<' + match[1].toUpperCase() + '>'}</CodeLanguage>
        <CopyButton text={children} />
      </CodeHeader>
-      <SyntaxHighlighter
-        language={match[1]}
-        style={theme === ThemeMode.dark ? atomDark : oneLight}
-        wrapLongLines={false}
-        showLineNumbers={codeShowLineNumbers}
-        customStyle={{
+      <CodeContent
+        isShowLineNumbers={codeShowLineNumbers}
+        dangerouslySetInnerHTML={{ __html: html }}
+        style={{
          border: '0.5px solid var(--color-code-background)',
          borderTopLeftRadius: 0,
          borderTopRightRadius: 0,
          marginTop: 0,
          fontSize
-        }}>
-        {String(children).replace(/\n$/, '')}
-      </SyntaxHighlighter>
+        }}
+      />
      {showFooterCopyButton && (
        <CodeFooter>
          <CopyButton text={children} style={{ marginTop: -40, marginRight: 10 }} />
@ -81,6 +76,31 @@ const CopyButton: React.FC<{ text: string; style?: React.CSSProperties }> = ({ t
  )
 }

+const CodeContent = styled.div<{ isShowLineNumbers: boolean }>`
+  .shiki {
+    padding: 1em;
+  }
+
+  ${(props) =>
+    props.isShowLineNumbers &&
+    `
+      code {
+        counter-reset: step;
+        counter-increment: step 0;
+      }
+
+      code .line::before {
+        content: counter(step);
+        counter-increment: step;
+        width: 1rem;
+        margin-right: 1rem;
+        display: inline-block;
+        text-align: right;
+        opacity: 0.35;
+      }
+    `}
+`
+
 const CodeHeader = styled.div`
  display: flex;
  align-items: center;
--- a/src/renderer/src/pages/home/Tabs/Settings.tsx
+++ b/src/renderer/src/pages/home/Tabs/Settings.tsx
@ -2,12 +2,14 @@ import { CheckOutlined, QuestionCircleOutlined, ReloadOutlined } from '@ant-desi
 import { HStack } from '@renderer/components/Layout'
 import Scrollbar from '@renderer/components/Scrollbar'
 import { DEFAULT_CONTEXTCOUNT, DEFAULT_MAX_TOKENS, DEFAULT_TEMPERATURE } from '@renderer/config/constant'
+import { codeThemes } from '@renderer/context/SyntaxHighlighterProvider'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { SettingDivider, SettingRow, SettingRowTitle, SettingSubtitle } from '@renderer/pages/settings'
 import { useAppDispatch } from '@renderer/store'
 import {
  setCodeShowLineNumbers,
+  setCodeStyle,
  setFontSize,
  setMathEngine,
  setMessageFont,
@ -29,14 +31,14 @@ interface Props {

 const SettingsTab: FC<Props> = (props) => {
  const { assistant, updateAssistantSettings, updateAssistant } = useAssistant(props.assistant.id)
-  const { fontSize } = useSettings()
+  const { messageStyle, codeStyle, fontSize } = useSettings()
+
  const [temperature, setTemperature] = useState(assistant?.settings?.temperature ?? DEFAULT_TEMPERATURE)
  const [contextCount, setContextCount] = useState(assistant?.settings?.contextCount ?? DEFAULT_CONTEXTCOUNT)
  const [enableMaxTokens, setEnableMaxTokens] = useState(assistant?.settings?.enableMaxTokens ?? false)
  const [maxTokens, setMaxTokens] = useState(assistant?.settings?.maxTokens ?? 0)
-  const [streamOutput, setStreamOutput] = useState(assistant?.settings?.streamOutput ?? true)
  const [fontSizeValue, setFontSizeValue] = useState(fontSize)
-  const { messageStyle } = useSettings()
+  const [streamOutput, setStreamOutput] = useState(assistant?.settings?.streamOutput ?? true)
  const { t } = useTranslation()

  const dispatch = useAppDispatch()
@ -216,6 +218,21 @@ const SettingsTab: FC<Props> = (props) => {
        />
      </SettingRow>
      <SettingDivider />
+      <SettingRow>
+        <SettingRowTitleSmall>{t('message.message.code_style')}</SettingRowTitleSmall>
+        <Select
+          value={codeStyle}
+          onChange={(value) => dispatch(setCodeStyle(value))}
+          style={{ width: 160 }}
+          size="small">
+          {codeThemes.map((theme) => (
+            <Select.Option key={theme} value={theme}>
+              {theme}
+            </Select.Option>
+          ))}
+        </Select>
+      </SettingRow>
+      <SettingDivider />
      <SettingRow>
        <SettingRowTitleSmall>{t('message.message.style')}</SettingRowTitleSmall>
        <Select
--- a/src/renderer/src/store/settings.ts
+++ b/src/renderer/src/store/settings.ts
@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { LanguageVarious, ThemeMode } from '@renderer/types'
+import { CodeStyleVarious, LanguageVarious, ThemeMode } from '@renderer/types'

 export type SendMessageShortcut = 'Enter' | 'Shift+Enter'

@ -25,6 +25,7 @@ export interface SettingsState {
  codeShowLineNumbers: boolean
  mathEngine: 'MathJax' | 'KaTeX'
  messageStyle: 'plain' | 'bubble'
+  codeStyle: CodeStyleVarious
  // webdav 配置 host, user, pass, path
  webdavHost: string
  webdavUser: string
@ -54,6 +55,7 @@ const initialState: SettingsState = {
  codeShowLineNumbers: false,
  mathEngine: 'MathJax',
  messageStyle: 'plain',
+  codeStyle: 'auto',
  webdavHost: '',
  webdavUser: '',
  webdavPass: '',
@ -145,6 +147,9 @@ const settingsSlice = createSlice({
    },
    setMessageStyle: (state, action: PayloadAction<'plain' | 'bubble'>) => {
      state.messageStyle = action.payload
+    },
+    setCodeStyle: (state, action: PayloadAction<CodeStyleVarious>) => {
+      state.codeStyle = action.payload
    }
  }
 })
@ -176,7 +181,8 @@ export const {
  setWebdavPath,
  setCodeShowLineNumbers,
  setMathEngine,
-  setMessageStyle
+  setMessageStyle,
+  setCodeStyle
 } = settingsSlice.actions

 export default settingsSlice.reducer
--- a/src/renderer/src/types/index.ts
+++ b/src/renderer/src/types/index.ts
@ -1,4 +1,5 @@
 import OpenAI from 'openai'
+import { BuiltinTheme } from 'shiki'

 export type Assistant = {
  id: string
@ -137,6 +138,7 @@ export enum ThemeMode {
  auto = 'auto'
 }
 export type LanguageVarious = 'zh-CN' | 'zh-TW' | 'en-US'
+export type CodeStyleVarious = BuiltinTheme | 'auto'

 export type WebDavConfig = {
  webdavHost: string
--- a/yarn.lock
+++ b/yarn.lock
@ -330,7 +330,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.6, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.24.1, @babel/runtime@npm:^7.24.4, @babel/runtime@npm:^7.24.7, @babel/runtime@npm:^7.24.8, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.6, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.24.1, @babel/runtime@npm:^7.24.4, @babel/runtime@npm:^7.24.7, @babel/runtime@npm:^7.24.8, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.9.2":
  version: 7.25.6
  resolution: "@babel/runtime@npm:7.25.6"
  dependencies:
@ -1699,6 +1699,58 @@ __metadata:
  languageName: node
  linkType: hard

+"@shikijs/core@npm:1.22.2":
+  version: 1.22.2
+  resolution: "@shikijs/core@npm:1.22.2"
+  dependencies:
+    "@shikijs/engine-javascript": "npm:1.22.2"
+    "@shikijs/engine-oniguruma": "npm:1.22.2"
+    "@shikijs/types": "npm:1.22.2"
+    "@shikijs/vscode-textmate": "npm:^9.3.0"
+    "@types/hast": "npm:^3.0.4"
+    hast-util-to-html: "npm:^9.0.3"
+  checksum: 10c0/fbcfb33489817a7589ec91d7fac3b93ee0e4e81a7a41589e1c1d993c5195130c194aa17669c81c7a690e63275dce9ce380867503a901ee50fe6517a0777d6209
+  languageName: node
+  linkType: hard
+
+"@shikijs/engine-javascript@npm:1.22.2":
+  version: 1.22.2
+  resolution: "@shikijs/engine-javascript@npm:1.22.2"
+  dependencies:
+    "@shikijs/types": "npm:1.22.2"
+    "@shikijs/vscode-textmate": "npm:^9.3.0"
+    oniguruma-to-js: "npm:0.4.3"
+  checksum: 10c0/7ec537700382be561122343b0ab954c19e9a706998517eb767359468458ca28c95e9e46769e096e95b14e04feecd167230aaf864e81323cc3d596365a24a9545
+  languageName: node
+  linkType: hard
+
+"@shikijs/engine-oniguruma@npm:1.22.2":
+  version: 1.22.2
+  resolution: "@shikijs/engine-oniguruma@npm:1.22.2"
+  dependencies:
+    "@shikijs/types": "npm:1.22.2"
+    "@shikijs/vscode-textmate": "npm:^9.3.0"
+  checksum: 10c0/892c8ffc68ad614158bc9ddb394c03e4228122ec62152e4707f51ddd0f1eac1c75ccc0f05310c615e562fa505ea682b8f92f7f35ed127bc8a13b8655c489864b
+  languageName: node
+  linkType: hard
+
+"@shikijs/types@npm:1.22.2":
+  version: 1.22.2
+  resolution: "@shikijs/types@npm:1.22.2"
+  dependencies:
+    "@shikijs/vscode-textmate": "npm:^9.3.0"
+    "@types/hast": "npm:^3.0.4"
+  checksum: 10c0/278fd42dfe0b5aae8fbcca64861099ebe590deb53012a8ee3d17de7709b649a5629c40bd50a444191bfaeb7487d8f643f1391bfc95555801b5968eaa8bcc5cf6
+  languageName: node
+  linkType: hard
+
+"@shikijs/vscode-textmate@npm:^9.3.0":
+  version: 9.3.0
+  resolution: "@shikijs/vscode-textmate@npm:9.3.0"
+  checksum: 10c0/6aa80798b7d7f8be8029bb397ce1b9b75c0d0963d6aa444b9ae165595ceee931cf3767ca1681ba71a6e27484eeccab584bd38db3420da477f1a8d745040b1b1f
+  languageName: node
+  linkType: hard
+
 "@sindresorhus/is@npm:^4.0.0":
  version: 4.6.0
  resolution: "@sindresorhus/is@npm:4.6.0"
@ -1843,16 +1895,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/hast@npm:^2.0.0":
-  version: 2.3.10
-  resolution: "@types/hast@npm:2.3.10"
-  dependencies:
-    "@types/unist": "npm:^2"
-  checksum: 10c0/16daac35d032e656defe1f103f9c09c341a6dc553c7ec17b388274076fa26e904a71ea5ea41fd368a6d5f1e9e53be275c80af7942b9c466d8511d261c9529c7e
-  languageName: node
-  linkType: hard
-
-"@types/hast@npm:^3.0.0":
+"@types/hast@npm:^3.0.0, @types/hast@npm:^3.0.4":
  version: 3.0.4
  resolution: "@types/hast@npm:3.0.4"
  dependencies:
@ -2088,7 +2131,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/unist@npm:^2, @types/unist@npm:^2.0.0":
+"@types/unist@npm:^2.0.0":
  version: 2.0.11
  resolution: "@types/unist@npm:2.0.11"
  checksum: 10c0/24dcdf25a168f453bb70298145eb043cfdbb82472db0bc0b56d6d51cd2e484b9ed8271d4ac93000a80da568f2402e9339723db262d0869e2bf13bc58e081768d
@ -2346,7 +2389,6 @@ __metadata:
    react-router: "npm:6"
    react-router-dom: "npm:6"
    react-spinners: "npm:^0.14.1"
-    react-syntax-highlighter: "npm:^15.5.0"
    redux: "npm:^5.0.1"
    redux-persist: "npm:^6.0.0"
    rehype-katex: "npm:^7.0.1"
@ -2355,6 +2397,7 @@ __metadata:
    remark-gfm: "npm:^4.0.0"
    remark-math: "npm:^6.0.0"
    sass: "npm:^1.77.2"
+    shiki: "npm:^1.22.2"
    styled-components: "npm:^6.1.11"
    tinycolor2: "npm:^1.6.0"
    typescript: "npm:^5.6.2"
@ -3423,13 +3466,6 @@ __metadata:
  languageName: node
  linkType: hard

-"character-entities-legacy@npm:^1.0.0":
-  version: 1.1.4
-  resolution: "character-entities-legacy@npm:1.1.4"
-  checksum: 10c0/ea4ca9c29887335eed86d78fc67a640168342b1274da84c097abb0575a253d1265281a5052f9a863979e952bcc267b4ecaaf4fe233a7e1e0d8a47806c65b96c7
-  languageName: node
-  linkType: hard
-
 "character-entities-legacy@npm:^3.0.0":
  version: 3.0.0
  resolution: "character-entities-legacy@npm:3.0.0"
@ -3437,13 +3473,6 @@ __metadata:
  languageName: node
  linkType: hard

-"character-entities@npm:^1.0.0":
-  version: 1.2.4
-  resolution: "character-entities@npm:1.2.4"
-  checksum: 10c0/ad015c3d7163563b8a0ee1f587fb0ef305ef344e9fd937f79ca51cccc233786a01d591d989d5bf7b2e66b528ac9efba47f3b1897358324e69932f6d4b25adfe1
-  languageName: node
-  linkType: hard
-
 "character-entities@npm:^2.0.0":
  version: 2.0.2
  resolution: "character-entities@npm:2.0.2"
@ -3451,13 +3480,6 @@ __metadata:
  languageName: node
  linkType: hard

-"character-reference-invalid@npm:^1.0.0":
-  version: 1.1.4
-  resolution: "character-reference-invalid@npm:1.1.4"
-  checksum: 10c0/29f05081c5817bd1e975b0bf61e77b60a40f62ad371d0f0ce0fdb48ab922278bc744d1fbe33771dced751887a8403f265ff634542675c8d7375f6ff4811efd0e
-  languageName: node
-  linkType: hard
-
 "character-reference-invalid@npm:^2.0.0":
  version: 2.0.1
  resolution: "character-reference-invalid@npm:2.0.1"
@ -3631,13 +3653,6 @@ __metadata:
  languageName: node
  linkType: hard

-"comma-separated-tokens@npm:^1.0.0":
-  version: 1.0.8
-  resolution: "comma-separated-tokens@npm:1.0.8"
-  checksum: 10c0/c3bcfeaa6d50313528a006a40bcc0f9576086665c9b48d4b3a76ddd63e7d6174734386c98be1881cbf6ecfc25e1db61cd775a7b896d2ea7a65de28f83a0f9b17
-  languageName: node
-  linkType: hard
-
 "comma-separated-tokens@npm:^2.0.0":
  version: 2.0.3
  resolution: "comma-separated-tokens@npm:2.0.3"
@ -5248,15 +5263,6 @@ __metadata:
  languageName: node
  linkType: hard

-"fault@npm:^1.0.0":
-  version: 1.0.4
-  resolution: "fault@npm:1.0.4"
-  dependencies:
-    format: "npm:^0.2.0"
-  checksum: 10c0/c86c11500c1b676787296f31ade8473adcc6784f118f07c1a9429730b6288d0412f96e069ce010aa57e4f65a9cccb5abee8868bbe3c5f10de63b20482c9baebd
-  languageName: node
-  linkType: hard
-
 "fd-slicer@npm:~1.1.0":
  version: 1.1.0
  resolution: "fd-slicer@npm:1.1.0"
@ -5451,13 +5457,6 @@ __metadata:
  languageName: node
  linkType: hard

-"format@npm:^0.2.0":
-  version: 0.2.2
-  resolution: "format@npm:0.2.2"
-  checksum: 10c0/6032ba747541a43abf3e37b402b2f72ee08ebcb58bf84d816443dd228959837f1cddf1e8775b29fa27ff133f4bd146d041bfca5f9cf27f048edf3d493cf8fee6
-  languageName: node
-  linkType: hard
-
 "formdata-node@npm:^4.3.2":
  version: 4.4.1
  resolution: "formdata-node@npm:4.4.1"
@ -6040,13 +6039,6 @@ __metadata:
  languageName: node
  linkType: hard

-"hast-util-parse-selector@npm:^2.0.0":
-  version: 2.2.5
-  resolution: "hast-util-parse-selector@npm:2.2.5"
-  checksum: 10c0/29b7ee77960ded6a99d30c287d922243071cc07b39f2006f203bd08ee54eb8f66bdaa86ef6527477c766e2382d520b60ee4e4087f189888c35d8bcc020173648
-  languageName: node
-  linkType: hard
-
 "hast-util-parse-selector@npm:^4.0.0":
  version: 4.0.0
  resolution: "hast-util-parse-selector@npm:4.0.0"
@ -6077,6 +6069,25 @@ __metadata:
  languageName: node
  linkType: hard

+"hast-util-to-html@npm:^9.0.3":
+  version: 9.0.3
+  resolution: "hast-util-to-html@npm:9.0.3"
+  dependencies:
+    "@types/hast": "npm:^3.0.0"
+    "@types/unist": "npm:^3.0.0"
+    ccount: "npm:^2.0.0"
+    comma-separated-tokens: "npm:^2.0.0"
+    hast-util-whitespace: "npm:^3.0.0"
+    html-void-elements: "npm:^3.0.0"
+    mdast-util-to-hast: "npm:^13.0.0"
+    property-information: "npm:^6.0.0"
+    space-separated-tokens: "npm:^2.0.0"
+    stringify-entities: "npm:^4.0.0"
+    zwitch: "npm:^2.0.4"
+  checksum: 10c0/af938a03034727f6c944d3855732d72f71a3bcd920d36b9ba3e083df2217faf81713740934db64673aca69d76b60abe80052e47c0702323fd0bd5dce03b67b8d
+  languageName: node
+  linkType: hard
+
 "hast-util-to-jsx-runtime@npm:^2.0.0":
  version: 2.3.0
  resolution: "hast-util-to-jsx-runtime@npm:2.3.0"
@ -6136,19 +6147,6 @@ __metadata:
  languageName: node
  linkType: hard

-"hastscript@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "hastscript@npm:6.0.0"
-  dependencies:
-    "@types/hast": "npm:^2.0.0"
-    comma-separated-tokens: "npm:^1.0.0"
-    hast-util-parse-selector: "npm:^2.0.0"
-    property-information: "npm:^5.0.0"
-    space-separated-tokens: "npm:^1.0.0"
-  checksum: 10c0/f76d9cf373cb075c8523c8ad52709f09f7e02b7c9d3152b8d35c65c265b9f1878bed6023f215a7d16523921036d40a7da292cb6f4399af9b5eccac2a5a5eb330
-  languageName: node
-  linkType: hard
-
 "hastscript@npm:^8.0.0":
  version: 8.0.0
  resolution: "hastscript@npm:8.0.0"
@ -6171,13 +6169,6 @@ __metadata:
  languageName: node
  linkType: hard

-"highlight.js@npm:^10.4.1, highlight.js@npm:~10.7.0":
-  version: 10.7.3
-  resolution: "highlight.js@npm:10.7.3"
-  checksum: 10c0/073837eaf816922427a9005c56c42ad8786473dc042332dfe7901aa065e92bc3d94ebf704975257526482066abb2c8677cc0326559bb8621e046c21c5991c434
-  languageName: node
-  linkType: hard
-
 "hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
  version: 3.3.2
  resolution: "hoist-non-react-statics@npm:3.3.2"
@ -6519,13 +6510,6 @@ __metadata:
  languageName: node
  linkType: hard

-"is-alphabetical@npm:^1.0.0":
-  version: 1.0.4
-  resolution: "is-alphabetical@npm:1.0.4"
-  checksum: 10c0/1505b1de5a1fd74022c05fb21b0e683a8f5229366bac8dc4d34cf6935bcfd104d1125a5e6b083fb778847629f76e5bdac538de5367bdf2b927a1356164e23985
-  languageName: node
-  linkType: hard
-
 "is-alphabetical@npm:^2.0.0":
  version: 2.0.1
  resolution: "is-alphabetical@npm:2.0.1"
@ -6533,16 +6517,6 @@ __metadata:
  languageName: node
  linkType: hard

-"is-alphanumerical@npm:^1.0.0":
-  version: 1.0.4
-  resolution: "is-alphanumerical@npm:1.0.4"
-  dependencies:
-    is-alphabetical: "npm:^1.0.0"
-    is-decimal: "npm:^1.0.0"
-  checksum: 10c0/d623abae7130a7015c6bf33d99151d4e7005572fd170b86568ff4de5ae86ac7096608b87dd4a1d4dbbd497e392b6396930ba76c9297a69455909cebb68005905
-  languageName: node
-  linkType: hard
-
 "is-alphanumerical@npm:^2.0.0":
  version: 2.0.1
  resolution: "is-alphanumerical@npm:2.0.1"
@ -6659,13 +6633,6 @@ __metadata:
  languageName: node
  linkType: hard

-"is-decimal@npm:^1.0.0":
-  version: 1.0.4
-  resolution: "is-decimal@npm:1.0.4"
-  checksum: 10c0/a4ad53c4c5c4f5a12214e7053b10326711f6a71f0c63ba1314a77bd71df566b778e4ebd29f9fb6815f07a4dc50c3767fb19bd6fc9fa05e601410f1d64ffeac48
-  languageName: node
-  linkType: hard
-
 "is-decimal@npm:^2.0.0":
  version: 2.0.1
  resolution: "is-decimal@npm:2.0.1"
@ -6730,13 +6697,6 @@ __metadata:
  languageName: node
  linkType: hard

-"is-hexadecimal@npm:^1.0.0":
-  version: 1.0.4
-  resolution: "is-hexadecimal@npm:1.0.4"
-  checksum: 10c0/ec4c64e5624c0f240922324bc697e166554f09d3ddc7633fc526084502626445d0a871fbd8cae52a9844e83bd0bb414193cc5a66806d7b2867907003fc70c5ea
-  languageName: node
-  linkType: hard
-
 "is-hexadecimal@npm:^2.0.0":
  version: 2.0.1
  resolution: "is-hexadecimal@npm:2.0.1"
@ -7488,16 +7448,6 @@ __metadata:
  languageName: node
  linkType: hard

-"lowlight@npm:^1.17.0":
-  version: 1.20.0
-  resolution: "lowlight@npm:1.20.0"
-  dependencies:
-    fault: "npm:^1.0.0"
-    highlight.js: "npm:~10.7.0"
-  checksum: 10c0/728bce6f6fe8b157f48d3324e597f452ce0eed2ccff1c0f41a9047380f944e971eb45bceb31f08fbb64d8f338dabb166f10049b35b92c7ec5cf0241d6adb3dea
-  languageName: node
-  linkType: hard
-
 "lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0":
  version: 10.4.3
  resolution: "lru-cache@npm:10.4.3"
@ -8889,6 +8839,15 @@ __metadata:
  languageName: node
  linkType: hard

+"oniguruma-to-js@npm:0.4.3":
+  version: 0.4.3
+  resolution: "oniguruma-to-js@npm:0.4.3"
+  dependencies:
+    regex: "npm:^4.3.2"
+  checksum: 10c0/47d8a4089b1fd0ae4b9781907a92222ae549756ddb72a177a85fdc3bda8e59ce2840710dd03e448b80c9878aa8f4e14519fccc3652da71fc3e8bc048d5cb6acb
+  languageName: node
+  linkType: hard
+
 "openai-chat-tokens@npm:^0.2.8":
  version: 0.2.8
  resolution: "openai-chat-tokens@npm:0.2.8"
@ -9071,20 +9030,6 @@ __metadata:
  languageName: node
  linkType: hard

-"parse-entities@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "parse-entities@npm:2.0.0"
-  dependencies:
-    character-entities: "npm:^1.0.0"
-    character-entities-legacy: "npm:^1.0.0"
-    character-reference-invalid: "npm:^1.0.0"
-    is-alphanumerical: "npm:^1.0.0"
-    is-decimal: "npm:^1.0.0"
-    is-hexadecimal: "npm:^1.0.0"
-  checksum: 10c0/f85a22c0ea406ff26b53fdc28641f01cc36fa49eb2e3135f02693286c89ef0bcefc2262d99b3688e20aac2a14fd10b75c518583e875c1b9fe3d1f937795e0854
-  languageName: node
-  linkType: hard
-
 "parse-entities@npm:^4.0.0":
  version: 4.0.1
  resolution: "parse-entities@npm:4.0.1"
@ -9440,20 +9385,6 @@ __metadata:
  languageName: node
  linkType: hard

-"prismjs@npm:^1.27.0":
-  version: 1.29.0
-  resolution: "prismjs@npm:1.29.0"
-  checksum: 10c0/d906c4c4d01b446db549b4f57f72d5d7e6ccaca04ecc670fb85cea4d4b1acc1283e945a9cbc3d81819084a699b382f970e02f9d1378e14af9808d366d9ed7ec6
-  languageName: node
-  linkType: hard
-
-"prismjs@npm:~1.27.0":
-  version: 1.27.0
-  resolution: "prismjs@npm:1.27.0"
-  checksum: 10c0/841cbf53e837a42df9155c5ce1be52c4a0a8967ac916b52a27d066181a3578186c634e52d06d0547fb62b65c486b99b95f826dd54966619f9721b884f486b498
-  languageName: node
-  linkType: hard
-
 "proc-log@npm:^4.1.0, proc-log@npm:^4.2.0":
  version: 4.2.0
  resolution: "proc-log@npm:4.2.0"
@ -9517,15 +9448,6 @@ __metadata:
  languageName: node
  linkType: hard

-"property-information@npm:^5.0.0":
-  version: 5.6.0
-  resolution: "property-information@npm:5.6.0"
-  dependencies:
-    xtend: "npm:^4.0.0"
-  checksum: 10c0/d54b77c31dc13bb6819559080b2c67d37d94be7dc271f404f139a16a57aa96fcc0b3ad806d4a5baef9e031744853e4afe3df2e37275aacb1f78079bbb652c5af
-  languageName: node
-  linkType: hard
-
 "property-information@npm:^6.0.0":
  version: 6.5.0
  resolution: "property-information@npm:6.5.0"
@ -10318,21 +10240,6 @@ __metadata:
  languageName: node
  linkType: hard

-"react-syntax-highlighter@npm:^15.5.0":
-  version: 15.5.0
-  resolution: "react-syntax-highlighter@npm:15.5.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.3.1"
-    highlight.js: "npm:^10.4.1"
-    lowlight: "npm:^1.17.0"
-    prismjs: "npm:^1.27.0"
-    refractor: "npm:^3.6.0"
-  peerDependencies:
-    react: ">= 0.14.0"
-  checksum: 10c0/2bf57a1ea151f688efc7eba355677577c9bb55f05f9df7ef86627aae42f63f505486cddf3f4a628aecc51ec75e89beb9533201570d03201c4bf7d69d61d2545d
-  languageName: node
-  linkType: hard
-
 "react@npm:^18.2.0":
  version: 18.3.1
  resolution: "react@npm:18.3.1"
@ -10492,17 +10399,6 @@ __metadata:
  languageName: node
  linkType: hard

-"refractor@npm:^3.6.0":
-  version: 3.6.0
-  resolution: "refractor@npm:3.6.0"
-  dependencies:
-    hastscript: "npm:^6.0.0"
-    parse-entities: "npm:^2.0.0"
-    prismjs: "npm:~1.27.0"
-  checksum: 10c0/63ab62393c8c2fd7108c2ea1eff721c0ad2a1a6eee60fdd1b47f4bb25cf298667dc97d041405b3e718b0817da12b37a86ed07ebee5bd2ca6405611f1bae456db
-  languageName: node
-  linkType: hard
-
 "regenerator-runtime@npm:^0.13.3":
  version: 0.13.11
  resolution: "regenerator-runtime@npm:0.13.11"
@ -10517,6 +10413,13 @@ __metadata:
  languageName: node
  linkType: hard

+"regex@npm:^4.3.2":
+  version: 4.4.0
+  resolution: "regex@npm:4.4.0"
+  checksum: 10c0/345ab84008af4895ec5ec368e4cfdb2c5545ef473487ca272b5a26222ed3da529093389217df98a566493de240e7d504e1b9a9a24fadd72d09c19574e59e28e2
+  languageName: node
+  linkType: hard
+
 "regexp.prototype.flags@npm:^1.5.2":
  version: 1.5.2
  resolution: "regexp.prototype.flags@npm:1.5.2"
@ -11141,6 +11044,20 @@ __metadata:
  languageName: node
  linkType: hard

+"shiki@npm:^1.22.2":
+  version: 1.22.2
+  resolution: "shiki@npm:1.22.2"
+  dependencies:
+    "@shikijs/core": "npm:1.22.2"
+    "@shikijs/engine-javascript": "npm:1.22.2"
+    "@shikijs/engine-oniguruma": "npm:1.22.2"
+    "@shikijs/types": "npm:1.22.2"
+    "@shikijs/vscode-textmate": "npm:^9.3.0"
+    "@types/hast": "npm:^3.0.4"
+  checksum: 10c0/9b31497dc9c23e2d4e3b7674023b4d31ed650fb4d94dc339319c4fba742220acf030aa0899be64ddfb29936d346bf098f12687d2d8104f2b45ec006936639e57
+  languageName: node
+  linkType: hard
+
 "side-channel@npm:^1.0.4, side-channel@npm:^1.0.6":
  version: 1.0.6
  resolution: "side-channel@npm:1.0.6"
@ -11275,13 +11192,6 @@ __metadata:
  languageName: node
  linkType: hard

-"space-separated-tokens@npm:^1.0.0":
-  version: 1.1.5
-  resolution: "space-separated-tokens@npm:1.1.5"
-  checksum: 10c0/3ee0a6905f89e1ffdfe474124b1ade9fe97276a377a0b01350bc079b6ec566eb5b219e26064cc5b7f3899c05bde51ffbc9154290b96eaf82916a1e2c2c13ead9
-  languageName: node
-  linkType: hard
-
 "space-separated-tokens@npm:^2.0.0":
  version: 2.0.2
  resolution: "space-separated-tokens@npm:2.0.2"
@ -13078,7 +12988,7 @@ __metadata:
  languageName: node
  linkType: hard

-"zwitch@npm:^2.0.0":
+"zwitch@npm:^2.0.0, zwitch@npm:^2.0.4":
  version: 2.0.4
  resolution: "zwitch@npm:2.0.4"
  checksum: 10c0/3c7830cdd3378667e058ffdb4cf2bb78ac5711214e2725900873accb23f3dfe5f9e7e5a06dcdc5f29605da976fc45c26d9a13ca334d6eea2245a15e77b8fc06e