Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 11. Dezember 2013

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

Wenn es um die Vorstellung von JavaScript-Frameworks und -Bibliotheken geht, ist es immer sinn­voll, den Nutzern mit kon­kre­ten Beispielen zu erklä­ren, wie das Framework oder die Bibliothek funk­tio­niert, wie sie ein­ge­setzt wird und wel­che Einstellungsmöglichkeiten vor­han­den sind. Statt nur Quelltext-Schnipsel zu ver­öf­fent­li­chen, ist es natür­lich wün­schens­wert, wenn Besucher sich selbst am Quelltext ver­su­chen kön­nen, ohne erst selbst JavaScript- und Demo-Dateien her­un­ter­la­den zu müs­sen. Das ist es, was Codeblock.js bie­tet.

codeblockjs
Website von Codeblock.js

Codeblock.js macht aus einem belie­bi­gen Element mit Quelltext als Inhalt einen bear­beit­ba­ren und aus­führ­ba­ren JavaScript-Editor, der direkt inner­halb einer Website im Browser dar­ge­stellt und bedient wer­den kann. Codeblock.js basiert auf jQuery und dem Ace-Editor, wes­halb bei­des zusam­men mit Codeblock.js im Header eines HTML-Dokumentes ein­ge­bun­den wer­den muss. Anschließend kann ein belie­bi­ges Element zum JavaScript-Editor umge­wan­delt wer­den:

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

Bei dem Element, wel­ches per Codeblock bear­beit- und aus­führ­bar gemacht wer­den soll, kann es sich zum Beispiel um einen ein­fa­chen DIV-Container han­deln. Per Knopfdruck wird der Quelltext dar­in aus­ge­führt. So las­sen sich On-the-fly JavaScript-Einstellungen für Frameworks und eige­ne Funktionen direkt im Browser ändern und aus­füh­ren.

Syntax-Highlighting, Zeilennumerierung und Fehlerausgabe

Der per Codeblock erzeug­te JavaScript-Editor hat einen „Run“-Knopf, um den Quelltext aus­füh­ren sowie einen „Reset“-Button, um den ursprüng­li­chen Quelltext wie­der­her­stel­len zu kön­nen. Außerdem sor­gen inte­grier­tes Syntax-Highlighting und eine Zeilennummerierung dafür, dass der JavaScript-Quelltext über­sicht­lich dar­ge­stellt wird.

codeblockjs_editor
Codeblock.js-Editor

Eine Autovervollständigung stellt sicher, dass bei der Eingabe öff­nen­der Klammern sowie Anführungszeichen die­se auto­ma­tisch um schlie­ßen­de Klammern und Anführungszeichen ver­voll­stän­digt wer­den. Eine Fehlerausgabe am unte­ren Rand des Editors gibt zudem Aufschluss dar­über, ob der JavaScript-Quelltext feh­ler­frei ist.

Einstellungsmöglichkeiten

Die Funktionalität, Beschriftung und das Aussehen von Codeblock.js kön­nen ange­passt wer­den. So las­sen sich bei­spiels­wei­se Konsole, Zeilennummerierung sowie „Run“- und „Reset“-Button aus­blen­den. Die Beschriftung des “Run”-Buttons ist anpass­bar. Der Standardtext für die Konsole des Editors kann eben­falls ange­passt wer­den.

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

Auch das Aussehen des Editors ist ver­än­der­bar. Für den „Run“-Button und die Konsole kön­nen eige­ne Klassen ver­ge­ben wer­den, um die­se selbst zu gestal­ten.

Fazit: Einfacher und kom­for­ta­bler lässt sich Demo-Quelltext für einen Nutzer nicht aus­ge­ben.

Links zum Beitrag

Denis Potschien

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.