预览在浏览器，
标签在编辑器。
想看效果要切到浏览器刷新；想改一句话，又得在成片的标签里找到它在哪一行。
Obsidian 桌面版插件 · v2.1.0
在 Obsidian 里， 直接改网页。
打开库里的 .html 文件，看到的就是渲染好的页面。点一下文字、链接或图片，在侧栏里改；保存时只更新改过的那段源码，其余格式原样保留。
免费开源 桌面版 1.7.2+ 支持 .html 与 .htm
为什么用它
看页面和改源码，放在同一个窗口里。
以前要在浏览器里看效果、在编辑器里找标签。HTML Atelier 把渲染好的页面和对应的源码放进 Obsidian 的同一个窗口。
预览在浏览器，
看到的就是页面，
点哪里改哪里。
页面直接显示在 Obsidian 的主工作区。点选标题、正文、链接或图片，在侧栏里修改，预览随输入更新。
可视化编辑只处理页面文字、链接和图片属性，不能调整布局；改 CSS 或 HTML 结构请切到源码模式。
交互演示
不用安装，先在这里试一试。
点演示页面里的标题、段落或图片，侧栏会出现对应的编辑表单。可以改字、切换模式、查看源码；这里的操作不会读写你的文件。
交互原型
可以先点一下标题
周末手冲笔记 · 第 3 期
一杯好咖啡的诞生
从一颗生豆到杯中的风味，要经过选豆、烘焙、研磨与萃取。这份笔记把每一步的要点记下来，下次照着做就好。
选豆：风味从产地开始
咖啡豆是一种农产品，产地的海拔、气候和处理方式，决定了它最初的味道。先从三个产区开始，找到自己喜欢的方向。
耶加雪菲
花香与柑橘调明亮，酸质干净，像一杯温热的茉莉花茶。
水洗 · 浅烘慧兰
焦糖与坚果的甜感扎实，酸甜平衡，适合每天一杯。
水洗 · 中烘保山小粒
红糖、可可与淡淡的果干，醇厚温润，是家门口的好豆子。
日晒 · 中深烘烘焙：决定一杯咖啡的性格
同一支豆子，烘焙程度不同，喝起来判若两杯。浅烘保留更多果酸与花香，深烘则带来可可、焦糖与更厚的醇度。
浅烘 — 明亮中烘 — 平衡深烘 — 醇厚
研磨：粗细与新鲜
豆子磨开后，香气在十几分钟内就会大量散失，最好冲之前现磨。另外，烘焙后的第 5 到 14 天通常是风味最好的时候。
手冲建议中细研磨，颗粒大约像细砂糖。喝到苦涩就调粗一格，淡而发酸就调细一格。
萃取：手冲四步
水温越高，萃取越快。浅烘豆可以用 92–94 °C，深烘豆降到 88–90 °C 会更稳。
- 温杯湿纸用热水冲湿滤纸，去掉纸味，顺便温热分享壶。
- 闷蒸 30 秒注入粉重两倍的水，让咖啡粉充分排气、均匀吸水。
- 分段注水以画圈的方式慢慢注水，保持水位平稳，分两到三段完成。
- 2 分 30 秒完成总时间控制在 2:30 左右，摇匀后就可以享用了。
| 参数 | 推荐 | 备注 |
|---|---|---|
| 粉量 | 15 g | 约一人份 |
| 水量 | 225 ml | 粉水比 1 : 15 |
| 水温 | 92 °C | 浅烘可提高到 94 °C |
| 研磨 | 中细 | 类似细砂糖 |
| 时间 | 2:30 | 含 30 秒闷蒸 |
好咖啡没有标准答案。记下每一次的参数和感受，下一杯就会更接近你喜欢的味道。—— 写给下个周末的自己
无未保存更改
草稿已备份
在真实插件里，未保存的修改会自动备份为草稿，点保存才写回文件。切到「源码」或「分栏」可以看到整份文件。
功能
从预览到保存，都在 Obsidian 里完成。
四种视图模式、侧栏工作台、草稿备份和笔记嵌入。打开、修改、查找、保存一份 HTML，不用在浏览器、编辑器和文件管理器之间来回切换。
只更新改过的那一段源码
在页面上改了一句话，源码里只有对应的那段会变。其余标签、属性、注释、缩进、换行和实体写法都保持原样，不会重新格式化整份文件。
预览、编辑、源码、分栏
阅读用预览，改字用编辑，写 HTML 用源码，对照着改用分栏。源码视图带行号，可以开启自动换行。
侧栏工作台
编辑、大纲、搜索、修改、资源五个面板在同一列。搜索可以替换、区分大小写；「修改」面板可以对照和定位每处文字改动。
草稿与冲突
未保存的修改会自动备份，重启 Obsidian 后也能恢复。如果保存前文件在磁盘上被改过，插件会先提示，让你选择怎么处理。
把页面嵌进笔记
在笔记里写一个 html-atelier 代码块，就能显示已保存的页面，可以设置高度、宽度和锚点。页面改完保存后，点嵌入里的刷新按钮更新。
链接、锚点和分享
页内锚点和库内文件链接都能直接跳转。笔记里的 Wiki 链接或 Markdown 链接指向 HTML 文件时，会在插件视图里打开，并滚动到对应锚点。
工具栏菜单可以复制页面链接、小节链接或嵌入代码块，也可以在外部浏览器里打开当前页。
撤销与重做，历史默认 200 条
另存为时可调整相对引用
本地资源变化时自动刷新
选择库内图片或导入外部图片
工具栏可移到主视图
界面支持中文与英文
截图
在真实界面里看一眼。
下面的截图来自 HTML Atelier 2.1.0 桌面版，亮色主题。点击任意一张可以放大查看。
安全
默认只显示页面，
不运行页面脚本。
HTML 文件可以带脚本。HTML Atelier 默认只把页面显示出来；需要运行脚本时，要你在设置里手动开启。
01
默认
默认预览
页面在沙箱框架里打开，只负责把内容显示出来。
- 页面脚本与内联事件不运行
- 表单提交被阻止
- 内嵌框架被移除
02
可选
允许页面脚本
在设置里手动开启后，脚本运行在与应用隔离的跨源沙箱中。
- 无法直接访问应用、仓库或本地系统
- 页面静态引用的库内脚本、图片和字体会内联进预览
- 此时可视化编辑、阅读位置记忆、页内链接路由和嵌入自动高度不可用
03
可配置
网络与本地资源
远程图片、样式、字体和媒体默认允许加载，主预览和笔记嵌入共用这一项设置。
- 库内样式表和 @import 会内联进预览
- 相对路径按页面所在目录解析
- 侧栏可以查看缺失、远程和被拦截的资源
注意：开启页面脚本后，运行时动态创建的本地资源和跨文件模块导入不会被内联。需要完整运行脚本的页面，可以用外部浏览器打开，浏览器会照常执行页面脚本。
安装
两种安装方式。
插件已上架 Obsidian 社区插件市场，也可以从 GitHub Releases 手动安装。需要 Obsidian 桌面版 1.7.2 或更高版本。
推荐
从社区插件市场安装
在 Obsidian 里搜索安装，之后跟随商店更新。
- 1
打开 设置 → 第三方插件，进入社区插件市场。
- 2
搜索 HTML Atelier，点击安装。
- 3
启用插件，打开库里任意 .html 或 .htm 文件。
如果上面的按钮没有反应，请在 Obsidian 里直接搜索 HTML Atelier。
手动
手动安装
从 Releases 下载同一版本的三个文件。
把 main.js、manifest.json 和 styles.css 直接放进插件目录：
.obsidian/plugins/html-atelier/
├── main.js
├── manifest.json
└── styles.css三个文件直接放在 html-atelier 目录下，不要再套一层文件夹。放好后重启 Obsidian，再到「第三方插件」里启用。
Obsidian 桌面版 1.7.2+
.html 与 .htm
Windows · macOS · Linux
不支持移动端
如果另一个已启用的插件也接管 .html / .htm，请先停用它，避免文件类型注册冲突。
可视化编辑会把整份文件重新格式化吗？
不会。可视化修改只更新受影响的那段源码，没动过的标签、属性、注释、缩进、换行和实体写法都保持原样。要改页面结构，请切到源码模式。
页面里的 JavaScript 会执行吗？
默认不会。预览里页面脚本和内联事件都不运行，表单提交被阻止，内嵌框架会被移除。在设置里开启「允许页面脚本」后，脚本才会运行，并且运行在与应用隔离的跨源沙箱中。这个模式下可视化编辑、阅读位置记忆等功能不可用，只建议对可信文件开启。
支持手机或平板上的 Obsidian 吗？
不支持。HTML Atelier 仅支持 Obsidian 桌面版 1.7.2 及以上，Windows、macOS 和 Linux 都可以使用。
会和别的 HTML 插件冲突吗？
如果另一个已启用的插件也接管 .html 或 .htm 文件，两者会在文件类型注册上冲突。请先停用那个插件，再用 HTML Atelier 打开页面。
草稿备份存在哪里？卸载前要注意什么？
默认存放在 .obsidian/plugins/html-atelier/drafts/，包含原始 HTML 和编辑后的内容。如果同步工具会同步插件目录，这些备份也会被同步。删除插件目录前，请先保存需要保留的草稿。
怎么把 HTML 页面嵌进笔记？保存后嵌入没更新？
在笔记里写一个 html-atelier 代码块：
```html-atelier
path: "页面/一杯好咖啡的诞生.html"
height: auto
anchor: brew
toolbar: false
```嵌入读取的是已保存文件，不会显示当前未保存的草稿。保存修改后，点嵌入里的刷新按钮重新载入。
远程图片和字体会加载吗？可以关吗？
远程图片、样式、字体和媒体默认允许加载，可以在设置里统一关闭，主预览和笔记嵌入都会生效。库内通过 <link rel="stylesheet"> 和 CSS @import 引用的样式表会内联到预览中。
可视化编辑能改 CSS 和页面结构吗？
不能。可视化编辑只覆盖页面文字、链接文字与地址、图片地址和替代文本。CSS、HTML 结构、表单字段值，以及 SVG 等排除元素内的文字，请用源码模式修改。开启「允许页面脚本」时，可视化编辑也不可用。
开始
在 Obsidian 里打开你的第一份 .html。
装好插件，打开库里的 .html 文件，切到「编辑」，点一段文字试试。