請 AI 寫自動化程式將 markdown table 變成漂亮的 HTML / CSS table

透過 AI 我們可以輕易製作簡單易懂的表格，不過它通常預設是 markdown 格式，因此畫面比較陽春單調。

最近彼得潘研究一下後，發現 AI 一暝大一吋，它現在已能製作精美表格，只要指定它使用特定格式，比方 HTML / CSS、SVG 或 React。

使用 Claude Artifacts 製作精美表格

不過每次下 prompt 麻煩 AI 製作表格也挺費時的，而且每次做出的風格都不一樣，無法保證品質。

因此彼得潘想到可以請 AI 用 HTML / CSS 設計幾款漂亮的表格，然後再請它寫自動化程式將 markdown table 變成套用樣式的 HTML / CSS 表格。

以下我們用個實際的例子說明。

下圖為 Claude Artifacts 用 HTML / CSS 設計的表格。

彼得潘覺得滿好看的，輸入以下 prompt 請它寫個能讓任何 markdown table 變成套用此樣式的表格。

prompt: 我喜歡這個風格，可以寫一個自動化程式，幫我將 markdown 的 table 套用這個風格嗎。

AI 成功用 Python 寫出轉換的程式，程式如下。

AI-Tool-Script/markdown-to-styled-html.py at main · PeterPanSwift/AI-Tool-Script

之後只要執行 Python 程式即可將 markdown 變成美麗的 HTML 表格。

以下圖的 markdown table 為例。

我們可以請 AI 執行 Python 程式，也可以在自己的電腦執行。

• 請 AI 執行。

下圖為彼得潘上傳 python & md 檔後請 AI 執行的畫面。

• 在自己的電腦執行。

執行以下指令轉換。

python3 markdown-to-styled-html.py table.md

生成的結果如下。

酷炫現代風格的表格

ps: 彼得潘使用 GitHub Pages 架設網站顯示 table 的網頁。

使用 GitHub Pages 架設網站初體驗

透過以上方法我們可以將 markdown table 變成任何樣式的 HTML 表格，比方以下迪士尼風格的例子。

• 轉換的 python 程式。

AI-Tool-Script/markdown-to-disney-html.py at main · PeterPanSwift/AI-Tool-Script

• 生成的 html。

Table