Auf dieser Seite

HTML

Markdown und die Komponenten decken das meiste ab, aber manchmal erledigt HTML es besser. Du kannst HTML direkt in deine Seiten schreiben:

HTML	Ergebnis
`<kbd>Strg</kbd> + <kbd>K</kbd>`	`Strg` + `K`
`H<sub>2</sub>O`	H₂O
`E = mc<sup>2</sup>`	E = mc²
`<mark>markiert</mark>`	markiert
`<abbr title="Statischer Seitengenerator">SSG</abbr>`	SSG

Tipp

Für einklappbare Abschnitte nimm Details statt <details>: Das ist kürzer und sieht aus wie der Rest der Seite.

#Videos und Einbettungen

Füge den Einbettungscode, den dir YouTube, Vimeo oder Figma geben, so ein, wie er ist:

<iframe src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ" title="Big Buck Bunny"
  allow="encrypted-media; picture-in-picture" allowfullscreen></iframe>

Einbettungen füllen die Breite der Seite im Format eines Videos, auch auf dem Handy, und laden erst, wenn Leser zu ihnen scrollen. Diese Dienste lassen sich einbetten:

Dienst	Adresse der Einbettung beginnt mit
YouTube	`https://www.youtube.com/embed/`, `https://www.youtube-nocookie.com/embed/`
Vimeo	`https://player.vimeo.com/video/`
Loom	`https://www.loom.com/embed/`
Figma	`https://www.figma.com/embed`, `https://embed.figma.com/`
CodePen, CodeSandbox, StackBlitz	`https://codepen.io/`, `https://codesandbox.io/`, `https://stackblitz.com/`
Google Maps	`https://www.google.com/maps/embed`

Frames aller anderen Seiten werden entfernt: Sie könnten ein gefälschtes Anmeldeformular in deiner Dokumentation zeigen.

Eigene Videos liegen wie Bilder neben der Seite und laufen mit <video>:

<video src="img/demo.mp4" poster="img/demo.png" controls muted playsinline></video>

Tipp

youtube-nocookie.com spielt dieselben Videos, ohne dass YouTube Cookies setzt, bevor Leser auf Play drücken.

#Was Clay entfernt

Dokumentation schreiben oft viele Menschen, auch von außerhalb. Damit eine Seite ihren Lesern nicht schaden kann, bereinigt Clay beim Build das HTML jeder Seite mit DOMPurify. Es entfernt:

<script>-Elemente und Event-Handler wie onclick oder onerror,
javascript:-Links,
Formulare und ihre Felder (<form>, <input>, <textarea>, <select>), die sich für Phishing nutzen ließen,
<style>-Elemente und style-Attribute, mit denen sich Inhalte über die Seite legen ließen,
Frames (<iframe>) anderer Seiten als der Einbettungen oben.

Alles andere, darunter Tabellen, Bilder, <details> und Formatierungen im Text, bleibt, wie du es geschrieben hast.

<p onclick="steal()">Text</p>   <!-- wird zu <p>Text</p> -->
<script>alert(1)</script>       <!-- entfernt -->

Hinweis

Hervorgehobener Code, Formeln und Komponenten behalten ihr Aussehen: Clay fügt ihre Styles selbst hinzu, nachdem dein HTML bereinigt ist.