Javascript-Beispiele gleichzeitig anzeigen und ausführen

Eine nette Technik, auf die Christian Heilmann in seinem Blog hinweist: Script-Elemente im HTML sind ganz normale Elemente, die nur durch ihre CSS-Display-Eigenschaft unsichtbar sind. Ändert man diese, kann man ein Script-Element als Beispielcode nehmen und gleichzeitig ausführen.

<script style=“display:block;“>

Ergänzt man das Skript-Element um die passende Display-Eigenschaft, wird es sichtbar und trotzdem ausgeführt:

Hier der Code dieses Beispiels:

Das Javascript sollte natürlich auch funktionieren. Einfach mal doppelklicken…

Beschriftungen mit CSS-Pseudoelementen

Zudem lässt sich eine Beschriftung wie „Quellcode:“ dank der CSS-Pseudoelemente :before und :after ohne Eingriff in das Markup hinzufügen:

script:before{
  content: 'Quellcode:';
}

Auf jeden Fall eine nette Idee. Sollte man dran denken, wenn man mal ein JS-Projekt dokumentiert.