Javascript 如何实现vscode live preview那样的预览缩略图

我在做基于编辑器的工作

我会制作一个现场预览功能。就像VisualStudioLive预览一样

我的客户需要一个功能，用户可以预览他们的工作画布像vs代码实时预览小图像

您可以在底部图像上看到红色框。但我猜不出如何实现预览功能

我只是想用iframe或者别的什么。但我无法说服这一点

---

有人知道吗？请帮帮我。

基本上，您只需要将内容镜像到另一个元素，该元素遵循与主内容相同的样式规则，但需要对其进行调整，使其更小。VisualStudio代码使用了web技术，您提到了使用iframe，所以我只能说，在这种情况下，CSS将是您最好的朋友

当编辑器中的内容更改时，更新迷你地图（VisualStudio代码将其称为迷你地图）

Visual studio代码的实现是可以找到的，它只是隐藏在许多电子样板之下，不幸的是，我不熟悉这个框架，所以我只能提供一个GitHub链接，链接到组成它们的小地图实现的文件