Codepen Embedding
Updated on
Last site update: 8 May 2024
Some experiments embedding Codepen pens in markdown files.
Codepen3 is probably the best. Had to wrap the script in a <div> so I could adjust the width.
See the Pen Parallax scroll animation by isladjan (@isladjan) on CodePen.
This embed uses an iframe
This is from codepen3.html which is pretty neat. Just add the id of a pen: {{⪡ codepen3 id="tGpju" ⪢}}
There are other options available…
1{{/* DEFAULTS */}}
2
3{{ $user := "your_username" }}
4{{ $height := 500 }}
5{{ $tab := "result" }}{{/* html|css|js|result */}}
6{{ $theme := 8862 }}{{/* create on codepen.io */}}
7
8<div style="width: min(750px, 100%)">
9
10 <script
11 data-slug-hash="{{ .Get "id" }}"
12 data-user="{{ or (.Get "user") $user }}"
13 data-height="{{ or (.Get "height") $height }}"
14 data-default-tab="{{ or (.Get "tab") $tab }}"
15 data-theme-id="{{ or (.Get "theme") $theme }}"
16 class='codepen'
17 async
18 src="//codepen.io/assets/embed/ei.js"
19 ></script>
20</div>