::codepen

Bindet ein 👉 Codepen ein.

::codepen[https://codepen.io/lebalz/pen/PwYoOBK]

http://localhost:3000

URL

Es dürfen jeweils nur codepen.io/user/embed/* URLs verwendet werden, auf codepen.io wird allerdings die URL codepen.io/<user>/pen/* verwendet. Aus den pen URLs wird automatisch die korrekte embed URL generiert.

Optionen

editable

Erlaubt das Bearbeiten des Codepens.

Standardmässig true.

z.B. editable=false

theme

Wählt das Theme des Codepens.

Standardmässig nicht gesetzt.

z.B. theme=dark oder theme=light

defaultTab

Wählt die Standard-Tabs des Codepens.

Standardmässig result.

z.B. defaultTab=html,result oder defaultTab=css,js

height

Höhe des iframes.

Standardmässig auf 500px gesetzt.

z.B. height=200px

width

Breite des iframes.

Standardmässig auf 100% gesetzt.

z.B. width=200px

css Eigenschaften

Es können beliebige css-Eigenschaften in Form eigenschaft=wert angegeben werden, die auf das iframe angewendet werden.

::codepen[https://codepen.io/lebalz/pen/PwYoOBK]{editable=false theme=light defaultTab=html,result height=300px}

http://localhost:3000