{"id":"52f8173e-4caa-4192-be3f-fed8cf5d998c","shortId":"hUNWWe","kind":"skill","title":"sn-md-to-html-report","tagline":"将 Markdown 文档转换为美观、舒适、结构清晰、可直接打开的 HTML 长篇报告。适用于把 .md 文件转成 HTML、统一研究报告/行业报告/调研文档版式、生成可离线分享的单文件网页报告、嵌入或校验本地图片、修复 Markdown 表格分隔符导致的错列问题，或优化已有 HTML 报告的阅读留白、图片呈现、目录导航、表格响应式和打印样式。","description":"# Markdown 转 HTML 报告\n\n## 默认目标\n\n生成“长篇研究报告阅读版”HTML：正文舒展、图片自然插入、表格清晰、目录可用、可离线打开。优先保持内容可信和阅读舒服，不做营销页、不做炫技页面。\n\n## 推荐路径\n\n优先使用内置脚本生成稳定结果：\n\n```bash\npython3 /path/to/sn-md-to-html-report/scripts/render_report.py input.md output.html\n```\n\n常用参数：\n\n- `--embed-images`：将本地图片嵌入 HTML，适合单文件分享。默认开启。\n- `--no-embed-images`：保留相对图片路径，适合文件夹整体发布。\n- `--with-js`：加入阅读进度、目录高亮、返回顶部等轻量交互。\n- `--keep-inline-toc`：保留 Markdown 正文中已有的目录；默认会移除正文目录，避免和侧边栏目录重复。\n- `--mermaid-source auto|cdn|local|none`：渲染 Markdown 中的 Mermaid 代码块。默认 `auto`，检测到 ```mermaid 代码块时使用 CDN；`local` 会引用输出 HTML 同目录下的 `mermaid.min.js`；`none` 保留为普通代码块。\n- `--title-style comfortable`：默认舒适报告模板。\n\n生成后运行图片检查：\n\n```bash\npython3 /path/to/sn-md-to-html-report/scripts/check_image_refs.py output.html\n```\n\n当输出使用 `--embed-images` 时，检查结果中的本地图片引用数通常为 0，这是正常的。\n\n## 工作流程\n\n1. 确定输入 Markdown 和输出 HTML。\n   - 用户只给输入路径时，在同目录生成同名 `.html`。\n   - 若同名 HTML 已存在，优先换新文件名，除非用户明确要求覆盖。\n2. 转换前检查 Markdown。\n   - 以 Markdown 所在目录作为相对图片基准。\n   - 将误用的全角表格竖线 `｜` 修正为半角 `|`，避免表格错列。\n   - 对“说明文字：”后紧跟 `-`、`*` 或数字编号列表但中间缺空行的常见写法，转换前补空行，让分点输出渲染为真正列表。\n   - 如果 Markdown 已有 `## 目录` 且内容是章节锚点列表，默认从正文中移除；侧边栏目录已经提供导航，正文目录会重复占空间。\n   - 保留原文内容，不总结、不改写、不新增事实。\n3. 生成完整 HTML5。\n   - CSS 内联到 `<style>`，不依赖 CDN、在线字体、外部 CSS。\n   - 默认不需要 JavaScript；只有用户想要阅读进度、目录高亮、返回顶部时加少量原生 JS。\n   - Markdown 中的 ```mermaid 代码块会转换为 Mermaid 图表容器；如需完全离线分享，使用 `--mermaid-source local` 并将 `mermaid.min.js` 放在输出 HTML 同目录。\n   - 图片默认嵌入为 `data:image/...`，让 HTML 单文件可独立打开。\n4. 自检输出。\n   - 检查标题、目录、表格数量、图片数量是否与源文档大体一致。\n   - 检查宽表在移动端可横向滚动，图片不撑破页面。\n   - 检查 HTML 属性、闭合标签、目录锚点和 CSS 语法。\n\n## 视觉原则\n\n从这次效果中沉淀的默认偏好：\n\n- 页面像“干净的研究报告”，不是后台表格页，也不是营销落地页。\n- 使用浅灰页面背景和白色正文纸张区，正文有明确边界但不过度卡片化。\n- 桌面端左侧使用粘性目录，正文在右侧；移动端目录放到正文上方或可折叠。\n- 正文中已有的 Markdown 目录默认不保留，除非用户明确需要正文目录或使用 `--keep-inline-toc`。\n- H1 可以使用克制的蓝绿渐变标题区，正文标题保持清晰层级。\n- 正文留白要舒适：段落、表格、图片之间要让读者有停顿。\n- 图片作为图表节点自然出现：居中、最大宽度 100%、轻边框、轻阴影、与上下文留足间距。\n- 表格适合研究报告扫描：表头浅色或深色皆可，但要稳定、可横向滚动、单元格内边距足够。\n- 配色避免单一深蓝/紫色压满页面；推荐蓝绿主色配少量蓝色链接。\n\n## 舒适模板要点\n\n默认 CSS 应接近以下参数，可按内容微调：\n\n- `body`：`line-height: 1.75`，浅灰背景，系统中文字体。\n- `.layout`：桌面端 `grid-template-columns: minmax(220px, 280px) minmax(0, 1fr)`，最大宽度约 `1480px`，页面外边距约 `28px`。\n- `.toc-panel`：粘性、半透明白底、细边框、轻阴影；目录项字号约 `13px`。\n- `main`：白色正文容器、`8px` 圆角、细边框、轻阴影。\n- `article`：桌面端内边距约 `46px min(6vw, 76px) 68px`。\n- `h1`：标题区可用 `linear-gradient(135deg, #0f766e, #155e75, #1d4ed8)`，字号 `clamp(30px, 4vw, 52px)`。\n- `h2`：上方留足空间，顶部细分割线，字号 `clamp(22px, 2.3vw, 30px)`。\n- `h3`：字号约 `21px`，颜色比正文更深。\n- `blockquote`：用浅蓝绿背景和左侧强调线，可承载图注或注释。\n- `.table-scroll`：作为表格外层滚动容器，`width:100%`、`overflow-x:auto`、细边框和圆角。\n- `table`：保持原生 `display:table` 和 `width:100%`，不要用 `display:block`；短表要自然铺满正文宽度，宽表由 `.table-scroll` 横向滚动。\n- `img`：`display:block; max-width:100%; height:auto; margin:24px auto 8px; border:1px solid var(--line); border-radius:8px; box-shadow:0 12px 28px rgba(15,23,42,.08)`。\n\n## 图片规则\n\n- 默认嵌入本地图片，适合给别人发一个 HTML 文件。\n- 用户要求保持文件较小、图片可替换、或已有发布目录时，使用 `--no-embed-images` 保留相对路径。\n- 不要使用绝对本地路径写入 HTML，除非用户明确要求。\n- Markdown 图片后的引用块若明显是图注，保留为图下说明或 blockquote，不改变文字。\n- 缺失图片要在最终回复里说明路径。\n\n## 表格规则\n\n- 修复全角竖线 `｜`。\n- 修复列表前缺空行导致的 Markdown 分点不渲染问题；不要碰代码块里的内容。\n- 使用 Markdown 解析器或结构化转换，不用脆弱的字符串拼 HTML 表格。\n- 宽表必须可横向滚动，不能挤压正文，也不能在移动端撑破页面。\n- 短表不要在右侧留下大片空白；表格元素保持 `width:100%`，滚动只放在外层容器。\n- 不要为了美化删列、合并列或改写单元格内容。\n\n## 交互规则\n\n默认静态 HTML 已足够。只有在用户要求“导航更方便”“像原报告一样有进度条”或文档特别长时，加入 `--with-js`：\n\n- 阅读进度条。\n- 当前目录项高亮。\n- 返回顶部按钮。\n- 移动端目录展开/收起。\n\n所有交互使用原生 JavaScript，不依赖外部库；脚本要先检查元素存在。\n\n## 打印规则\n\n添加 `@media print`：\n\n- 隐藏目录、进度条、返回顶部等辅助 UI。\n- 页面背景改白，去掉阴影。\n- 尽量避免表格、图片、引用块被不自然截断。\n- 打印时标题不依赖深色渐变背景。\n\n## 质量自检\n\n生成后至少确认：\n\n- HTML 文件存在且可读。\n- `<table>`、`<img>` 数量与源文档大体一致。\n- 分点内容应渲染为 `<ul>/<ol>` 和 `<li>`，不要保留成带连字符的普通段落。\n- 表格应由 `.table-scroll` 包裹，`table` 自身不要使用 `display:block`。\n- 嵌入图片时包含 `data:image/`；非嵌入时 `check_image_refs.py` 无缺失图片。\n- 目录链接均为 `href=\"#...\"` 且目标 ID 存在。\n- 正文不应同时出现一份原始 Markdown 目录和一份侧边栏目录，除非用户明确要求保留。\n- 不出现破损标签、空 `href`、重复明显 ID、非法 `calc()` 或损坏 CSS。\n\n## 最终回复\n\n简洁说明：\n\n- 输出 HTML 路径。\n- 是否嵌入图片，或图片引用检查结果。\n- 修复了哪些格式问题，例如全角表格竖线。\n- 未能完成的校验，如有。","tags":["html","report","sensenova","skills","opensensenova","agent","agent-skills","ai-agents","ai-assistant","data-analysis","document-processing","office-automation"],"capabilities":["skill","source-opensensenova","skill-sn-md-to-html-report","topic-agent","topic-agent-skills","topic-ai-agents","topic-ai-assistant","topic-data-analysis","topic-document-processing","topic-office-automation","topic-presentation-slides"],"categories":["SenseNova-Skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/OpenSenseNova/SenseNova-Skills/sn-md-to-html-report","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add OpenSenseNova/SenseNova-Skills","source_repo":"https://github.com/OpenSenseNova/SenseNova-Skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 1627 github stars · SKILL.md body (3,900 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:53:05.289Z","embedding":null,"createdAt":"2026-05-15T06:53:10.411Z","updatedAt":"2026-05-18T18:53:05.289Z","lastSeenAt":"2026-05-18T18:53:05.289Z","tsv":"'/path/to/sn-md-to-html-report/scripts/check_image_refs.py':118 '/path/to/sn-md-to-html-report/scripts/render_report.py':53 '0':126 '1':129 '2':142 '3':169 'auto':88,98 'bash':51,116 'cdn':89,102 'comfort':113 'css':172 'emb':58,66,122 'embed-imag':57,121 'html':5,13,18,28,35,40,61,105,133,136,138 'html5':171 'imag':59,67,123 'inlin':78 'input.md':54 'js':72 'keep':77 'keep-inline-toc':76 'local':90,103 'markdown':8,25,33,81,93,131,144,146,158 'md':3,16 'mermaid':86,95,100 'mermaid-sourc':85 'mermaid.min.js':107 'no-embed-imag':64 'none':91,108 'output.html':55,119 'python3':52,117 'report':6 'skill' 'skill-sn-md-to-html-report' 'sn':2 'sn-md-to-html-report':1 'sourc':87 'source-opensensenova' 'style':112 'titl':111 'title-styl':110 'toc':79 'topic-agent' 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-assistant' 'topic-data-analysis' 'topic-document-processing' 'topic-office-automation' 'topic-presentation-slides' 'with-j':70 '不做炫技页面':48 '不做营销页':47 '不总结':166 '不改写':167 '不新增事实':168 '且内容是章节锚点列表':161 '中的':94 '代码块':96 '代码块时使用':101 '以':145 '优先使用内置脚本生成稳定结果':50 '优先保持内容可信和阅读舒服':46 '优先换新文件名':140 '会引用输出':104 '侧边栏目录已经提供导航':163 '保留':80 '保留为普通代码块':109 '保留原文内容':165 '保留相对图片路径':68 '修复':24 '修正为半角':149 '内联到':173 '加入阅读进度':73 '可直接打开的':12 '可离线打开':45 '同目录下的':106 '后紧跟':153 '和输出':132 '图片呈现':30 '图片自然插入':42 '在同目录生成同名':135 '如果':157 '对':151 '将':7 '将本地图片嵌入':60 '将误用的全角表格竖线':148 '嵌入或校验本地图片':23 '工作流程':128 '已存在':139 '已有':159 '常用参数':56 '当输出使用':120 '或优化已有':27 '或数字编号列表但中间缺空行的常见写法':154 '所在目录作为相对图片基准':147 '报告':36 '报告的阅读留白':29 '推荐路径':49 '文件转成':17 '文档转换为美观':9 '时':124 '检查结果中的本地图片引用数通常为':125 '检测到':99 '正文中已有的目录':82 '正文目录会重复占空间':164 '正文舒展':41 '渲染':92 '生成':38 '生成可离线分享的单文件网页报告':22 '生成后运行图片检查':115 '生成完整':170 '用户只给输入路径时':134 '目录':160 '目录可用':44 '目录导航':31 '目录高亮':74 '确定输入':130 '结构清晰':11 '统一研究报告':19 '舒适':10 '若同名':137 '行业报告':20 '表格分隔符导致的错列问题':26 '表格响应式和打印样式':32 '表格清晰':43 '让分点输出渲染为真正列表':156 '说明文字':152 '调研文档版式':21 '转':34 '转换前检查':143 '转换前补空行':155 '返回顶部等轻量交互':75 '这是正常的':127 '适合单文件分享':62 '适合文件夹整体发布':69 '适用于把':15 '避免和侧边栏目录重复':84 '避免表格错列':150 '长篇报告':14 '长篇研究报告阅读版':39 '除非用户明确要求覆盖':141 '默认':97 '默认从正文中移除':162 '默认会移除正文目录':83 '默认开启':63 '默认目标':37 '默认舒适报告模板':114","prices":[{"id":"601775fa-1e4e-4a80-b53e-29b62126b7ce","listingId":"52f8173e-4caa-4192-be3f-fed8cf5d998c","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"OpenSenseNova","category":"SenseNova-Skills","install_from":"skills.sh"},"createdAt":"2026-05-15T06:53:10.411Z"}],"sources":[{"listingId":"52f8173e-4caa-4192-be3f-fed8cf5d998c","source":"github","sourceId":"OpenSenseNova/SenseNova-Skills/sn-md-to-html-report","sourceUrl":"https://github.com/OpenSenseNova/SenseNova-Skills/tree/main/skills/sn-md-to-html-report","isPrimary":false,"firstSeenAt":"2026-05-15T06:53:10.411Z","lastSeenAt":"2026-05-18T18:53:05.289Z"}],"details":{"listingId":"52f8173e-4caa-4192-be3f-fed8cf5d998c","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"OpenSenseNova","slug":"sn-md-to-html-report","github":{"repo":"OpenSenseNova/SenseNova-Skills","stars":1627,"topics":["agent","agent-skills","ai-agents","ai-assistant","data-analysis","document-processing","office-automation","presentation-slides"],"license":"mit","html_url":"https://github.com/OpenSenseNova/SenseNova-Skills","pushed_at":"2026-05-15T04:43:37Z","description":"Modular SenseNova skills for building AI-powered office assistants and productivity workflows","skill_md_sha":"9d818066ee52be19ef84c9085fcfe5e42ef8aa59","skill_md_path":"skills/sn-md-to-html-report/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/OpenSenseNova/SenseNova-Skills/tree/main/skills/sn-md-to-html-report"},"layout":"multi","source":"github","category":"SenseNova-Skills","frontmatter":{"name":"sn-md-to-html-report","description":"将 Markdown 文档转换为美观、舒适、结构清晰、可直接打开的 HTML 长篇报告。适用于把 .md 文件转成 HTML、统一研究报告/行业报告/调研文档版式、生成可离线分享的单文件网页报告、嵌入或校验本地图片、修复 Markdown 表格分隔符导致的错列问题，或优化已有 HTML 报告的阅读留白、图片呈现、目录导航、表格响应式和打印样式。"},"skills_sh_url":"https://skills.sh/OpenSenseNova/SenseNova-Skills/sn-md-to-html-report"},"updatedAt":"2026-05-18T18:53:05.289Z"}}