2 min read

Embeds · gists, tweets, CodePen, maps

Table of Contents

Most platforms give you either an <iframe> (easy, works everywhere) or a <script> (richer, but scripts in Markdown can be flaky in static builds). Prefer iframes when a platform offers one.

GitHub Gist

Gists ship as a script. If it doesn’t render in the static build, fall back to a plain link to the gist or paste the code into a code block instead.

<script src="https://gist.github.com/USERNAME/GIST_ID.js"></script>

CodePen

<iframe
  height="400"
  style="width: 100%; border-radius: 8px;"
  scrolling="no"
  title="CodePen demo"
  src="https://codepen.io/team/codepen/embed/PNaGbb?default-tab=result"
  loading="lazy"
  allowfullscreen>
</iframe>

A tweet / post

These rarely survive a static build cleanly. Safest is a blockquote with a link:

“The best code is no code at all.” — someone, probably

via the original post

A map

Rule of thumb: if an embed needs a <script>, test the production build (npm run build && npm run preview) before trusting it — client scripts behave differently than in dev.