Überblick
Mit dem CodeSandbox-Block bettest du ein CodeSandbox-Projekt in eine Seite ein. Füge die URL des Projekts ein und verwende die Sandbox dort, wo du sie brauchst.
So kannst du ein Projekt zusammen mit einer technischen Notiz, einer Erklärung oder einer Sammlung von Beispielen zeigen. Über die Blockeinstellungen kannst du die verwendete URL ändern.
Wann du ihn nutzt
Zeige ein CodeSandbox-Projekt neben einer technischen Notiz oder Anleitung.
Verlinke eine Sandbox, die zu einem Codebeispiel oder einer Übung gehört.
Sammle mehrere CodeSandbox-Projekte auf einer Seite zu einem Thema.
Bette eine Sandbox in eine Projektübersicht ein, damit sie direkt beim Kontext steht.
Funktionen und Einstellungen
Einstellung
CodeSandbox-URL
Lege fest, welches CodeSandbox-Projekt eingebettet wird. Füge die URL des Projekts ein oder ändere sie, wenn du eine andere Sandbox anzeigen möchtest.
Eingebaut
Sandbox einbetten
Mit „Einbetten“ fügst du die angegebene CodeSandbox-URL als Sandbox in deine Seite ein.
Eingebaut
Sandbox öffnen
Verwende „Sandbox öffnen“, um das eingebettete Projekt zu öffnen.
Eingebaut
Link ändern
Mit „Link ändern“ kannst du die URL des eingebetteten Projekts anpassen.
So nutzt du ihn
CodeSandbox-Block einfügen
Füge den CodeSandbox-Block über die Einfügeauswahl deiner Seite hinzu.
Einstellungen öffnen
Öffne „CodeSandbox-Einstellungen“, um die Projekt-URL einzutragen.
URL einfügen
Füge die Adresse deines Projekts in „CodeSandbox-URL einfügen...“ ein.
Sandbox einbetten
Wähle „Einbetten“, um das Projekt in deiner Seite anzuzeigen.
Projekt bei Bedarf wechseln
Wähle „Link ändern“, wenn du stattdessen eine andere CodeSandbox-URL verwenden möchtest.
Wo er funktioniert
Auf jeder Seite
Im /-Menü
In Board-Karten
Andere Blöcke umwandeln
Eigenes Einstellungsfenster
Lara fügt ihn für dich ein
Beispiele
Codebeispiel erklären
Bette eine Sandbox neben einer Notiz ein, in der du ein Konzept oder einen Codeabschnitt erläuterst.
Übungsprojekt teilen
Zeige eine CodeSandbox, die zu einer Programmierübung oder einem Lernabschnitt gehört.
Projektübersicht ergänzen
Füge eine Sandbox in eine Projektseite ein, damit das passende CodeSandbox-Projekt zusammen mit den Notizen zu finden ist.
Tipps · Grenzen
Tipps
Prüfe die URL, bevor du die Sandbox einbettest, damit das gewünschte CodeSandbox-Projekt angezeigt wird.
Platziere die Sandbox in der Nähe der Notiz oder Anleitung, auf die sie sich bezieht.
Wenn du ein anderes Projekt zeigen möchtest, ändere den Link statt den übrigen Seiteninhalt anzupassen.
Grenzen
Der Block ist für CodeSandbox-Projekte gedacht und bettet keine beliebigen Webseiten ein.
Zum Einbetten eines Projekts benötigst du dessen CodeSandbox-URL.
Häufige Fragen
Wie bette ich CodeSandbox in eine Notiz ein?
Füge den CodeSandbox-Block über die Einfügeauswahl deiner Seite hinzu, trage die Projekt-URL in „CodeSandbox-Einstellungen“ ein und wähle „Einbetten“.
Welche URL brauche ich für eine CodeSandbox-Einbettung?
Verwende die URL des CodeSandbox-Projekts, das du in deiner Seite anzeigen möchtest.
Wie ändere ich das eingebettete CodeSandbox-Projekt?
Wähle „Link ändern“ und ersetze die bisherige URL durch die URL des anderen Projekts.
Wie öffne ich eine eingebettete Sandbox?
Wähle „Sandbox öffnen“, um das eingebettete CodeSandbox-Projekt zu öffnen.
Kann ich CodeSandbox zusammen mit einer Anleitung anzeigen?
Ja. Bette den CodeSandbox-Block auf derselben Seite wie deine Anleitung oder Notiz ein, damit Projekt und Erklärung beieinanderstehen.
Baue deine nächste Seite mit CodeSandbox
Öffne Workspace, tippe / und füge ihn in Sekunden hinzu. Kostenlos starten, ohne Kreditkarte.