@zjlab-frontier/markdown 1.2.0 → 1.2.2

package/README.md

@@ -2,8 +2,8 @@
 
 > **包名**：`@zjlab-frontier/markdown`  
 > **适用框架**：React（支持 React 18+）  
-> **核心引擎**：`react-markdown` + `better-react-mathjax` (MathJax v3) + `mermaid`  
-> **功能亮点**：支持 **Mermaid 图表**、**LaTeX 数学公式（MathJax）**、**代码高亮**、**GitHub 风格 Markdown（GFM）**、**长代码折叠**、**一键复制**、**媒体自动识别** 等。
+> **核心引擎**：`react-markdown` + `KaTeX` / `MathJax` + `mermaid`  
+> **功能亮点**：支持 **Mermaid 图表**、**LaTeX 数学公式**（支持 KaTeX 和 MathJax 双引擎）、**代码高亮**、**GitHub 风格 Markdown（GFM）**、**长代码折叠**、**一键复制**、**媒体自动识别** 等。
 
 ---
 
@@ -23,6 +23,8 @@ npm install @zjlab-frontier/markdown
 
 ```tsx
 import { ZJMarkdown } from '@zjlab-frontier/markdown';
+// 引入样式（如果构建工具没有自动处理）
+// import '@zjlab-frontier/markdown/dist/style.css'; 
 ```
 
 ### 2. 基本使用
