当我们今天实施网站时，我们面临着许多需要照顾的事情。理想情况下，我们希望有一个快速、安全、可访问和公平的网站。同时，我们希望有一个互动的网站，有评论、投票、视频、代码实例等等。
我和一个朋友一起，去年推出了一个科技博客，我们正好碰到了这个问题。我们希望有一个简单的解决方案来嵌入HTML、CSS和JavaScript代码示例，但现有的解决方案往往包括跟踪、cookies、大量的功能或糟糕的性能。经过一些研究，我们意识到，我们必须建立一个替代方案。
让我们来看看。
Indiepen是一个隐私友好的、轻量级的、可访问的嵌入代码示例的解决方案。事实上，我们不设置任何cookie或跟踪!
开始吧
Indiepen可以预览每一个遵循非常简单惯例的网站。你需要提供一个具有以下文件结构的网站。
.
├── index.html
├── main.js
└── styles.css
用你喜欢的托管服务商（如GitHub Pages、Netlify或Vercel）部署代码示例，并复制URL。之后，进入我们的开始页，使用代码片段生成器。
生成的代码看起来像这样。
<iframe class="indiepen"
src="https://indiepen.tech/embed/?url=https%3A%2F%2Findiepen.tech%2Fexample%2F&tab=result"
style="width: 100%; overflow: hidden; display: block; border: 0;"
title="Indiepen Embed"
loading="lazy"
width="100%"
height="450">
</iframe>
你现在可以使用该代码段并将其整合到你的网站上。这就是了!你现在应该看到你的代码例子，并有一个编辑器来发现代码。
引擎盖下
现在听起来有点奇怪，但我们没有使用任何JavaScript框架，如React或Vue.js。它是纯粹的HTML、CSS和JavaScript，在语法高亮方面得到了Lea Verou的Prism.js的一些帮助。这些库对实现和维护复杂的网络应用非常有帮助，但在我们的案例中，我们只有三个文件需要获取并传递给Prism.js。
此外，我们在右上角有三个按钮，可以在HTML、CSS和JavaScript视图之间切换。通过引入一个UI框架，我们无法提供一个尺寸小于20kb的轻量级解决方案。对我们来说，这是一个很好的学习，即UI库在我们的日常业务中是很重要的，但我们应该仔细考虑它们，不要忘记好的老式的JavaScript。
最后的话
Indiepen是我们的第一个开源项目，我们非常高兴能与你分享我们的想法。我们希望得到反馈，并对公平的网络进行讨论。请在Twitter上与我联系，或在GitHub上查看该项目。
最后但并非最不重要的是，我想提及Indiepen的范围有限，我们希望通过设计使其保持简单。如果你需要处理更复杂的代码示例、CSS或JavaScript的预处理器，或者你想从一个分享你的想法的平台中获益，那么请考虑更复杂的解决方案，如CodePen或JSFiddle。
祝大家编码愉快!
