---
title: How to convert code samples to be "live"
slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live
translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live
---
<div>{{MDNSidebar}}</div><p class="summary">MDN besitzt ein "<a href="/en-US/docs/MDN/Contribute/Editor/Live_samples">live sample</a>"-System, bei dem die Ausgabe des angezeigten Codes direkt angezeigt wird. Allerdings gibt es noch viele Codebeispiele, die dieses System noch nicht nutzen und noch konvertiert werden müssen.</p>

<p><span class="seoSummary">Live-Beispiele, die dir direkt die Ausgabe anzeigen, machen Dokumentationen dynamischer und informativer. Der Leitfaden beschreibt, wie die "live"-Funktionalität zu bereits bestehenden Beispielen hinzugefügt werden kann.</span></p>

<ul>
 <li>Beispielabhängige Fähigkeiten in HTML, CSS und JavaScript</li>
 <li>Fähigkeit <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Tools/KumaScript">KumaScript</a> in Artikeln zu nutzen</li>
</ul>

<ol>
 <li><span class="hidden"> </span><span class="hidden"> </span>Wähle einen Artikel mit dem Tag "<a href="https://developer.mozilla.org/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a>" aus</li>
 <li>Konvertiere das Codebeispiels</li>
 <li>Lösche alle Bilder oder<span class="hidden"> </span> Texte, auf denen die Ausgabe gezeigt wird<span class="hidden"> </span></li>
</ol>

<dl>
 <dt><strong>Wo muss dies gemacht werden?</strong></dt>
 <dd>Bei Artikeln mit dem Tag "<a href="/en-US/docs/tag/NeedsLiveSample">NeedsLiveSample</a>".</dd>
 <dt><strong>Was musst du können um diese Aufgabe zu erledigen?</strong></dt>
 <dt><strong>Welche Schritte müssen<span class="hidden"> </span> unternommen werden?</strong></dt>
</dl>

<p>Für weitere Informationen um das Thema Erstellen und Bearbeiten von Live-Beispielen, schau dir <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Live_samples">Using the live sample system</a> an</p>