Growing with the Web

Embedding CodePens on a Jekyll site

Published
Tags:

During my migration to Jekyll I’ve found that the markdown parser, Maruku, doesn’t compile the current Codepen embed code.

<p data-height="268" data-theme-id="0" data-slug-hash="cCyba" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/Tyriar/pen/cCyba'>The <samp> element</a> by Daniel Imms (<a href='http://codepen.io/Tyriar'>@Tyriar</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//codepen.io/assets/embed/ei.js"></script>

Maruku seems to have a problem parsing Markdown when HTML attributes don’t have a value. The issue can be resolved by changing the script tag’s async attribute to async="async".

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

Like this article?
Subscribe for more!