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.
Permalink
Failed to load latest commit information.
README.md
codepen.rb

README.md

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