fix: md table

content/sparks.csv

@@ -1,5 +1,5 @@
 label,body,adj,noun
-🔥,{{adj}}的{{noun}},高大,战士
+🔥,**{{adj}}** 的{{noun}},高大,战士
 💧,{{adj}}的{{noun}},矮小,法师
 🌪️,{{adj}}的{{noun}},帅气,弓手
 🌱,{{adj}}的{{noun}},丑陋,盗贼

src/components/table.tsx

@@ -1,6 +1,7 @@
 import { customElement, noShadowDOM } from 'solid-element';
 import { createSignal, For, Show, createEffect } from 'solid-js';
 import { parse } from 'csv-parse/browser/esm/sync';
+import { marked } from '../markdown';
 
 interface TableRow {
   label: string;
@@ -13,7 +14,7 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
   const [rows, setRows] = createSignal<TableRow[]>([]);
   const [activeTab, setActiveTab] = createSignal(0);
   const [loaded, setLoaded] = createSignal(false);
-  const [bodyContent, setBodyContent] = createSignal('');
+  const [bodyHtml, setBodyHtml] = createSignal('');
 
   // 从 element 的 textContent 获取 CSV 路径
   const src = element?.textContent?.trim() || '';
@@ -62,25 +63,30 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
     loadCSV();
   }
 
-  // 处理 body 内容中的 {{prop}} 语法
+  // 处理 body 内容中的 {{prop}} 语法并解析 markdown
   const processBody = (body: string, currentRow: TableRow): string => {
+    let processedBody = body;
+    
     if (!props.remix) {
       // 不启用 remix 时，只替换当前行的引用
-      return body.replace(/\{\{(\w+)\}\}/g, (_, key) => currentRow[key] || '');
+      processedBody = body.replace(/\{\{(\w+)\}\}/g, (_, key) => currentRow[key] || '');
     } else {
       // 启用 remix 时，每次引用使用随机行的内容
-      return body.replace(/\{\{(\w+)\}\}/g, (_, key) => {
+      processedBody = body.replace(/\{\{(\w+)\}\}/g, (_, key) => {
         const randomRow = rows()[Math.floor(Math.random() * rows().length)];
         return randomRow?.[key] || '';
       });
     }
+    
+    // 使用 marked 解析 markdown
+    return marked.parse(processedBody) as string;
   };
 
   // 更新 body 内容
   const updateBodyContent = () => {
     if (loaded() && rows().length > 0) {
       const currentRow = rows()[activeTab()];
-      setBodyContent(processBody(currentRow.body, currentRow));
+      setBodyHtml(processBody(currentRow.body, currentRow));
     }
   };
 
@@ -99,12 +105,21 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
   return (
     <div class="ttrpg-table">
       <div class="flex items-center gap-2 border-b border-gray-200">
+        <Show when={props.roll}>
+          <button
+            onClick={handleRoll}
+            class="text-gray-500 hover:text-gray-700"
+            title="随机切换"
+          >
+            🎲
+          </button>
+        </Show>
         <div class="flex gap-2">
           <For each={rows()}>
             {(row, index) => (
               <button
                 onClick={() => setActiveTab(index())}
-                class={`px-4 py-2 font-medium transition-colors ${
+                class={`font-medium transition-colors ${
                   activeTab() === index()
                     ? 'text-blue-600 border-b-2 border-blue-600'
                     : 'text-gray-500 hover:text-gray-700'
@@ -115,19 +130,10 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
             )}
           </For>
         </div>
-        <Show when={props.roll}>
-          <button
-            onClick={handleRoll}
-            class="px-2 py-2 text-gray-500 hover:text-gray-700"
-            title="随机切换"
-          >
-            🎲
-          </button>
-        </Show>
       </div>
-      <div class="p-4 prose max-w-none">
+      <div class="p-1 prose max-w-none">
         <Show when={loaded() && rows().length > 0}>
-          <div innerHTML={bodyContent()} />
+          <div innerHTML={bodyHtml()} />
         </Show>
       </div>
     </div>