Javascript 如何将html/jsx标记作为文本嵌入静态网站

我计划在github页面上提供react组件库的文档

这些文档包括一些javascript，这些javascript将使用呈现实时编辑示例

由于react live需要通过应该显示在编辑器中的初始标记，因此我需要一种方便的方法将html标记以及jsx标记包含到我的静态网站中，以便我的js代码可以读取它来初始化react组件

因此，初始标记可以类似于：

<div>
  <p>Some random html markup.</p>
</div>

在我的js中：

const examples = document.querySelectorAll('script[data-name="react-example-code"]');

examples.forEach(example => {
  const code = example.innerHTML.trim();
  // do something with the code string
});

---

有人知道更好/更方便的方法吗？这样做有什么警告吗？

逃跑不是一种选择吗@安德烈·迈尔斯：那可能也行。谢谢你的提示。这也使我能够在占位符中显示代码。

<script type="text/html" data-name="live-example-code">
  <MyComponent />
</script>

const examples = document.querySelectorAll('script[data-name="react-example-code"]');

examples.forEach(example => {
  const code = example.innerHTML.trim();
  // do something with the code string
});