Merge pull request #168 from solaoi/feature_add-highlight-on-markdown…

…-and-support-mermaid add highlight on markdown and add mermaid support
solaoi · Sep 15, 2024 · c1bba46 · c1bba46
2 parents 0a710ed + 61274d6
commit c1bba46
Show file tree

Hide file tree

Showing 6 changed files with 730 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,9 @@
   "dependencies": {
     "@tauri-apps/api": "^1.6.0",
     "dayjs": "^1.11.13",
+    "highlight.js": "^11.10.0",
     "markdown-to-jsx": "^7.5.0",
+    "mermaid": "^11.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-h5-audio-player": "^3.9.3",

diff --git a/src/components/molecules/MyMarkdown.tsx b/src/components/molecules/MyMarkdown.tsx
@@ -1,22 +1,40 @@
 import Markdown from 'markdown-to-jsx'
+import { useEffect, useRef } from 'react'
+import hljs from 'highlight.js';
+import mermaid from 'mermaid';
 
 type MyMarkdownProps = {
     content: string
 }
 
 const MyMarkdown = (props: MyMarkdownProps) => {
+    const rootRef = useRef<HTMLDivElement>(null);
     const { content } = props
+
+    useEffect(() => {
+        mermaid.initialize({ startOnLoad: false });
+        rootRef.current?.querySelectorAll('pre code').forEach(async (block) => {
+            if (block.className.includes("mermaid")) {
+                await mermaid.run({ nodes: [block as HTMLElement] });
+            } else {
+                hljs.highlightBlock(block as HTMLElement);
+            }
+        });
+    }, [content]);
+
     return (
-        <Markdown
-            options={{
-                forceBlock: true,
-                overrides: {
-                    a: ({ children, ...props }) => <a {...props} target="_blank">{children}</a>,
-                    p: ({ children, ...props }) => `${children}`.includes("[object Object]") ? <p {...props} >{children}</p> : `${children}`.split("\n").map(c => <p {...props} >{c}</p>)
-                }
-            }}>
-            {content}
-        </Markdown>
+        <div ref={rootRef} className='znc w-full'>
+            <Markdown
+                options={{
+                    forceBlock: true,
+                    overrides: {
+                        a: ({ children, ...props }) => <a {...props} target="_blank">{children}</a>,
+                        p: ({ children, ...props }) => `${children}`.includes("[object Object]") ? <p {...props} >{children}</p> : `${children}`.split("\n").map(c => <p {...props} >{c}</p>),
+                    }
+                }}>
+                {content}
+            </Markdown>
+        </div>
     )
 }
 

diff --git a/src/components/molecules/SpeechHistory.tsx b/src/components/molecules/SpeechHistory.tsx
@@ -48,7 +48,7 @@ const SpeechHistory = (props: SpeechHistoryProps): JSX.Element => {
                             {c.speech_type === "memo"
                                 && <div className='flex py-1' key={"memo_" + i}>
                                     <div className="w-16 pl-2 flex-none">{date}</div>
-                                    <div className="znc w-full flex flex-col items-start ml-5" >
+                                    <div className="flex flex-col items-start ml-5" >
                                         <MyMarkdown content={c.content} />
                                     </div>
                                 </div>}
@@ -61,14 +61,14 @@ const SpeechHistory = (props: SpeechHistoryProps): JSX.Element => {
                                             <div className="chat chat-start">
                                                 <div className="flex chat-bubble bg-white text-slate-500">
                                                     <p>
-                                                        <div className='znc w-full'><MyMarkdown content={c.content} /></div>
+                                                        <MyMarkdown content={c.content} />
                                                     </p>
                                                 </div>
                                             </div>
                                             <div className="chat chat-end">
                                                 <div className="flex chat-bubble bg-white text-slate-500 py-5 w-full">
                                                     {c.content_2 ?
-                                                        <div className='znc w-full'><MyMarkdown content={c.content_2} /></div>
+                                                        <MyMarkdown content={c.content_2} />
                                                         :
                                                         <span className="loading loading-dots loading-sm"></span>
                                                     }

diff --git a/src/index.css b/src/index.css
@@ -43,7 +43,7 @@ body {
     display: none;
 }
 
-.znc ul,ol,p+p,blockquote,table,pre,h1,h2,h3,h4,h5,h6 {
+.znc ul,ol,p+p,blockquote,table,h1,h2,h3,h4,h5,h6 {
     width: 100%;
     margin: 0!important;
 }
@@ -57,6 +57,15 @@ body {
     overflow-wrap: anywhere;
 }
 
+.znc pre {
+    width: 100%;
+    margin: 1.5rem 0!important;
+}
+
+.znc pre:has(.lang-mermaid) {
+    background-color: initial;
+}
+
 .collapse,.collapse-content {
     visibility: inherit!important;
 }

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
+import 'highlight.js/styles/github.min.css'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(