Codepen plugin for Octopress (and Jekyll respectively)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


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.

Parameter Default Notes
theme-id 0 Sets theme
slug-hash none Required
user none Not required
default-tab result html/css/js/result
height 300 Not a part of themes
show-tab-bar true true/false, PRO only
animations run run/stop-after-5
border none none/thin/thick
border-color #000000 Hex Color Code
tab-bar-color #3d3d3e Hex Color Code
tab-link-color #76daff Hex Color Code
active-tab-color #cccccc Hex Color Code
active-link-color #000000 Hex Color Code
link-logo-color #ffffff Hex Color Code
class none Class added to embedded iframe
custom-css-url none Style embed with custom CSS
preview false Displays static preview
rerun-position bottom right top/left/right/bottom/hidden

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>

Global Configuration

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

  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="//{{ user }}">{{ user }}</a>).

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="//"></script>
{% endif %}