Obsidian 插件：HTML Blocks

概述

HTML Blocks插件总结

1. 主要功能：可在Obsidian笔记中直接渲染实时的HTML、CSS和JavaScript代码，无需创建单独的.html文件。支持嵌入外部HTML文件，还具备检查模式辅助查看代码与渲染元素对应关系。
2. 适用场景：适用于在笔记中插入自包含的小部件、图表、样式卡片、小型交互式演示等内容。
3. 核心特色：每个代码块在独立的Shadow DOM中渲染，样式与主题及其他代码块完全隔离，确保代码按编写原样渲染；各代码块有独立作用域，避免顶级变量冲突。
4. 使用建议：书写时使用html-block语言标签包裹代码块；在CSS中用:root或:host定位块容器；JavaScript内联脚本在隔离作用域运行；可将HTML存于单独文件后通过![[文件名.html]]嵌入；可将“Toggle Inspect Mode”命令绑定热键，方便使用检查模式。

讨论

若阁下有独到的见解或新颖的想法，诚邀您在文章下方留言，与大家共同探讨。