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

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.