Shortcode to preview HTML/CSS snippets

tips & tricks
1

Hi all, the other day I wrote a little shortcode to embed HTML/CSS, a lightweight alternative to a Codepen embed.

The shortcode shows two panels with HTML and CSS code, and a panel rendering the given HTML and CSS. Additionally the shortcode is compatible with strict SCP rules.

Ideas, feedback and other comments are very welcome :slight_smile:

The shortcode:

A little write-up on how it works:

3 Likes
2

This will fail HTML validation as style is not allowed inside div.

See <style>: The Style Information element - HTML: HyperText Markup Language | MDN (mozilla.org)

EDIT: Sorry misread your code. What you have using iframe is interesting.

1 Like
3

Thank you for checking out the code! The srcdoc attribute of an iframe is an interesting feature indeed :slight_smile:

1 Like