@@ -34,7 +36,7 @@ function App() {
 
 这是一个功能强大的 React Markdown 组件。
 
-- ✅ **数学公式**：$E = mc^2$ 或 \[ \sum_{i=1}^n i = \frac{n(n+1)}{2} \]
+- ✅ **数学公式**：$E = mc^2$
 - ✅ **Mermaid 图表**：流程图、时序图等
 - ✅ **代码增强**：自动识别语言、复制按钮、长代码折叠
 - ✅ **多媒体**：自动识别 mp3/mp4 链接
@@ -42,6 +44,7 @@ function App() {
 
   return (
     <div style={{ padding: 20 }}>
+      {/* 默认使用 KaTeX 渲染公式 */}
       <ZJMarkdown 
         content={markdownContent} 
         fontSize={16} 
@@ -55,23 +58,22 @@ function App() {
 
 ## 🧩 功能详解
 
-### 1. **数学公式（MathJax v3）**
+### 1. **数学公式（双引擎支持）**
 
-组件内置 `better-react-mathjax`，支持强大的 LaTeX 数学公式渲染。
+组件支持 `KaTeX`（默认，渲染快）和 `MathJax`（兼容性强）两种引擎。可以通过 `mathEngine` 属性切换。
 
 #### ✅ 支持语法：
 
-- **行内公式**：`$...$` 或 `\(...\)`
+- **行内公式**：`$...$` 或 `\(...\]`
 - **块级公式**：`$$...$$` 或 `\[...\]`
-- **环境支持**：支持 `align`, `gather`, `matrix`, `cases` 等常用环境。
+- **化学式支持**：支持 `\ce{...}` (KaTeX 需扩展，MathJax 原生支持更好)
 
 #### ⚙️ 预处理增强：
 
 组件内置了 **LaTeX 预处理逻辑**，解决了 Markdown 转义字符（如 `\` 和 `_`）与 LaTeX 语法冲突的问题。
 
 - 自动保护 `\\` 换行符
-- 自动处理 `\ce{...}` (化学式) 和 `\boxed{...}`
-- 兼容 `\begin{align}...\end{align}` 等环境写法
+- 自动处理 `\ce{...}` 和 `\boxed{...}` 等裸公式
 
 **示例：**
 
@@ -82,14 +84,15 @@ function App() {
 $$
 \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} 
 $$
+```
+
+#### 切换引擎示例：
 
-矩阵：
-\[
-\begin{pmatrix}
- a & b \\
-c & d
-\end{pmatrix}
-\]
+```tsx
+<ZJMarkdown 
+  content={content} 
+  mathEngine="mathjax" // 切换为 MathJax 引擎
+/>
 ```
 
 ---
@@ -117,8 +120,8 @@ graph TD
 
 - **语言标注**：显示语言类型（如 `typescript`）。
 - **一键复制**：提供复制按钮。
-- **自动折叠**：高度超过 **400px** 自动折叠。
-- **自动换行**：对文本类语言（`text`, `md`, `latex`）强制换行。
+- **自动折叠**：高度超过 **400px** 自动折叠，点击“查看全部”展开。
+- **自动换行**：对文本类语言（`text`, `md`, `latex` 等）强制换行，避免横向滚动。
 
 ---
 
@@ -146,6 +149,7 @@ graph TD
 | 属性名 | 类型 | 默认值 | 说明 |
 |:---|:---|:---|:---|
 | `content` | `string` | **必填** | Markdown 源码字符串 |
+| `mathEngine` | `'katex' , 'mathjax'` | `'katex'` | 数学公式渲染引擎 |
 | `fontSize` | `number` | `16` | 正文字体大小 (px) |
 | `fontFamily` | `string` | `'inherit'` | 字体设置 |
 | `style` | `CSSProperties` | - | 自定义根元素样式 |
@@ -163,4 +167,4 @@ npm run build:types  # 生成类型定义
 
 ## 📝 License
 
-MIT
+MIT

package/dist/{arc-hBWWMQsH.mjs → arc-DqchBxsS.mjs}

@@ -1,5 +1,5 @@
 import { w as ln, c as I } from "./path-DLwuMfdd.mjs";
-import { av as an, aw as j, ax as D, ay as rn, az as y, U as on, aA as K, aB as _, aC as un, aD as t, aE as sn, aF as tn, aG as fn } from "./index-Do6WBYHP.mjs";
+import { av as an, aw as j, ax as D, ay as rn, az as y, U as on, aA as K, aB as _, aC as un, aD as t, aE as sn, aF as tn, aG as fn } from "./index-DQcUJR4J.mjs";
 function cn(l) {
   return l.innerRadius;
 }

package/dist/{blockDiagram-c4efeb88-C6pfG9Ck.mjs → blockDiagram-c4efeb88-cfABFDhp.mjs}

@@ -1,8 +1,8 @@
-import { Z as se, A as ye, d as H, e as Ee, l as S, E as we, k as De, g as he, p as ve } from "./index-Do6WBYHP.mjs";
-import { c as Ne } from "./clone-C91NbT9g.mjs";
-import { i as ke, c as Ie, b as Oe, d as Te, a as ge, p as ze } from "./edges-96097737-CiKz0b-2.mjs";
-import { G as Ce } from "./graph-DGnQ-3dF.mjs";
-import { c as Ae } from "./channel-B2KIr8h9.mjs";
+import { Z as se, A as ye, d as H, e as Ee, l as S, E as we, k as De, g as he, p as ve } from "./index-DQcUJR4J.mjs";
+import { c as Ne } from "./clone-DqqwsCFm.mjs";
+import { i as ke, c as Ie, b as Oe, d as Te, a as ge, p as ze } from "./edges-96097737-Cmfw2TwL.mjs";
+import { G as Ce } from "./graph-DVtp3wMB.mjs";
+import { c as Ae } from "./channel-B4t78Llz.mjs";
 import { o as Re } from "./ordinal-C0oynhte.mjs";
 import { s as Be } from "./Tableau10-D7jGxypv.mjs";
 var le, oe, ee = (function() {

package/dist/{c4Diagram-c83219d4-D9_jGOj0.mjs → c4Diagram-c83219d4-C-6jDzJC.mjs}

@@ -1,5 +1,5 @@
-import { g as Dt, s as we, a as Oe, b as Te, c as Re, d as Nt, l as le, e as De, f as Se, h as wt, i as ue, j as Pe, w as Me, k as Kt, m as oe } from "./index-Do6WBYHP.mjs";
-import { d as Le, g as Ne } from "./svgDrawCommon-b86b1483-ICvpV_Gu.mjs";
+import { g as Dt, s as we, a as Oe, b as Te, c as Re, d as Nt, l as le, e as De, f as Se, h as wt, i as ue, j as Pe, w as Me, k as Kt, m as oe } from "./index-DQcUJR4J.mjs";
+import { d as Le, g as Ne } from "./svgDrawCommon-b86b1483-mCgnFk7N.mjs";
 var Yt = (function() {
   var e = function(bt, _, x, m) {
     for (x = x || {}, m = bt.length; m--; x[bt[m]] = _)

package/dist/{channel-B2KIr8h9.mjs → channel-B4t78Llz.mjs}

@@ -1,4 +1,4 @@
-import { aH as o, aI as n } from "./index-Do6WBYHP.mjs";
+import { aH as o, aI as n } from "./index-DQcUJR4J.mjs";
 const t = (a, r) => o.lang.round(n.parse(a)[r]);
 export {
   t as c

package/dist/{classDiagram-beda092f-B51T8VBY.mjs → classDiagram-beda092f-CfOz3ehP.mjs}

@@ -1,8 +1,8 @@
-import { s as G, d as S, p as A } from "./styles-b4e223ce-B2lr3TRK.mjs";
-import { g as v, l as y, d as B, e as W, F as $, B as M, G as I } from "./index-Do6WBYHP.mjs";
-import { G as O } from "./graph-DGnQ-3dF.mjs";
-import { l as P } from "./layout-BR9KFHR9.mjs";
-import { l as X } from "./line-6cN4pofW.mjs";
+import { s as G, d as S, p as A } from "./styles-b4e223ce-CdLnFOft.mjs";
+import { g as v, l as y, d as B, e as W, F as $, B as M, G as I } from "./index-DQcUJR4J.mjs";
+import { G as O } from "./graph-DVtp3wMB.mjs";
+import { l as P } from "./layout-IFMSj_eH.mjs";
+import { l as X } from "./line-DyTTx3_A.mjs";
 let H = 0;
 const Y = function(i, a, t, o, p) {
   const g = function(e) {

package/dist/{classDiagram-v2-2358418a-CU4b2Waq.mjs → classDiagram-v2-2358418a--utFTagh.mjs}

@@ -1,8 +1,8 @@
-import { s as M, d as _, p as B } from "./styles-b4e223ce-B2lr3TRK.mjs";
-import { l as d, g as c, d as w, B as R, o as G, k as D, p as E, q as C, n as A } from "./index-Do6WBYHP.mjs";
-import { G as q } from "./graph-DGnQ-3dF.mjs";
-import { r as z } from "./index-5325376f-LPX90pOA.mjs";
-import "./layout-BR9KFHR9.mjs";
+import { s as M, d as _, p as B } from "./styles-b4e223ce-CdLnFOft.mjs";
+import { l as d, g as c, d as w, B as R, o as G, k as D, p as E, q as C, n as A } from "./index-DQcUJR4J.mjs";
+import { G as q } from "./graph-DVtp3wMB.mjs";
+import { r as z } from "./index-5325376f-Dia8KuCU.mjs";
+import "./layout-IFMSj_eH.mjs";
 const S = (s) => D.sanitizeText(s, c());
 let k = {
   dividerMargin: 10,

package/dist/{clone-C91NbT9g.mjs → clone-DqqwsCFm.mjs}

@@ -1,4 +1,4 @@
-import { c as r } from "./graph-DGnQ-3dF.mjs";
+import { c as r } from "./graph-DVtp3wMB.mjs";
 var e = 4;
 function a(o) {
   return r(o, e);

package/dist/{createText-1719965b-BP357dSa.mjs → createText-1719965b-CEDPvN4v.mjs}

@@ -1,4 +1,4 @@
-import { b7 as On, l as wt, b6 as At, i as zt, Z as It, b8 as Tt } from "./index-Do6WBYHP.mjs";
+import { b7 as On, l as wt, b6 as At, i as zt, Z as It, b8 as Tt } from "./index-DQcUJR4J.mjs";
 const Bt = {};
 function Ot(n, r) {
   const t = Bt, e = typeof t.includeImageAlt == "boolean" ? t.includeImageAlt : !0, u = typeof t.includeHtml == "boolean" ? t.includeHtml : !0;

package/dist/{edges-96097737-CiKz0b-2.mjs → edges-96097737-Cmfw2TwL.mjs}

@@ -1,6 +1,6 @@
-import { l as g, F as lt, g as b, r as H, d as E, B as j, i as Q, b6 as V } from "./index-Do6WBYHP.mjs";
-import { a as st } from "./createText-1719965b-BP357dSa.mjs";
-import { l as ct } from "./line-6cN4pofW.mjs";
+import { l as g, F as lt, g as b, r as H, d as E, B as j, i as Q, b6 as V } from "./index-DQcUJR4J.mjs";
+import { a as st } from "./createText-1719965b-CEDPvN4v.mjs";
+import { l as ct } from "./line-DyTTx3_A.mjs";
 const ht = (a, t, e, i) => {
   t.forEach((l) => {
     wt[l](a, e, i);

package/dist/{erDiagram-0228fc6a-D2YtCYid.mjs → erDiagram-0228fc6a-DzW4IcsO.mjs}

@@ -1,7 +1,7 @@
-import { C as Et, D as mt, a as gt, s as kt, b as xt, c as Rt, g as Z, l as V, d as rt, B as Ot, e as bt, E as Nt, F as Tt, G as At } from "./index-Do6WBYHP.mjs";
-import { G as Mt } from "./graph-DGnQ-3dF.mjs";
-import { l as St } from "./layout-BR9KFHR9.mjs";
-import { l as wt } from "./line-6cN4pofW.mjs";
+import { C as Et, D as mt, a as gt, s as kt, b as xt, c as Rt, g as Z, l as V, d as rt, B as Ot, e as bt, E as Nt, F as Tt, G as At } from "./index-DQcUJR4J.mjs";
+import { G as Mt } from "./graph-DVtp3wMB.mjs";
+import { l as St } from "./layout-IFMSj_eH.mjs";
+import { l as wt } from "./line-DyTTx3_A.mjs";
 const It = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
 function Dt(t) {
   return typeof t == "string" && It.test(t);

package/dist/{flowDb-c6c81e3f-Cy2RsBB7.mjs → flowDb-c6c81e3f-B9N-8rUY.mjs}

@@ -1,4 +1,4 @@
-import { C as me, D as ye, s as ve, a as Ve, b as Le, c as Ie, aq as Re, k as Ne, l as J1, g as et, E as we, B as dt, d as w1 } from "./index-Do6WBYHP.mjs";
+import { C as me, D as ye, s as ve, a as Ve, b as Le, c as Ie, aq as Re, k as Ne, l as J1, g as et, E as we, B as dt, d as w1 } from "./index-DQcUJR4J.mjs";
 var pt = (function() {
   var e = function(f1, a, o, f) {
     for (o = o || {}, f = f1.length; f--; o[f1[f]] = a)

package/dist/{flowDiagram-50d868cf-DuaRmGZp.mjs → flowDiagram-50d868cf-DlZOyfAv.mjs}

@@ -1,9 +1,9 @@
-import { f as $, p as kt } from "./flowDb-c6c81e3f-Cy2RsBB7.mjs";
-import { d as m, n as G, l as M, g as D, o as St, p as z, q as W, r as Z, t as tt, k as et } from "./index-Do6WBYHP.mjs";
-import { G as Lt } from "./graph-DGnQ-3dF.mjs";
-import { u as Et, r as _t, p as Tt, l as Nt, d as I } from "./layout-BR9KFHR9.mjs";
-import { a as T, b as rt, i as at, c as E, e as nt, d as st, f as At, g as Pt, s as Ct } from "./styles-d45a18b0-CFxfzO5n.mjs";
-import { l as It } from "./line-6cN4pofW.mjs";
+import { f as $, p as kt } from "./flowDb-c6c81e3f-B9N-8rUY.mjs";
+import { d as m, n as G, l as M, g as D, o as St, p as z, q as W, r as Z, t as tt, k as et } from "./index-DQcUJR4J.mjs";
+import { G as Lt } from "./graph-DVtp3wMB.mjs";
+import { u as Et, r as _t, p as Tt, l as Nt, d as I } from "./layout-IFMSj_eH.mjs";
+import { a as T, b as rt, i as at, c as E, e as nt, d as st, f as At, g as Pt, s as Ct } from "./styles-d45a18b0-M01gYHuE.mjs";
+import { l as It } from "./line-DyTTx3_A.mjs";
 function Bt(r) {
   if (!r.ok) throw new Error(r.status + " " + r.statusText);
   return r.text();

package/dist/{flowDiagram-v2-4f6560a1-BnpNjba0.mjs → flowDiagram-v2-4f6560a1-iYUawyg_.mjs}

@@ -1,8 +1,8 @@
-import { f as o, p as a } from "./flowDb-c6c81e3f-Cy2RsBB7.mjs";
-import { f as t, g as e } from "./styles-d45a18b0-CFxfzO5n.mjs";
-import { u as s } from "./index-Do6WBYHP.mjs";
-import "./graph-DGnQ-3dF.mjs";
-import "./layout-BR9KFHR9.mjs";
+import { f as o, p as a } from "./flowDb-c6c81e3f-B9N-8rUY.mjs";
+import { f as t, g as e } from "./styles-d45a18b0-M01gYHuE.mjs";
+import { u as s } from "./index-DQcUJR4J.mjs";
+import "./graph-DVtp3wMB.mjs";
+import "./layout-IFMSj_eH.mjs";
 const p = {
   parser: a,
   db: o,

package/dist/{flowchart-elk-definition-6af322e1-CurcUiBZ.mjs → flowchart-elk-definition-6af322e1-MYPjcgRr.mjs}

@@ -1,7 +1,7 @@
-import { p as FNe, d as BNe } from "./flowDb-c6c81e3f-Cy2RsBB7.mjs";
-import { ap as $se, P as RNe, d as IO, l as Ba, Z as xU, o as KNe, p as C0n, q as j0n, n as $U, k as _Ne } from "./index-Do6WBYHP.mjs";
-import { i as HNe, a as qNe, l as UNe, b as GNe, k as zNe, m as XNe } from "./edges-96097737-CiKz0b-2.mjs";
-import { l as VNe } from "./line-6cN4pofW.mjs";
+import { p as FNe, d as BNe } from "./flowDb-c6c81e3f-B9N-8rUY.mjs";
+import { ap as $se, P as RNe, d as IO, l as Ba, Z as xU, o as KNe, p as C0n, q as j0n, n as $U, k as _Ne } from "./index-DQcUJR4J.mjs";
+import { i as HNe, a as qNe, l as UNe, b as GNe, k as zNe, m as XNe } from "./edges-96097737-Cmfw2TwL.mjs";
+import { l as VNe } from "./line-DyTTx3_A.mjs";
 function NU(ct) {
   throw new Error('Could not dynamically require "' + ct + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
 }

package/dist/{ganttDiagram-a2739b55-CAMvmp7r.mjs → ganttDiagram-a2739b55-DgyYNFHM.mjs}

@@ -1,5 +1,5 @@
-import { R as Ge, J as Sn, K as je, L as $e, M as Je, N as ne, O as _n, P as Te, a as Yn, s as Un, C as Fn, D as En, b as Ln, c as An, g as Dt, d as Rt, e as Wn, Q as nt, l as $t, k as In, j as On, E as Hn, B as Nn } from "./index-Do6WBYHP.mjs";
-import { b as Pn, t as Fe, c as Vn, a as zn, l as Rn } from "./linear-Cg9A0W-C.mjs";
+import { R as Ge, J as Sn, K as je, L as $e, M as Je, N as ne, O as _n, P as Te, a as Yn, s as Un, C as Fn, D as En, b as Ln, c as An, g as Dt, d as Rt, e as Wn, Q as nt, l as $t, k as In, j as On, E as Hn, B as Nn } from "./index-DQcUJR4J.mjs";
+import { b as Pn, t as Fe, c as Vn, a as zn, l as Rn } from "./linear-Dgbes8dI.mjs";
 import { i as Bn } from "./init-DjUOC4st.mjs";
 function Zn(t, e) {
   let n;

package/dist/{gitGraphDiagram-82fe8481-CIeLBXT5.mjs → gitGraphDiagram-82fe8481-CyWyr3t1.mjs}

@@ -1,4 +1,4 @@
-import { C as vt, D as Ct, s as Ot, a as Pt, b as Gt, c as It, g as C, l as B, d as St, B as At, H as Nt, E as Ht, k as D, I as Bt } from "./index-Do6WBYHP.mjs";
+import { C as vt, D as Ct, s as Ot, a as Pt, b as Gt, c as It, g as C, l as B, d as St, B as At, H as Nt, E as Ht, k as D, I as Bt } from "./index-DQcUJR4J.mjs";
 var mt = (function() {
   var r = function(I, o, u, d) {
     for (u = u || {}, d = I.length; d--; u[I[d]] = o)

package/dist/{graph-DGnQ-3dF.mjs → graph-DVtp3wMB.mjs}

@@ -1,4 +1,4 @@
-import { aJ as $, aK as He, aL as T, af as y, aM as Ye, aN as Ze, ae as Ae, aO as qe, aP as Oe, aQ as D, ac as q, aR as Xe, aS as Te, aT as Je, aU as C, al as Ee, aV as x, a7 as me, aW as Qe, aX as Y, aY as We, aZ as ze, a_ as L, ak as Ve, a$ as ke, ad as en, b0 as ne, b1 as nn, b2 as rn, aj as tn, ai as we, ag as sn, b3 as j, aa as an, b4 as un, am as F, z as re, b5 as te } from "./index-Do6WBYHP.mjs";
+import { aJ as $, aK as He, aL as T, af as y, aM as Ye, aN as Ze, ae as Ae, aO as qe, aP as Oe, aQ as D, ac as q, aR as Xe, aS as Te, aT as Je, aU as C, al as Ee, aV as x, a7 as me, aW as Qe, aX as Y, aY as We, aZ as ze, a_ as L, ak as Ve, a$ as ke, ad as en, b0 as ne, b1 as nn, b2 as rn, aj as tn, ai as we, ag as sn, b3 as j, aa as an, b4 as un, am as F, z as re, b5 as te } from "./index-DQcUJR4J.mjs";
 var fn = "[object Symbol]";
 function X(e) {
   return typeof e == "symbol" || $(e) && He(e) == fn;

package/dist/{index-5325376f-LPX90pOA.mjs → index-5325376f-Dia8KuCU.mjs}

@@ -1,9 +1,9 @@
-import { i as N, G as A } from "./graph-DGnQ-3dF.mjs";
-import { m as $, l as H } from "./layout-BR9KFHR9.mjs";
-import { c as V } from "./clone-C91NbT9g.mjs";
-import { i as U, u as W, s as _, a as q, b as z, g as D, p as O, c as K, d as Q, e as p, f as J, h as Y, j as Z } from "./edges-96097737-CiKz0b-2.mjs";
-import { l as s, g as T, r as S, d as L } from "./index-Do6WBYHP.mjs";
-import { a as I } from "./createText-1719965b-BP357dSa.mjs";
+import { i as N, G as A } from "./graph-DVtp3wMB.mjs";
+import { m as $, l as H } from "./layout-IFMSj_eH.mjs";
+import { c as V } from "./clone-DqqwsCFm.mjs";
+import { i as U, u as W, s as _, a as q, b as z, g as D, p as O, c as K, d as Q, e as p, f as J, h as Y, j as Z } from "./edges-96097737-Cmfw2TwL.mjs";
+import { l as s, g as T, r as S, d as L } from "./index-DQcUJR4J.mjs";
+import { a as I } from "./createText-1719965b-CEDPvN4v.mjs";
 function m(e) {
   var t = {
     options: {