Markdown → 小红书风格竖版文字卡片图 纯前端 · 隐私安全 · 12+5 套模板 · 批量导出
| 特性 | 说明 |
|---|---|
| 🎨 12+5 套模板 | XHS-TextCard 12 套专业模板 + 轻量版 5 套极简风格 |
| ⚡ 纯前端运行 | 数据不上传服务器，隐私安全，零服务器成本 |
| 📱 小红书 3:4 竖图 | 标准 1242×1656/1080×1440，即生即用 |
| 📦 批量 ZIP 导出 | 多页卡片一键打包下载 |
| 📝 Markdown 语法 | 标题/列表/引用/代码块/数学公式 完整支持 |
| 🖼️ Canvas 像素级渲染 | 文字清晰锐利，字号/行高/间距随心调 |
| 🏷️ 品牌水印 | 自定义水印文字 + 社交账号签名 |
| 📐 智能分页 | 自动在段落间切分，支持 --- 手动分页 |
| 🔌 离线可用 | 轻量版 card-creator.html 不依赖网络 |
| 🤖 CLI 批量生产 | Node.js 脚本化，支持管道输入、定时任务 |
| 模板 | 风格描述 | 封面图 |
|---|---|---|
| 🎬 电影胶片 | 电影字幕风格，粗体大字 + 英文字幕衬底 | ✅ |
| 🌟 星光质感 | 深蓝星空背景，星光粒子，梦幻氛围 | ✅ |
| 📷 复古拍立得 | 相纸留白边框，手写体，怀旧色彩 | ✅ |
| 📋 效率笔记 | Notion 风格，干净卡片，信息层级清晰 | ✅ |
| 📖 书籍内页 | 纸质书排版，衬线字体，文艺气息 | ✅ |
| 🍎 苹果备忘录 | iOS 备忘录还原，横线纸 + 三色圆点 | ✅ |
| 🇨🇭 苏黎世工作室 | 瑞士平面设计风，几何分割，极简色彩 | ✅ |
| 📄 极简杂志 | 干净杂志排版，大留白，细分割线 | ✅ |
| 🌈 弥散极光 | 弥散渐变背景，柔和过渡，艺术感 | ✅ |
| 🌙 暗夜深思 | 深色背景 + 亮色标题强调，专注氛围 | ✅ |
| 🏢 大厂文档 | 企业文档风格，结构化排版 | ✅ |
| ⬜ 空白模板 | 自由定义全部参数 | — |
| 模板 | 说明 |
|---|---|
| 🧡 米白暖色 | 暖白底 + 红色装饰线，温润亲切 |
| 📝 苹果备忘录 | 横线纸 + 黄色三色圆点 |
| 🌙 暗色极简 | 深色底 + 金色强调 |
| 📜 做旧纸张 | 米黄旧纸纹理，衬线字体 |
| 📄 极简杂志 | 纯白 + 细分割线 + 大留白 |
# 方法 A: XHS-TextCard 编辑器（12 套模板，首选）
open xhs-textcard/editor.html
# 方法 B: 轻量版（离线可用，5 套极简风）
open card-creator.html
# 方法 C: 统一启动页
open index.html# 安装依赖
npm install
# 从文件生成
node generate.js input.md
# 指定主题
node generate.js input.md -t applenotes -o ./cards
# 管道输入
cat article.md | node generate.js -s -t warm
# 可用主题：notebook classic grid applenotes warmnode server.js
# → 浏览器打开 http://localhost:3456# 稻城亚丁 · 灵魂之旅
> 蓝色星球上最后一片净土
## 必游景点
### 仙乃日
海拔6032米，是三怙主神山之一。
### 央迈勇
海拔5958米，藏语意为"文殊菩萨"。
## 旅行贴士
1. 海拔较高，注意高原反应
2. 携带防晒用品和保暖衣物→ 用 XHS-TextCard 编辑器打开 → 选择模板 → 导出 PNG
#
> 生活不是等待风暴过去，
> 而是学会在雨中翩翩起舞。→ 适合用「电影胶片」或「极简杂志」模板
用户输入 (Markdown)
│
├─→ XHS-TextCard (CanvasRenderer + TextSplitter)
│ ├── 12 套主题模板 (TemplateDefinitions)
│ ├── Canvas 2D API 直接绘制
│ └── PNG / JPEG / ZIP 导出
│
├─→ card-creator.html
│ ├── marked.js 解析 Markdown
│ ├── DOM 渲染 → html2canvas 截图
│ └── 5 套 CSS 主题（离线可用）
│
└─→ generate.js (CLI)
├── Puppeteer 无头浏览器截图
├── HTML / CSS / 截图
└── 5 套主题、管道输入、定时任务
| 组件 | 用途 | 来源 |
|---|---|---|
| marked.js | Markdown → HTML | CDN |
| html2canvas | DOM → Canvas → PNG | CDN |
| Canvas 2D API | 像素级文字排版渲染 | 浏览器内置 |
| Puppeteer | Headless Chrome 截图 | npm |
| XHS-TextCard | 12 套 Canvas 模板 | GitHub |
- 所有渲染完全在浏览器本地完成，数据不上传任何服务器
- XHS-TextCard 为纯前端项目，无后端依赖
- CLI generate.js 使用本地 Chrome，无需联网
- 不收集任何用户数据，不埋点
text-card-generator/
├── index.html # 统一启动页
├── card-creator.html # 轻量在线版（离线可用）
├── xhs-textcard/ # XHS-TextCard 完整项目
│ ├── editor.html # 主编辑器入口
│ ├── index.html # 首页
│ ├── templates/ # 12 套模板 JSON
│ ├── js/ # Canvas 渲染引擎 + 分页器
│ └── css/ # 样式文件
├── generate.js # CLI 批量生成器
├── server.js # Web UI 服务端
├── template-card.html # CLI 模板文件
├── scripts/deploy.sh # 部署脚本
├── SKILL.md # Codex 技能定义
├── package.json # Node 依赖
└── README.md # 本文件
MIT License.
- XHS-TextCard © geekfoxcharlie
- card-creator.html, generate.js, server.js © bethel-mark
Made with ❤️ for the open source community