md-render

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Markdown Renderer

Markdown 渲染工具

Render markdown files as beautiful dark-mode HTML and open them in the browser. Designed for viewing agent-generated documents (design docs, plans, reports).

将Markdown文件渲染为美观的深色模式HTML并在浏览器中打开。专为查看Agent生成的文档（设计文档、计划、报告）而设计。

Quick Reference

快速参考

Situation	Action
User asks to render/preview markdown	Run `md-render <file>`
User wants HTML output saved	Run `md-render <file> -o output.html`
User wants to customize styling	Edit `~/.config/agent-skills/md-render/config.json`
User asks to pipe markdown	`echo "# Title" \| md-render -`

场景	操作
用户要求渲染/预览Markdown	运行 `md-render <file>`
用户希望保存HTML输出	运行 `md-render <file> -o output.html`
用户想要自定义样式	编辑 `~/.config/agent-skills/md-render/config.json`
用户要求管道传输Markdown	`echo "# Title" \| md-render -`

CLI Reference

CLI 参考

Command	Description
`md-render file.md`	Render and open in browser
`md-render - < file.md`	Render from stdin
`md-render file.md -o out.html`	Save HTML to file
`md-render file.md --no-open`	Generate HTML without opening browser
`md-render -c path.json file.md`	Use alternate config
`md-render --help`	Show usage

Exit codes: 0 = success, 1 = error

命令	说明
`md-render file.md`	渲染并在浏览器中打开
`md-render - < file.md`	从标准输入渲染
`md-render file.md -o out.html`	将HTML保存到文件
`md-render file.md --no-open`	生成HTML但不打开浏览器
`md-render -c path.json file.md`	使用备用配置
`md-render --help`	显示使用说明

退出代码： 0 = 成功，1 = 错误

Rendering Features

渲染特性

Dark-mode aesthetic with configurable colors, fonts, and sizing
Collapsible table of contents (inline and slide-out panel)
Syntax-highlighted code blocks with copy-to-clipboard button
Copy full markdown source button (top-right)
Clickable heading anchors (hover to reveal)
Mermaid diagram rendering (flowcharts, sequence diagrams, state diagrams, pie charts)
Task list checkboxes, footnotes, ==highlights==, sub~~script~~/super^script^
Emoji shortcodes (:rocket: :white_check_mark:)
Custom attributes via
```
{#id .class}
```
Responsive layout
Self-contained HTML (mermaid uses CDN when enabled)

深色模式外观，支持配置颜色、字体和尺寸
可折叠目录（内联和滑出面板）
带复制到剪贴板按钮的语法高亮代码块
复制完整Markdown源文件按钮（右上角）
可点击的标题锚点（悬停显示）
Mermaid图表渲染（流程图、序列图、状态图、饼图）
任务列表复选框、脚注、==高亮文本==、下标/上^标^
表情符号短代码(:rocket: :white_check_mark:)
通过
```
{#id .class}
```
设置自定义属性
响应式布局
自包含HTML（启用Mermaid时使用CDN）

Configuration

配置

Config location:

~/.config/agent-skills/md-render/config.json

Created automatically on first run from defaults. Edit to customize:

theme — colors, fonts, sizing, max-width
features — toggle toc, syntax highlighting, heading anchors, mermaid, browser open

配置文件位置：

~/.config/agent-skills/md-render/config.json

首次运行时会自动从默认值创建。编辑以自定义：

theme — 颜色、字体、尺寸、最大宽度
features — 切换目录、语法高亮、标题锚点、Mermaid、浏览器打开