Kategorien
JavaScript & jQuery Programmierung

Codeblock.js: JavaScript direkt im Browser editieren und ausführen

Wenn es um die Vorstellung von JavaScript-Frameworks und -Bibliotheken geht, ist es immer sinnvoll, den Nutzern mit konkreten Beispielen zu erklären, wie das Framework oder die Bibliothek funktioniert, wie sie eingesetzt wird und welche Einstellungsmöglichkeiten vorhanden sind. Statt nur Quelltext-Schnipsel zu veröffentlichen, ist es natürlich wünschenswert, wenn Besucher sich selbst am Quelltext versuchen können, ohne erst selbst JavaScript- und Demo-Dateien herunterladen zu müssen. Das ist es, was Codeblock.js bietet.

codeblockjs
Website von Codeblock.js

Codeblock.js macht aus einem beliebigen Element mit Quelltext als Inhalt einen bearbeitbaren und ausführbaren JavaScript-Editor, der direkt innerhalb einer Website im Browser dargestellt und bedient werden kann. Codeblock.js basiert auf jQuery und dem Ace-Editor, weshalb beides zusammen mit Codeblock.js im Header eines HTML-Dokumentes eingebunden werden muss. Anschließend kann ein beliebiges Element zum JavaScript-Editor umgewandelt werden:

$("#quelltext").codeblock();

Bei dem Element, welches per Codeblock bearbeit- und ausführbar gemacht werden soll, kann es sich zum Beispiel um einen einfachen DIV-Container handeln. Per Knopfdruck wird der Quelltext darin ausgeführt. So lassen sich On-the-fly JavaScript-Einstellungen für Frameworks und eigene Funktionen direkt im Browser ändern und ausführen.

Syntax-Highlighting, Zeilennumerierung und Fehlerausgabe

Der per Codeblock erzeugte JavaScript-Editor hat einen „Run“-Knopf, um den Quelltext ausführen sowie einen „Reset“-Button, um den ursprünglichen Quelltext wiederherstellen zu können. Außerdem sorgen integriertes Syntax-Highlighting und eine Zeilennummerierung dafür, dass der JavaScript-Quelltext übersichtlich dargestellt wird.

codeblockjs_editor
Codeblock.js-Editor

Eine Autovervollständigung stellt sicher, dass bei der Eingabe öffnender Klammern sowie Anführungszeichen diese automatisch um schließende Klammern und Anführungszeichen vervollständigt werden. Eine Fehlerausgabe am unteren Rand des Editors gibt zudem Aufschluss darüber, ob der JavaScript-Quelltext fehlerfrei ist.

Einstellungsmöglichkeiten

Die Funktionalität, Beschriftung und das Aussehen von Codeblock.js können angepasst werden. So lassen sich beispielsweise Konsole, Zeilennummerierung sowie „Run“- und „Reset“-Button ausblenden. Die Beschriftung des „Run“-Buttons ist anpassbar. Der Standardtext für die Konsole des Editors kann ebenfalls angepasst werden.

$("#quelltext").codeblock({
  editable: true,
  consoleText: "Beispielquelltext",
  runButtonText: "Ausführen",
  console: true,
  resetable: true,
  runnable: true,
  lineNumbers: true
});

Auch das Aussehen des Editors ist veränderbar. Für den „Run“-Button und die Konsole können eigene Klassen vergeben werden, um diese selbst zu gestalten.

Fazit: Einfacher und komfortabler lässt sich Demo-Quelltext für einen Nutzer nicht ausgeben.

Links zum Beitrag