Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
To round out our new Pens as Resources feature, we’ve now made it possible to include the HTML of a Pen in another Pen. We wanted to make this as flexible as possible, meaning you can put the HTML anywhere you want and include as many other Pens HTML as you need. To use it, put the Pen URL in triple square brackets: [[[http://codepen.io/chriscoyier/pen/zDGkw]]]
You can use it right in the middle of other HTML:
<h1>Some Other Pen</h1>
[[[http://codepen.io/chriscoyier/pen/zDGkw]]]
<p>Yadda yadda yadda.</p>Here’s an example of an original Pen:
And a variation on that using the same HTML:
This should help make design variations on a consistent set of HTML much easier. And also helpful for things like design pattern libraries where one master Pen can be used to link up the styles (and now HTML) of other Pens to demonstrate the entire pattern library. Note that exporting the Pen, as of right this second, will just show you the triple bracket text in the HTML. We have a plan for this, assuming that you would prefer the included HTML to be put into the export. We’ll be doing that same kind of thing with CSS included externally, and it will be coming soon. Let us know what you think!