Javascript AngularJS组件库代码段生成器？

我正试图建立一个自定义AngularJS指令库，其中显示活动功能组件及其下面用于生成该组件的代码段。我希望从一个共享html模式生成示例和代码段

我尝试构建一个将示例中div的内容作为字符串复制的指令，但在该指令运行时，组件指令已经消化并修改了DOM，这使得它不能很好地表示如何构建该组件

---

我不想使用codepen类型的解决方案，因为我希望一切都在我的服务器和我的控制之下，但我在如何显示AngularJS之前的示例代码片段方面还是一片空白。无需使用实时代码编辑器，只需复制代码片段即可。

旁注：我之所以要生成示例和来自同一源的代码片段，是为了防止它们在将来需要进行调整时失去同步。不确定您是如何处理这些问题的，但我认为，只要这些代码片段不嵌套在具有控制器的东西中，它就会像这样工作。