How To Embed a Codepen from a database

Struggling to embed a pen on your page? Try this...

It's pretty easy to embed a Codepen pen on a web page.

On Codepen, select one of your pens in editor view and click the embed button bottom right. This will give you HTML to embed it.

The only thing that changes is the codepen GUID - which is 7 alphanumeric character so you just need a varchar(10) field in your database to store it - in my case SoundcloudID

You could package it a number of ways; as a HTML helper of type CustomHttpHandlers - or on a partial page - or just paste it on a razor page.

@if (!String.IsNullOrEmpty(Model.CodepenID))

{

<p class="codepen" data-height="365" data-theme-id="dark" data-default-tab="result" data-user="bennysutton" data-slug-hash="@Model.SoundcloudID"

style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="@Model.Name">

<span>

See the Pen <a href="https://codepen.io/bennysutton/pen/@Model.SoundcloudID">

@Model.Name

</a> by Benny Sutton (<a href="https://codepen.io/bennysutton">@@bennysutton</a>)

on <a href="https://codepen.io">CodePen</a>.

</span>

</p>

}

Conclusion

It's easy to show code from your codepen pens by embedding