Mein animierter Syntax-Highlighter Code-Movie ist veröffentlicht! Eine einfache JavaScript-API generiert aus Codeschnipseln HTML und CSS, das ohne Laufzeit-JS Schritt-für-Schritt-Animationen darstellt. Einfach durch die Klassen frame0 bis frameN durchschalten (oder dazu die Wrapper-Komponente verwenden) und den Rest übernehmen standardkonforme CSS-Transitions:
Jeder Aspekt des Outputs (Farben, Typografie, Zeilennummern etc.) ist per CSS anpassbar und mit ein bisschen Wrapper-HTML und -CSS bleibt kein Gestaltungswunsch offen. Die meisten Styling-Optionen sind auf der Dokumentations-Seite aufgelistet. Der Code des aktuell angezeigten Frames kann ganz normal markiert und kopiert werden.
Die ersten Iterationen von Code.Movie entstanden ca. 2017, als ich für meine Trainer-Tätigkeit absurd viele Präsentationen rund um Code aus dem Boden stampfen musste. In Powerpoint o.Ä. mit Code-Screenshots zu hantieren, war mir einerseits zu umständlich und andererseits erschienen mir statische Code-Beispiele auch didaktisch eher supoptimal. Statischer Code sieht nicht nur langweilig aus, sondern harte Wechsel zwischen verschiedenen Code-Beispielen sind schlecht nachzuvollziehen. Moderne User Interfaces sind voll mit Animationen, damit wir verstehen, was im UI vor sich geht – und ebenso sollte präsentierter Code animiert sein, damit Refactorings, Tutorials und der Aufbau von Beispielen nachvollziehbar ist. Also schrieb ich eine animierte Syntax-Highlighter-Software, deren dritte Iteration nun erstmals öffentlich zugänglich ist.
Code.Movie ist der dritte kompletter Rewrite des Grundkonzepts und sehr unfertig. Es gibt unzählige Features, die bisher nicht reif für die Öffentlichkeit sind (z. B. Code-Dekorationen und Animations-Beeinflussung) und es gibt nur sehr wenige unterstützte Programmiersprachen. Auch die Webseite ist eher rudimentär, aber dokumentiert alles Wesentliche und enthält sogar einen Online-Playground! Sollte sich Interesse am Projekt manifestieren, können die Features und unterstützten Sprachen schnell mehr werden. Lasst mich wissen, welche Features und Sprachen ihr gebrauchen könntet und was eure Use Cases sind!