如何在.ipynb笔记本中以Markdown单元格无代码显示HTML文件？

方案1：直接内嵌HTML内容 #

Jupyter的Markdown单元格原生支持解析HTML代码，你可以直接把要显示的HTML内容写到Markdown单元格里，运行后会自动渲染成可视化效果，不会显示原始代码。

比如在Markdown单元格里输入：

<div style="background: #e6f7ff; padding: 15px; border-left: 4px solid #1890ff;">
  <h4>内嵌HTML示例</h4>
  <p>这是通过Markdown单元格直接渲染的HTML内容</p>
  <ul>
    <li>支持所有标准HTML标签</li>
    <li>可以自定义样式</li>
  </ul>
</div>

运行单元格后，就能看到渲染好的带样式的内容，完全看不到这段HTML代码。

方案2：嵌入本地HTML文件 #

如果要显示单独的本地HTML文件，用<iframe>标签嵌入即可，同样写在Markdown单元格里：

假设你的HTML文件demo.html和.ipynb文件在同一个文件夹下，在Markdown单元格输入：

<iframe src="demo.html" width="100%" height="600px" frameborder="0"></iframe>

• width和height可以根据需求调整，设置成100%会占满单元格宽度
• frameborder="0"可以去掉iframe的边框，让显示更自然
• 如果HTML文件在子文件夹里，比如html_files/demo.html，就把src改成对应的相对路径就行

注意事项 #

• 确保HTML文件的相对路径正确，否则会加载失败
• 如果HTML文件依赖外部资源（比如本地CSS、JS文件），要保证这些资源的路径也能被正确访问到
• 部分远程部署的Jupyter环境可能对iframe有安全限制，本地运行的话基本没有问题

内容的提问来源于stack exchange，提问作者Altynbek Amirzhanov