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

Question

我计划在github页面上为hugo提供反应组件库的文档。

文档包含一些javascript，可以使用react-live呈现实时编辑示例。

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

所以初始标记可以是：

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

或

<MyComponent>
    <MyOtherComponent color={'papayawhip'} />
</MyComponent>

将它们作为文本呈现在静态网站中的最佳方式是什么，以便浏览器忽略它们。

我已经使用这种方法将<script>标记放入type="text/html"并从我的js查询脚本标记innerHTML。

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

和我的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
});

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