如何创建可切换多代码片段的Notion嵌入组件？

可用工具推荐 #

• CodePen Pro：能创建带多标签的代码集合，你可以把同功能的不同语言实现、不同算法版本分别放在不同标签里，生成嵌入链接后直接贴到Notion的嵌入块就行。Pro版成本比LeetCode Plus低，功能更聚焦在代码分享管理上，完全满足你的需求。
• JSFiddle Pro：和CodePen类似，支持多标签/多面板的代码分组，生成的嵌入链接直接适配Notion，Pro版还能管理私有片段，切换代码的体验很流畅。
• Notion原生表格组合（免费）：不想额外花钱的话，用Notion表格就行。建个表格，列设成「语言」「实现类型」「代码」，每行对应一个代码片段，在「代码」列插入Notion原生代码块。平时把表格折叠只留表头，需要切换时展开对应行查看，虽然不是单窗口切换，但胜在完全原生不用额外工具。

手动实现方案（无合适工具时） #

如果找不到满意的工具，自己动手做个静态页面也不难：

1. 用HTML写个带标签栏的页面，每个标签对应一个代码片段，用<pre><code>包裹代码，再引入Prism.js这类语法高亮库让代码带着色效果。
2. 加几行简单的JS逻辑，实现点击标签切换对应代码块的显示和隐藏。
3. 把这个静态页面传到免费静态托管平台，生成公开链接。
4. 在Notion里插入嵌入块，粘贴这个链接，就能在单窗口里切换同功能的不同代码片段了。

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