{"id":15885774,"url":"https://github.com/rojer95/katex-mini","last_synced_at":"2025-04-05T00:07:37.341Z","repository":{"id":43267545,"uuid":"458422505","full_name":"rojer95/katex-mini","owner":"rojer95","description":"在微信小程序上渲染Latex公式（不依赖服务端渲染，使用KaTeX）","archived":false,"fork":false,"pushed_at":"2025-03-06T02:04:04.000Z","size":1820,"stargazers_count":85,"open_issues_count":0,"forks_count":15,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T23:07:24.948Z","etag":null,"topics":["katex","latex","miniprogram","weapp"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rojer95.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-12T04:45:35.000Z","updated_at":"2025-03-06T02:04:07.000Z","dependencies_parsed_at":"2024-10-27T23:09:41.912Z","dependency_job_id":"d3cf84d6-5111-431f-bfaf-32e5e61971e1","html_url":"https://github.com/rojer95/katex-mini","commit_stats":{"total_commits":27,"total_committers":2,"mean_commits":13.5,"dds":0.03703703703703709,"last_synced_commit":"d2c76739dcbf964d1bb4ec496130018512d196e7"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rojer95%2Fkatex-mini","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rojer95%2Fkatex-mini/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rojer95%2Fkatex-mini/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rojer95%2Fkatex-mini/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rojer95","download_url":"https://codeload.github.com/rojer95/katex-mini/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246769967,"owners_count":20830771,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["katex","latex","miniprogram","weapp"],"created_at":"2024-10-06T05:07:44.780Z","updated_at":"2025-04-05T00:07:37.322Z","avatar_url":"https://github.com/rojer95.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# katex-weapp\n\n基于 KaTeX 构建的小程序原生 LaTeX 渲染组件（不依赖服务端渲染）\n\n## 效果预览图\n\n![效果预览图](./assets/preview.png)\n\n## 实现原理\n\n基于 katex 库，解析 latex 公式生成虚拟 dom 树对象，将 dom 对象翻译成小程序的 rich-text 支持的 nodes 由小程序渲染\n\n### 局限性\n\n- 依赖微信小程序的 `rich-text` 组件渲染，请注意小程序基础库 1.4.0 开始支持\n- 由于 katex 库过大会大量占用小程序包体大小。\n\n### 包体过大解决方式\n\n- 【推荐】使用小程序分包：[小程序分包文档](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html)\n- 【不推荐】如果你希望再小一点，可以将解析模块放在服务端，提供解析接口，再将结果展示在 rich-text 中（已实现）`虽然这里使用了服务端，但是这里是产出json格式的nodes而非图片，相对于将latex转为图片的方案也好很多`\n\n## 【试验性】1.3.0 起支持 Katex 中类似 Auto-render 渲染方式\n\n自`1.3.0`起，支持呈现文本中的所有数学，用法如下：\n\n```ts\nimport { renderMathInText } from \"@rojer/katex-mini\";\nconst innerMathText =\n  \"这是一个行内公式 $ f(x) = sum_{n=0}^{infty} \\\\frac{f^{(n)}(a)}{n!} (x - a)^n $ ，这是一个行间的公式 $$ \\\\int_a^b f(x) , dx = F(b) - F(a) $$ \\n这是新起一行的文字\";\n\nconst nodes = renderMathInText(innerMathText, {\n  delimiters: [\n    { left: \"$$\", right: \"$$\", display: true },\n    { left: \"$\", right: \"$\", display: false },\n  ],\n});\n\n// 将渲染得到的nodes交给小程序RichText组件渲染\nthis.setData({\n  nodes,\n});\n```\n\n\u003e `renderMathInText` 的 参数参考： https://katex.org/docs/autorender#api\n\n\u003cb\u003e效果预览图\u003c/b\u003e：\n| 小程序效果 |\n| -------- |\n| ![效果预览图](./assets/auto-render-preview.png) |\n\n## 有没有完整题目编排方案？\n\n\u003cb\u003eDSlate 富文本编辑器\u003c/b\u003e ：支持 Latex、图文、混合编排的编辑器，可以直接导出小程序 rich-text 支持格式的 JSON 数据。[DEMO](https://rojer95.github.io/dslate/getting-started/math)\n\n\u003cb\u003e预览图\u003c/b\u003e：\n| 编辑器 | 小程序效果 |\n| -------- | -------- |\n| ![效果预览图](./assets/dslate.png) | ![效果预览图](./assets/dslate-preview.png) |\n\n## 如何使用？\n\n### 在原生小程序项目中直接使用\n\n#### 1. 在小程序中安装依赖\n\n```bash\nnpm install @rojer/katex-mini\n```\n\n#### 安装 katex （@rojer/katex-mini@1.2.0 之后需要手动安装）\n\n\u003e ⚠️ 自 1.2.0 版本起，`@rojer/katex-mini`不再包含`katex`，因此你需要自行安装`katex`\n\n```bash\nnpm install katex\n```\n\n#### 2. 在小程序开发者工具中 - 工具 - 构建 npm，执行后会看到生成的`miniprogram_npm`目录\n\n#### 3. 在 `app.wxss` 加载 katex 的内置 css 样式\n\n```less\n@import \"./miniprogram_npm/@rojer/katex-mini/index.wxss\";\n```\n\n#### 4. 在小程序中解析 latex\n\n```js\n// index.js\nimport parse from \"@rojer/katex-mini\";\n\nPage({\n  data: {\n    nodes: [],\n    latex:\n      \"\\\\displaystyle \\\\frac{1}{\\\\Bigl(\\\\sqrt{\\\\phi \\\\sqrt{5}}-\\\\phi\\\\Bigr) e^{\\\\frac25 \\\\pi}} = 1+\\\\frac{e^{-2\\\\pi}} {1+\\\\frac{e^{-4\\\\pi}} {1+\\\\frac{e^{-6\\\\pi}} {1+\\\\frac{e^{-8\\\\pi}} {1+\\\\cdots} } } }\",\n  },\n\n  onInput: function (e) {\n    this.setData({\n      latex: e.detail.value,\n    });\n  },\n\n  renderLatex: function () {\n    const katexOption = {\n      displayMode: true,\n    }; // 参考 katex 的配置\n    this.setData({\n      nodes: parse(this.data.latex, {\n        throwError: true, // 为true时，解析失败会抛出错误，否则会直接把错误信息解析为nodes结构展示\n        ...katexOption,\n      }),\n    });\n  },\n});\n```\n\n#### 5. 在页面中展示\n\n```html\n\u003c!--index.wxml--\u003e\n\u003cview class=\"container\"\u003e\n  \u003crich-text nodes=\"{{nodes}}\"\u003e\u003c/rich-text\u003e\n  \u003ctextarea value=\"{{latex}}\" bindinput=\"onInput\" maxlength=\"1400\"\u003e\u003c/textarea\u003e\n  \u003cbutton bindtap=\"renderLatex\"\u003e渲染\u003c/button\u003e\n\u003c/view\u003e\n```\n\n### 在 Taro 中直接使用\n\n#### 1、clone 项目\n\n```bash\ngit clone https://github.com/rojer95/katex-mini-taro-demo.git\n```\n\n#### 2、项目根目录安装依赖\n\n```bash\nyarn\n```\n\n#### 3、编译\n\n```bash\nyarn dev:weapp\n```\n\n#### 4、编译后:\n\n- 打开小程序开发者工具, 打开 dist 目录\n- 可以修改文本框内容 Latex 公式，点击渲染查看效果\n\n### 使用 API 调用方式\n\n\u003e API 的 Demo 源码: [https://github.com/rojer95/katex-mini-api](https://github.com/rojer95/katex-mini-api)\n\n#### 1、导入 wxss\n\n```less\n// 在app.wxss中\n@import \"katex-mini.wxss\";\n```\n\n\u003e `katex-mini.wxss` 的下载地址： [https://cdn.jsdelivr.net/npm/@rojer/katex-mini/dist/index.wxss](https://cdn.jsdelivr.net/npm/@rojer/katex-mini/dist/index.wxss)\n\n#### 2、请求接口\n\n```javascript\nwx.request({\n  url: \"https://katex-mini-api.vercel.app\",\n  data: {\n    latex: \"a=b+c\",\n  },\n  dataType: \"json\",\n  success(res) {\n    this.setData({\n      nodes: res.data,\n    });\n  },\n});\n```\n\n#### 3、放到 RichText 组件里\n\n```html\n\u003crich-text nodes=\"{{ nodes }}\" /\u003e\n```\n\n### 贡献者 ✨\n\n\u003ctable\u003e\n\u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/rojer95\"\u003e\n        \u003cimg src=\"https://avatars.githubusercontent.com/u/20662049?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\n        \u003cbr /\u003e\n        \u003csub\u003e\u003cb\u003erojer\u003c/b\u003e\u003c/sub\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/had0ngzhu\"\u003e\n        \u003cimg src=\"https://avatars.githubusercontent.com/u/67865626?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\n        \u003cbr /\u003e\n        \u003csub\u003e\u003cb\u003ehad0ngzhu\u003c/b\u003e\u003c/sub\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### 写在最后\n\n\u003e 如果能帮到你，希望能给我一个[Star](https://github.com/rojer95/katex-mini)。感谢！\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frojer95%2Fkatex-mini","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frojer95%2Fkatex-mini","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frojer95%2Fkatex-mini/lists"}