This plugin adds a {% codepen %} Liquid tag to Jekyll (and Octopress) that generates a CodePen embed code.

Move codepen.rb into the _plugins folder at the root of your Jekyll project.

{% codepen slug-hash [data-attr:value]... %}

All CodePen embed attributes are configurable with this extension.

Note: All parameters, except slug-hash (the first parameter) are optional. All default values are assigned by CodePen, not this plugin.

{% codepen xwder %}
<p data-embed-version="2" data-slug-hash="xwder" class="codepen"></p>

{% codepen xwder height:600 default-tab:css preview:true %}
<p data-embed-version="2" data-height="600" data-default-tab="css" data-preview="true" data-slug-hash="xwder" class="codepen"></p>

Options may also be set globally by defining a codepen entry in the _config.yml file.

codepen:
  theme-id: dark
  show-tab-bar: false
  rerun-position: hidden

Note: Inline options overwrite the global options.

This extension allows you to define a template located at _includes/codepen.html, exposing pen_url, user, title, author_name and data_attributes variables, to override the default output.

<p class="codepen" {{ data_attributes }}>
  See the Pen <a href="{{ pen_url }}">{{ title }}</a>
  by {{ author_name }} (<a href="//codepen.io/{{ user }}">{{ user }}</a>).
</p>

Note: The sample template above does not include the CodePen script. You may include the CodePen script automatically on pages which contain the CodePen widget using the follow snippet:

{% if page.content contains '<p class="codepen"' %}
<!-- CodePen -->
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
{% endif %}