{"id":41080672,"url":"https://github.com/yourtion/lynx-html-renderer","last_synced_at":"2026-01-22T13:38:31.649Z","repository":{"id":329140724,"uuid":"1118305807","full_name":"yourtion/lynx-html-renderer","owner":"yourtion","description":"A lightweight and extensible renderer that render HTML string on Lynx","archived":false,"fork":false,"pushed_at":"2026-01-16T01:07:50.000Z","size":1460,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-16T11:16:15.132Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://lynx-html.js.org/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yourtion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2025-12-17T15:00:12.000Z","updated_at":"2026-01-13T13:19:57.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/yourtion/lynx-html-renderer","commit_stats":null,"previous_names":["yourtion/lynx-html-renderer"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/yourtion/lynx-html-renderer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yourtion%2Flynx-html-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yourtion%2Flynx-html-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yourtion%2Flynx-html-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yourtion%2Flynx-html-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yourtion","download_url":"https://codeload.github.com/yourtion/lynx-html-renderer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yourtion%2Flynx-html-renderer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28663804,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-22T01:17:37.254Z","status":"online","status_checked_at":"2026-01-22T02:00:07.137Z","response_time":144,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2026-01-22T13:38:30.728Z","updated_at":"2026-01-22T13:38:31.611Z","avatar_url":"https://github.com/yourtion.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lynx HTML Renderer\n\n\u003e 一个将 **HTML 渲染到 Lynx 原生组件** 的轻量、可扩展渲染引擎。\n\u003e\n\u003e A lightweight and extensible renderer that render HTML string on Lynx.\n\n---\n\n## ✨ 项目简介 | Introduction\n\n**HTML → Lynx Renderer** 通过解析 HTML 并转换为一棵中间语义树（LynxNode），最终渲染为 Lynx 原生组件。\n\n该项目并非浏览器实现，而是一个 **面向原生的 HTML 安全集渲染方案**，适用于：\n\n- 内容页 / 详情页\n- 富文本展示\n- 配置化页面\n\n\n**HTML → Lynx Renderer** parses HTML into a semantic intermediate representation (LynxNode), then renders it into Lynx native components.\n\nIt is **not a browser**, but a **native-oriented, safe HTML rendering solution**, suitable for:\n\n- Content \u0026 detail pages\n- Rich text rendering\n- Configuration-driven pages\n\n---\n\n## 🎯 设计目标 | Design Goals\n\n- ✅ 渲染大部分真实业务中的 HTML 页面\n- ✅ 支持文本、图片、Flex 布局、基础表格\n- ✅ 支持用户自定义标签与渲染组件\n- ✅ 架构可扩展、可长期维护\n\n---\n\n## 🚀 快速开始 | Quick Start\n\n### 安装 | Installation\n\n```bash\nnpm install lynx-html-renderer\n# 或\npnpm install lynx-html-renderer\n```\n\n### 基本使用 | Basic Usage\n\n```tsx\nimport { HTMLRenderer } from 'lynx-html-renderer';\n\nfunction App() {\n  const html = '\u003cdiv\u003eHello \u003cstrong\u003eworld\u003c/strong\u003e\u003c/div\u003e';\n\n  return \u003cHTMLRenderer html={html} /\u003e;\n}\n```\n\n### 转换选项 | Transform Options\n\n`HTMLRenderer` 组件支持以下可选属性来控制 HTML 转换行为：\n\n```tsx\nimport { HTMLRenderer } from 'lynx-html-renderer';\n\nfunction App() {\n  const html = '\u003cdiv class=\"container\" style=\"color: red;\"\u003eHello\u003c/div\u003e';\n\n  return (\n    \u003cHTMLRenderer\n      html={html}\n      removeAllClass={true}  // 删除所有 HTML 的 class 属性（默认：true）\n      removeAllStyle={false} // 删除所有 HTML 的 style 属性（默认：false）\n    /\u003e\n  );\n}\n```\n\n**选项说明：**\n\n- `removeAllClass?: boolean` - 是否删除所有 HTML 的 class 属性，默认为 `true`\n  - 设置为 `false` 可保留 HTML 中的 class 属性\n- `removeAllStyle?: boolean` - 是否删除所有 HTML 的 style 属性，默认为 `false`\n  - 设置为 `true` 可移除所有内联样式\n\n### CSS 类模式 | CSS Class Mode\n\n除了默认的内联样式模式，`HTMLRenderer` 还支持 **CSS 类模式**，通过预定义的 CSS 类来应用默认样式：\n\n```tsx\nimport { HTMLRenderer } from 'lynx-html-renderer';\nimport 'lynx-html-renderer/dist/styles.css';\n\nfunction App() {\n  const html = '\u003ch1\u003eTitle\u003c/h1\u003e\u003cp\u003eContent\u003c/p\u003e';\n\n  return \u003cHTMLRenderer html={html} styleMode=\"css-class\" /\u003e;\n}\n```\n\n**CSS 类模式的优势：**\n\n- 🎨 **样式可定制** - 通过覆盖 CSS 类来定制默认样式\n- 🚀 **性能优化** - 减少重复的内联样式定义\n- 🔄 **样式复用** - 多个实例共享同一份 CSS\n- 📦 **主题切换** - 支持动态主题切换\n\n**使用方式：**\n\n```tsx\n// 方式1：使用预生成 CSS（推荐）\nimport { HTMLRenderer } from 'lynx-html-renderer';\nimport 'lynx-html-renderer/dist/styles.css';\n\n\u003cHTMLRenderer html={html} styleMode=\"css-class\" /\u003e\n\n// 方式2：动态生成 CSS\nimport { HTMLRenderer, generateCSS } from 'lynx-html-renderer';\n\nconst css = generateCSS('my-root-class');\n\u003cstyle\u003e{css}\u003c/style\u003e\n\u003cHTMLRenderer html={html} styleMode=\"css-class\" rootClassName=\"my-root-class\" /\u003e\n```\n\n**样式优先级（从高到低）：**\n\n1. HTML 的 `style` 属性（内联样式）\n2. HTML 的 `class` 属性\n3. TAG_MAP 的 `defaultStyle`（通过 `.lhr-{tag}` 类应用）\n\n详细的 CSS 类模式文档请参考：[CSS 类模式指南](./docs/css-class-mode.md)\n\n## 🚫 非目标 | Non-goals\n\n- ❌ 不实现完整 HTML/CSS 规范\n- ❌ 不执行 JavaScript（`script` / inline events）\n- ❌ 不追求浏览器级像素一致\n- ❌ 不做 DOM diff 或 hydration\n\n---\n\n## 🧠 核心思想 | Core Concepts\n\n参考 [Architecture](./docs/architecture.md)\n\n## 📦 功能特性 | Features\n\n- ✅ HTML 标签 → Lynx 组件映射\n- ✅ CSS style 安全集解析（白名单）\n- ✅ 文本语义（strong / em / code）\n- ✅ 基础表格支持（table / tr / td）\n- ✅ 用户自定义渲染组件\n- ✅ 插件化 Transform 机制（可选）\n\n---\n\n## 🧩 插件机制 | Plugin System\n\nTransform 阶段支持插件，用于：\n\n- 覆盖某些 HTML 标签的解析方式\n- 插入自定义语义节点\n- 扩展样式或结构处理逻辑\n\n插件以 **pipeline** 形式执行，不影响核心逻辑的稳定性。\n\n## 📖 API 文档 | API Reference\n\n### HTMLRenderer Component\n\n主渲染组件，用于将 HTML 字符串渲染为 Lynx 组件。\n\n```tsx\ninterface HTMLRendererProps {\n  html: string;                    // 要渲染的 HTML 字符串（必填）\n  removeAllClass?: boolean;         // 是否删除所有 class 属性（默认：true）\n  removeAllStyle?: boolean;         // 是否删除所有 style 属性（默认：false）\n  styleMode?: 'inline' | 'css-class';  // 样式模式（默认：'inline'）\n  rootClassName?: string;           // CSS类模式下的根容器类名（默认：'lynx-html-renderer'）\n}\n```\n\n**样式模式说明：**\n\n- `'inline'`（默认）- 所有样式作为内联样式应用\n- `'css-class'` - TAG_MAP 的 defaultStyle 通过 CSS 类应用，HTML 的 style 属性仍为内联样式\n\n### TransformOptions\n\nHTML 转换选项，用于控制转换行为。\n\n```tsx\ninterface TransformOptions {\n  removeAllClass?: boolean;   // 是否删除所有 HTML 的 class 属性，默认为 true\n  removeAllStyle?: boolean;   // 是否删除所有 HTML 的 style 属性，默认为 false\n  styleMode?: 'inline' | 'css-class';  // 样式模式\n  rootClassName?: string;     // CSS类模式下的根容器类名\n}\n```\n\n### CSS 工具函数\n\n#### generateCSS\n\n生成完整的 CSS 字符串。\n\n```tsx\nimport { generateCSS } from 'lynx-html-renderer';\n\n// 使用默认根类名\nconst css = generateCSS();\n\n// 使用自定义根类名\nconst customCSS = generateCSS('my-app');\n```\n\n#### getClassNameForTag\n\n获取 HTML 标签对应的 CSS 类名。\n\n```tsx\nimport { getClassNameForTag } from 'lynx-html-renderer';\n\ngetClassNameForTag('p');    // =\u003e 'lhr-p'\ngetClassNameForTag('h1');   // =\u003e 'lhr-h1'\ngetClassNameForTag('div');  // =\u003e 'lhr-div'\ngetClassNameForTag('img');  // =\u003e null (无默认样式)\n```\n\n---\n\n## 🛠 使用场景 | Use Cases\n\n- 内容管理系统（CMS）页面渲染\n- 富文本展示（不依赖 WebView）\n- 多端统一内容渲染\n\n---\n\n## 🙌 贡献 | Contributing\n\n欢迎 issue、讨论与 PR。\n\n本项目更关注 **架构正确性与可维护性**，而非一次性功能堆叠。\n\nContributions, issues, and discussions are welcome.\n\n---\n\n\u003e This project is designed as a **long-term maintainable HTML-to-Native rendering pipeline**, not a one-off rich text solution.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyourtion%2Flynx-html-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyourtion%2Flynx-html-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyourtion%2Flynx-html-renderer/lists"}