HTML (pug)

auf der seite https://codepen.io/hexagoncircle/pen/WdEdKO gibt es unter html folgene einstellungen = haml, markdown ,slim und pug. wenn ich versuche diese scripte bei fiddle zum laufen zu kriegen funktioniert es irgendwie nicht,. wie sieht es aus wenn ich solche scripte auf meine hp laden will? muss ich da irgendwas beachten ,oder kann ich den code des beispiels link einfach mit copy paste auf meiner hp einfügen.

wenn wir schon dabei sind . muss ich beim einfügen bestimmter scripte die mit bable,typescript oder coffeescript geschrieben sind auch irgendwas beachten oder reicht da auch copy paste

aber die einstellungen wie pugund soweiter die es bei codpen gibt ,gibt es bei fiddle ja nicht ,und komischerweise bekomme ich die da auch nicht zu laufen. wie sieht das den beim einbinden in der hp aus muss man da noch irgendwas mit einbinden damit das läuft??? was hat den das mit css und less und sass aus? kann man das auch in der hp einbinden,weil in fiddle läuft das meiste irgendwie auch nicht

habe schon gesehen das dieses scss ganz einfach um zuschreiben ist in css. aber der ganze andere kram den es da noch gibt ,läst sichja nicht so einfach um schreiben. zumindest ein paar sachen habe ich kapiert wie manes umschreibt aber nicht bei allen.. gibt es dafür programme die das in normalen html5 und in in normalen css und javascript umwandelt? Wer kommt eigentlich auf solche ideen das css in scss zu schreiben ? das ist doch alles irgendwie schwachsinn,ich verstehe den sinn dadrinn nicht

jetzt kapiere ich es .also mit html und css geht das ja. wie sieht es mit javascript und babel und so weiter aus kann man den code so nehmen oder muss ich mir den auch in compilierte Version anzeigen lassen? und dann in umgewandeter form in der hp einfügen?