使用 iframe 的 srcdoc 属性可在 Logseq 中实现 HTML+CSS 的“伪实时”渲染预览,结合代码高亮与文字说明形成“代码→效果”对照,需开启开发者模式并允许 unsafe 内容,JavaScript 不执行,仅支持静态展示。
在 Logseq 中实现 HTML 和 CSS 的实时渲染演示,虽然原生不支持直接运行可交互的代码块,但你可以通过一些技巧展示 HTML+CSS 效果,让页面看起来像“实时渲染”的演示块。
Logseq 支持内嵌 iframe(需开启开发者模式并允许 unsafe 内容),你可以将 HTML+CSS 代码封装成一个本地或远程的页面,然后用 iframe 引入预览效果。
示例:
这样就能在 Logseq 页面中看到一个带有渐变色的小方块,实现“伪实时”渲染效果。
即使不能完全交互,你也可以通过排版增强可读性:
例如:
```html Hello ```.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 功能:
基本上就这些方法。虽然不是真正的“编辑即可见”环境,但足以满足笔记中
演示简单 HTML+CSS 效果的需求。关键是利用好 srcdoc iframe 和清晰的排版结构。不复杂但容易忽略细节。