fix: markdown code lang capitalization and line number color (#1098)

web/app/components/base/markdown.tsx

@@ -10,17 +10,26 @@ import type { RefObject } from 'react'
 import { useEffect, useRef, useState } from 'react'
 import CopyBtn from '@/app/components/app/chat/copy-btn'
 
-// import { copyToClipboard } from "../utils";
-// https://txtfiddle.com/~hlshwya/extract-urls-from-text
-// const urlRegex = /\b((https?|ftp|file):\/\/|(www|ftp)\.)[-A-Z0-9+&@#\/%?=~_|$!:,.;]*[A-Z0-9+&@#\/%=~_|$]/ig
+// Available language https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_HLJS.MD
+const capitalizationLanguageNameMap: Record<string, string> = {
+  sql: 'SQL',
+  javascript: 'JavaScript',
+  typescript: 'TypeScript',
+  vbscript: 'VBScript',
+  css: 'CSS',
+  html: 'HTML',
+  xml: 'XML',
+  php: 'PHP',
+}
+const getCorrectCapitalizationLanguageName = (language: string) => {
+  if (!language)
+    return 'Plain'
 
-// function highlightURL(content: string) {
-//   return content.replace(urlRegex, (url) => {
-//     // fix http:// in [] will be parsed to link agin
-//     const res = `[${url.replace('://', ':&#47;&#47;')}](${url})`
-//     return res
-//   })
-// }
+  if (language in capitalizationLanguageNameMap)
+    return capitalizationLanguageNameMap[language]
+
+  return language.charAt(0).toUpperCase() + language.substring(1)
+}
 export function PreCode(props: { children: any }) {
   const ref = useRef<HTMLPreElement>(null)
 
@@ -75,12 +84,7 @@ export function Markdown(props: { content: string }) {
           code({ node, inline, className, children, ...props }) {
             const match = /language-(\w+)/.exec(className || '')
             const language = match?.[1]
-            const languageShowName = (() => {
-              if (language)
-                return language.charAt(0).toUpperCase() + language.substring(1)
-
-              return 'Plain'
-            })()
+            const languageShowName = getCorrectCapitalizationLanguageName(language || '')
             return (!inline && match)
               ? (
                 <div>

web/app/styles/markdown.scss

@@ -1046,4 +1046,8 @@
 
 .markdown-body ::-webkit-calendar-picker-indicator {
   filter: invert(50%);
+}
+
+.markdown-body .react-syntax-highlighter-line-number {
+  color: #D0D5DD;
 }