Skip to content

Fresh 中的文本内容始终被转义,无论是服务器端渲染还是在 islands 中渲染。虽然这通常是期望的行为,但在某些情况下可能会造成问题。

要解决这个问题,您可以通过 Preact 的 dangerouslySetInnerHTML 属性渲染原始 HTML:

tsx
<div dangerouslySetInnerHTML={{ __html: "<h1>This is raw HTML</h1>" }} />;

这将输出:

html
<div>
  <h1>This is raw HTML</h1>
</div>

渲染原始 HTML 的常见用例是语法高亮代码块或渲染 markdown。

[warn]: 设置任意 HTML 可能很危险,因此命名为 dangerouslySetInnerHTML。确保您信任来源。将用户提供的 HTML 渲染到 DOM 会使您的站点容易受到跨站点脚本攻击。标记必须首先进行清理,或者更好的是,使用您信任的内容。