Hugo shortcode for CodeSandbox Embed.

codesandbox.html

{{ $defaultWidth := "100%" }}
{{ $defaultHeight := "500px" }}

{{ if .IsNamedParams }}
<iframe
  src="https://codesandbox.io/embed/{{ .Get "id" }}?codemirror=1&fontsize=13&hidenavigation=1&theme=dark&view=preview"
  style="width:{{ with .Get "width" }}{{.}}{{ else }}100%{{ end }}; height:{{ with .Get "height" }}{{.}}{{ else }}{{ $defaultHeight }}{{ end }}; border:0; border-radius: 4px; overflow:hidden;"
  title="{{ with .Get "title" }}{{.}}{{ else }}{{ .Get "id" }}{{ end }}"
  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>
{{ else }}
<iframe
  src="https://codesandbox.io/embed/{{ .Get 0 }}?codemirror=1&fontsize=13&hidenavigation=1&theme=dark&view=preview"
  style="width:{{ $defaultWidth }}; height:{{ $defaultHeight }}; border:0; border-radius: 4px; overflow:hidden;"
  title="{{ with .Get 1 }}{{.}}{{ else }}{{ .Get 0 }}{{ end }}"
  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>
{{ end }}

To use this, put the above code into the file:
layouts/shortcodes/codesandbox.html

Then, use shortcode with codesandbox .
{{< codesandbox your-codesandbox-id >}}

You can find your-codesandbox-id on codesandbox URL.

Usage:

{{< codesandbox canvas-random-rectangle-gpvir >}}

{{< codesandbox canvas-random-rectangle-gpvir "my awesome codesandbox" >}}

{{< codesandbox id="canvas-random-rectangle-gpvir" title="my awesome codesandbox" width="80%" height="300px" >}}

As of hugo version 0.80, using the {{% codesandbox canvas-random-rectangle-gpvir %}} wouldn't do it for me as it actually generates a comment saying raw html omitted. Doing this actually makes it work:

{{< codesandbox canvas-random-rectangle-gpvir >}}

As of hugo version 0.80, using the {{% codesandbox canvas-random-rectangle-gpvir %}} wouldn't do it for me as it actually generates a comment saying raw html omitted. Doing this actually makes it work:

{{< codesandbox canvas-random-rectangle-gpvir >}}

@DakotaLMartinez
Thank you for pointing this out 😄 I have just updated my previous comment.

In my environment, markup.goldmark.renderer.unsafe option is enabled, so I could not reproduce this behavior.

$ grep -A1 'markup.goldmark.renderer' config.toml
[markup.goldmark.renderer]
  unsafe = true

Thanks!! it will help a lot.

Just one thing, I think "height" is actually taking the "width" in the line 7. Take a look.
height:{{ with .Get "width" }}

@michaelcaxias

Just one thing, I think "height" is actually taking the "width" in the line 7. Take a look.
height:{{ with .Get "width" }}

Thank you! I fixed it 😄