# Sugar High v2 整合 React、Remark 與 Tailwind CSS，核心壓縮後僅 1.74 KB

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 原作者：Jiachi (@huozhi) · 策展與摘要：EasyVibeCoding · 平台：X (Twitter) · 熱度：🔥🔥 · 日期：2026-08-11

> 原始來源：https://x.com/huozhi/status/2086536749266899305

## 證據與延伸閱讀

- [Sugar High v2 整合 React、Remark 與 Tailwind CSS，核心壓縮後僅 1.74 KB](https://video.twimg.com/amplify_video/2086535941691170816/vid/avc1/1920x1080/cBMwRj1eBjBymO9q.mp4?tag=29)
- [內建 25 種語言支援](https://github.com/huozhi/sugar-high) — 官方 Repository
- [Codice 現已成為 Sugar High 的一部分](https://x.com/huozhi/status/2086544122467262918)
- [主題與 Agent-friendly 設計](https://x.com/huozhi/status/2086546538214596877)

## 中文摘要

Sugar High v2 整合 React、Remark 與 Tailwind CSS，核心壓縮後僅 1.74 KB。

**版本重點** Sugar High v2 主打在瀏覽器與 JavaScript 執行環境中提供小體積的語法突顯功能，核心壓縮後為 1.74 KB，完整版本 gzip 後為 8.6 KB。發文者列出的主要更新包括：

- 內建多語言支援，涵蓋 JavaScript、TypeScript、CSS、Python、Rust、JSON、Shell、SQL、HTML、YAML、Markdown、GraphQL 與 HCL 等 25 種語言。
- 支援 React `<Code />` 與 `<Editor />` 元件，分別用於顯示語法突顯的程式碼區塊，以及以 textarea overlay 方式提供程式碼編輯體驗。
- 新增 Remark plugin，能在 Markdown 處理流程中突顯 fenced code block。
- 提供適合 Tailwind CSS 的主題，讓使用者能以 utility CSS 自訂 token 顏色與版面。
- Codice 現已成為 Sugar High 的一部分，讓 code editor 與 code block 元件納入同一套語法突顯生態系，減少需要組合的元件數量。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1786376146050-yol4yxqi.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/22c45a8b8a55a5c0.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> Sugar High v2 語法突顯工具的介紹畫面

**React 與 Markdown 整合** React 套件的匯入方式如下，`<Editor />` 可接收 `lang`、`value` 與 `onChange`，`<Code />` 則能啟用行號：

```tsx
import { Code, Editor } from '@sugar-high/react'

<Editor lang="typescript" value={source} onChange={setSource} />
<Code lang="typescript" lineNumbers>{source}</Code>
```

Remark plugin 的使用方式是：

```js
import remarkSugarHigh from '@sugar-high/remark'
```

發文者強調，這些功能都使用與核心套件相同的 highlighting 與主題命名空間，因此不必為不同整合管道維護多套設定。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/f717dc9c4927b140.jpg)
> @sugar-high/react 的 Editor 與 Code 元件安裝圖卡，指令為 `npm install @sugar-high/react sugar-high`。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/95546c73c28c6627.jpg)
> @sugar-high/remark 的 Remark plugin 安裝圖卡，指令為 `npm install @sugar-high/remark`。

**主題與 Agent-friendly 設計** 發文者特別分享 Tailwind CSS & Agent friendly themes，認為 Agent 可以理解並套用這些主題。貼文提供的指令會下載預設 Sugar High CSS 主題至目前資料夾的 `sugar-high.css`：

```bash
curl -fsSL https://sugar-high.vercel.app/themes/sugar-high.css -o sugar-high.css
```

這個指令只會取得 CSS 檔案；實際導入專案前，仍應由人工檢查檔案內容與來源是否符合需求。主題可嵌入自有樣式表，或套用在特定祖先元素下，並透過 CSS custom properties 控制 class、keyword、string、comment 等 token 的顏色。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/f74e962c402af9c4.jpg)
> Themes 頁面展示 cURL 指令，以及 sugar high（light）、gruvbox（dark）的 TypeScript 預覽與 soft minimal（light）的 Python 預覽。

**核心 API 與實作方式** 引用的 GitHub 程式庫說明，Sugar High 是 zero-dependency 工具，輸出 HTML 時不需要 DOM。基本安裝與呼叫方式如下：

```sh
npm install sugar-high
```

```js
import { highlight } from 'sugar-high'

const html = highlight('const ready = true')
```

預設支援 JavaScript，包含 JSX；其他語言可透過 `lang` 傳入 canonical name，例如 `python`、`json` 或 `diff`。若輸入來自檔名副檔名、Markdown fence 或其他整合管道，則可使用 `sugar-high/lang` 的 `lang()` 將 `py`、`bash`、`jsonc`、`.yml` 等別名正規化。

**發文者的分享意圖** 這次貼文不是單純介紹語法突顯函式，而是展示 Sugar High v2 如何把核心解析、React、Markdown 與主題整合起來，同時維持極小的傳輸體積。發文者也附上[官方網站](http://sugar-high.vercel.app)與 [GitHub 程式庫](https://github.com/huozhi/sugar-high)，將重點放在「小型、可組合、方便 Agent 使用」的開發體驗。

## 標籤

開源專案, 框架更新, React, Sugar High