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>

                    <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

                }

Conclusion

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

Feel like I missed something out? Click Here to Comment


Date: August 2021 last updated August 2021
Genre: HTML SQL      Author: Benny Sutton
Keywords: embed codepen database html sql