Introduction

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

Installation

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

Syntax

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

Options

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.

Examples

{% 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.

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

Note: Inline options overwrite the global options.

Template

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 %}