使用 iframe 的 srcdoc 属性可在 Logseq 中实现 HTML+CSS 的“伪实时”渲染预览，结合代码高亮与文字说明形成“代码→效果”对照，需开启开发者模式并允许 unsafe 内容，JavaScript 不执行，仅支持静态展示。
在 Logseq 中实现 HTML 和 CSS 的实时渲染演示，虽然原生不支持直接运行可交互的代码块，但你可以通过一些技巧展示 HTML+CSS 效果，让页面看起来像“实时渲染”的演示块。
使用 iframe 模拟实时预览
Logseq 支持内嵌 iframe（需开启开发者模式并允许 unsafe 内容），你可以将 HTML+CSS 代码封装成一个本地或远程的页面，然后用 iframe 引入预览效果。
示例：
<iframe srcdoc=" <!DOCTYPE html> <html> <head> <style> .demo-box { width: 100px; height: 100px; background: linear-gradient(45deg, #ff6b6b, #51cf66); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-family: sans-serif; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } </style> </head> <body style='margin:0; padding:20px; background:#f8f9fa;'> <div class='demo-box'>Hello</div> </body> </html> " width="100%" height="150" style="border:none;"> </iframe>这样就能在 Logseq 页面中看到一个带有渐变色的小方块，实现“伪实时”渲染效果。
立即学习“前端免费学习笔记（深入）”；
结合代码块与视觉说明
即使不能完全交互，你也可以通过排版增强可读性：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 使用三个反引号 + html 或 css 标注语言类型，让代码高亮
- 紧接其后插入 iframe 预览或截图，形成“代码 → 效果”对照
- 添加文字说明解释关键样式逻辑
例如：
```htmlHello
```
.demo-box {
width: 100px;
height: 100px;
background: linear-gradient(45deg, #ff6b6b, #51cf66);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}上面代码会生成一个居中带文字的彩色方块。你可以在本地测试后，把效果截图贴在后面，或者用 srcdoc 写进 iframe 实时展示。
注意事项与限制
Logseq 出于安全考虑，默认禁用脚本执行和部分 HTML 功能：
- JavaScript 不会被执行，只能展示静态 HTML+CSS
- iframe 需要启用“开发者模式”并在设置中允许 unsafe 内容
- srcdoc 是最实用的方式，无需外部服务器
- 复杂布局可能因容器宽度或字体差异显示异常
基本上就这些方法。虽然不是真正的“编辑即可见”环境，但足以满足笔记中演示简单 HTML+CSS 效果的需求。关键是利用好 srcdoc iframe 和清晰的排版结构。不复杂但容易忽略细节。
