diff --git a/memento-note/components/rich-text-editor.tsx b/memento-note/components/rich-text-editor.tsx
index c29080d..e253f28 100644
--- a/memento-note/components/rich-text-editor.tsx
+++ b/memento-note/components/rich-text-editor.tsx
@@ -295,7 +295,17 @@ export const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorPro
       if (!editor || !editor.isEditable) return
 
       try {
-        // Insert the chart markdown at current position
+        // Convert markdown chart to HTML format for TipTap
+        // Input: ```chart\nbar\nTitle\nlabel: value\n```
+        // Output: <pre><code class="language-chart">bar\nTitle\nlabel: value</code></pre>
+        const chartContent = markdown
+          .replace(/```chart\n?/gi, '')
+          .replace(/```$/gi, '')
+          .trim()
+
+        const htmlContent = `<pre><code class="language-chart">${chartContent}</code></pre>`
+
+        // Insert the chart HTML at current position
         const { from } = editor.state.selection
 
         // Check if we're in the middle of text, if so create a new paragraph
@@ -311,8 +321,8 @@ export const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorPro
           }
         }
 
-        // Insert the chart
-        editor.chain().focus().insertContent(markdown).run()
+        // Insert the chart as HTML (not markdown)
+        editor.chain().focus().insertContent(htmlContent).run()
       } catch (error) {
         console.error('[handleSelectChart] Failed to insert chart:', error)
         toast.error('Failed to insert chart. Please try again.')
diff --git a/memento-note/components/tiptap-chart-extension.tsx b/memento-note/components/tiptap-chart-extension.tsx
index 4f9ec86..4ff2430 100644
--- a/memento-note/components/tiptap-chart-extension.tsx
+++ b/memento-note/components/tiptap-chart-extension.tsx
@@ -70,7 +70,12 @@ export const ChartExtension = Node.create({
 
           // Detect chart blocks by class="language-chart"
           if (codeEl && codeEl.classList.contains('language-chart')) {
-            return {}
+            // Store the code content as an attribute
+            const codeContent = codeEl.textContent || ''
+            return {
+              code: codeContent,
+              language: 'chart'
+            }
           }
 
           return false
@@ -79,8 +84,10 @@ export const ChartExtension = Node.create({
     ]
   },
 
-  renderHTML({ HTMLAttributes }) {
-    return ['pre', { ...HTMLAttributes, class: 'language-chart' }, ['code', { class: 'language-chart' }, 0]]
+  renderHTML({ HTMLAttributes, node }) {
+    // Get the code content from node attrs
+    const code = node.attrs.code || ''
+    return ['pre', { ...HTMLAttributes, class: 'language-chart' }, ['code', { class: 'language-chart' }, code]]
   },
 
   addNodeView() {