docs: update canary rendering raw HTML page

marvinhagemeister · marvinhagemeister · commit c84b09704def · 2025-07-18T18:32:10.000+02:00
diff --git a/docs/canary/examples/rendering-raw-html.md b/docs/canary/examples/rendering-raw-html.md
@@ -0,0 +1,32 @@
+---
+description: |
+  How to render raw HTML in Fresh.
+---
+
+Text content in Fresh is always escaped, whether serverside rendered or rendered
+in islands. While this generally desired, it can create issues in certain
+situations.
+
+To address this you can render raw HTML via Preact's `dangerouslySetInnerHTML`
+prop:
+
+```tsx
+<div dangerouslySetInnerHTML={{ __html: "<h1>This is raw HTML</h1>" }} />;
+```
+
+This will output:
+
+```html
+<div>
+  <h1>This is raw HTML</h1>
+</div>
+```
+
+A common use case for rendering raw HTML is syntax highlighting code blocks or
+rendering markdown.
+
+> [warn]: Setting arbitrary HTML can be dangerous, hence the
+> `dangerouslySetInnerHTML` naming. Make sure you trust the source. Rendering
+> user-supplied HTML to the DOM makes your site vulnerable to cross- site
+> scripting. The markup must first be sanitizied, or better yet, something you
+> trust.
diff --git a/docs/toc.ts b/docs/toc.ts
@@ -82,7 +82,7 @@ const toc: RawTableOfContents = {
           ["modifying-the-head", "Modifying the <head>", "link:latest"],
           ["creating-a-crud-api", "Creating a CRUD API", "link:latest"],
           ["rendering-markdown", "Rendering markdown", "link:latest"],
-          ["rendering-raw-html", "Rendering raw HTML", "link:latest"],
+          ["rendering-raw-html", "Rendering raw HTML", "link:canary"],
           [
             "sharing-state-between-islands",
             "Sharing state between islands",

Original file line number	Diff line number	Diff line change
`@@ -82,7 +82,7 @@ const toc: RawTableOfContents = {`
`82`	`82`	`["modifying-the-head", "Modifying the <head>", "link:latest"],`
`83`	`83`	`["creating-a-crud-api", "Creating a CRUD API", "link:latest"],`
`84`	`84`	`["rendering-markdown", "Rendering markdown", "link:latest"],`
`85`		`- ["rendering-raw-html", "Rendering raw HTML", "link:latest"],`
	`85`	`+ ["rendering-raw-html", "Rendering raw HTML", "link:canary"],`
`86`	`86`	`[`
`87`	`87`	`"sharing-state-between-islands",`
`88`	`88`	`"Sharing state between islands",`