Creating a CodePen embed
The CodePen shortcode takes what we’ve learned in the past two examples and combines them. In this example, we’ll create an embed from the code sandbox website CodePen. There are a lot of great options to tweak in the embed, so having them as arguments in a shortcode helps, and creating a fallback in the content of the shortcode lets us create a nice experience when JavaScript isn’t available.
Getting the proper markup from CodePen
On any pen, there is a small “embed” button at the bottom. This will pop up a full editor for how to display the pen with various options, such as theme, default tabs, and more.
Figure 5.6 – The CodePen embed screen showing the style of the pen and all the variables available
For the shortcode, we’ll focus on the fallback (the content inside the element that the CodePen script will replace), the theme, default tabs, and height. The script that CodePen...
