面向需要快速写说明文档、需求备忘、技术笔记的个人与小团队协作场景。常见痛点是:纯文本难读、富文本编辑器过重、写完还要另开工具看效果。本作品提供浏览器内「边写边看」的轻量写作台,适合产品说明、接口备注、交付文档草稿等场景。项目为前端作品演示,数据保存在本机浏览器,无需后端与账号体系。
点击空白处退出提示
面向需要快速写说明文档、需求备忘、技术笔记的个人与小团队协作场景。常见痛点是:纯文本难读、富文本编辑器过重、写完还要另开工具看效果。本作品提供浏览器内「边写边看」的轻量写作台,适合产品说明、接口备注、交付文档草稿等场景。项目为前端作品演示,数据保存在本机浏览器,无需后端与账号体系。
墨笺是一款纯前端 Markdown 写作工具,核心能力如下:
1. 双栏工作区:左侧 Markdown 编辑,右侧即时渲染预览。
2. 常用语法:标题、加粗、斜体、列表、引用、链接、行内代码、代码块。
3. 本地自动保存:内容写入 localStorage,刷新不丢。
4. 字数与阅读时长统计。
5. 一键复制正文、导出 .md 文件。
6. 载入示例文稿,方便演示验收。
7. 响应式:宽屏双栏,窄屏上下堆叠。
8. 快捷键:Ctrl/Cmd + S 保存标记,Ctrl/Cmd + E 导出。
采用原生 HTML + CSS + JavaScript,无框架、无构建,双击即可运行。
1. 自研轻量 Markdown 解析:按行处理代码块/标题/列表/引用/段落,再处理行内样式,预览前做 HTML 转义。
2. 监听输入实时刷新预览 DOM。
3. localStorage 防抖自动保存。
4. Blob 导出 .md,Clipboard API 复制正文。
5. Grid + 媒体查询做双栏与小屏适配。
个人职责:独立完成需求、页面、样式、交互、解析与本地持久化。本作品为前端能力展示,不含后端与数据库。



评论