SiYuan HTML块嵌入手把手教程三步在笔记里插卡片和拼音【免费下载链接】siyuanAn open-source, privacy-first, self-hosted knowledge workspace where humans and AI agents work together 开源、隐私优先、自托管的知识工作空间让人与智能体在此协作项目地址: https://gitcode.com/GitHub_Trending/si/siyuan用纯 Markdown 写笔记时经常卡在一些小需求上想给生僻词加个拼音注音、想把一段重点内容做成带边框的卡片纯文本标记根本做不到。思源笔记SiYuan的 HTML 块嵌入功能就是为这类场景准备的——在笔记里写一小段 HTML编辑器会把它当成一个独立内容块渲染出来。跟着本文操作10 分钟内你就能写出第一个 HTML 块并知道它的安全边界在哪里。三步写出第一个 HTML 块新建一篇文档直接输入三对括号加尖括号开始的内容(((divruby你rtnǐ/rt 好rthǎo/rt 世rtshì/rt 界rtjiè/rt /ruby/div)))要点HTML 块用((( ... )))包住成对括号缺一不可。这段代码来自官方用户指南里的标准示例渲染出来就是带拼音注音的你好 世界。上面这张是 SiYuan 编辑器实际渲染笔记的界面来自仓库自带截图可以看到块级内容、右侧引用标记与面包屑导航都正常工作HTML 块插在哪里都不会打断这种结构。做点更实用的把重点段落做成高亮卡片效果在长文档里给必须记住的一段话加上背景色和圆角边框一眼定位。最短做法把下面这段粘进 HTML 块即可改文字和颜色都能即时看到效果(((div stylebackground:#eef4ff;padding:12px;border-left:4px solid #3f78c8;border-radius:6px;这段是卡片改 style 就能换配色/div)))嵌入外部页面 iframe效果把第三方可嵌入页面在线图表、地图等直接放进笔记。写法是标准的iframe src地址 width100% height300/iframe同样用三对括号包住。为什么它能直接生效、又为什么你的script可能不跑官方用户指南明确写了使用 HTML 块时默认会对其中的代码进行安全过滤如果不需要过滤可以在设置里打开设置-常规中的允许执行 HTML 块内脚本但请确认代码安全后再开启以免遭遇跨站脚本攻击XSS。也就是说默认状态下脚本会被过滤样式和结构类 HTMLdiv、ruby、iframe则正常渲染这就是能显示但不执行的原因。它是怎么被渲染成一块内容的源码层面嵌入内容会被包进一个带data-id的容器 divhtml div classprotyle-wysiwyg__embed contenteditable="false">【免费下载链接】siyuanAn open-source, privacy-first, self-hosted knowledge workspace where humans and AI agents work together 开源、隐私优先、自托管的知识工作空间让人与智能体在此协作项目地址: https://gitcode.com/GitHub_Trending/si/siyuan创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 SiYuan HTML块嵌入手把手教程：三步在笔记里插卡片和拼音
SiYuan HTML块嵌入手把手教程三步在笔记里插卡片和拼音【免费下载链接】siyuanAn open-source, privacy-first, self-hosted knowledge workspace where humans and AI agents work together 开源、隐私优先、自托管的知识工作空间让人与智能体在此协作项目地址: https://gitcode.com/GitHub_Trending/si/siyuan用纯 Markdown 写笔记时经常卡在一些小需求上想给生僻词加个拼音注音、想把一段重点内容做成带边框的卡片纯文本标记根本做不到。思源笔记SiYuan的 HTML 块嵌入功能就是为这类场景准备的——在笔记里写一小段 HTML编辑器会把它当成一个独立内容块渲染出来。跟着本文操作10 分钟内你就能写出第一个 HTML 块并知道它的安全边界在哪里。三步写出第一个 HTML 块新建一篇文档直接输入三对括号加尖括号开始的内容(((divruby你rtnǐ/rt 好rthǎo/rt 世rtshì/rt 界rtjiè/rt /ruby/div)))要点HTML 块用((( ... )))包住成对括号缺一不可。这段代码来自官方用户指南里的标准示例渲染出来就是带拼音注音的你好 世界。上面这张是 SiYuan 编辑器实际渲染笔记的界面来自仓库自带截图可以看到块级内容、右侧引用标记与面包屑导航都正常工作HTML 块插在哪里都不会打断这种结构。做点更实用的把重点段落做成高亮卡片效果在长文档里给必须记住的一段话加上背景色和圆角边框一眼定位。最短做法把下面这段粘进 HTML 块即可改文字和颜色都能即时看到效果(((div stylebackground:#eef4ff;padding:12px;border-left:4px solid #3f78c8;border-radius:6px;这段是卡片改 style 就能换配色/div)))嵌入外部页面 iframe效果把第三方可嵌入页面在线图表、地图等直接放进笔记。写法是标准的iframe src地址 width100% height300/iframe同样用三对括号包住。为什么它能直接生效、又为什么你的script可能不跑官方用户指南明确写了使用 HTML 块时默认会对其中的代码进行安全过滤如果不需要过滤可以在设置里打开设置-常规中的允许执行 HTML 块内脚本但请确认代码安全后再开启以免遭遇跨站脚本攻击XSS。也就是说默认状态下脚本会被过滤样式和结构类 HTMLdiv、ruby、iframe则正常渲染这就是能显示但不执行的原因。它是怎么被渲染成一块内容的源码层面嵌入内容会被包进一个带data-id的容器 divhtml div classprotyle-wysiwyg__embed contenteditable="false">【免费下载链接】siyuanAn open-source, privacy-first, self-hosted knowledge workspace where humans and AI agents work together 开源、隐私优先、自托管的知识工作空间让人与智能体在此协作项目地址: https://gitcode.com/GitHub_Trending/si/siyuan创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考