Skip to content

Latest commit

 

History

History
85 lines (64 loc) · 3.19 KB

README.md

File metadata and controls

85 lines (64 loc) · 3.19 KB
Raw

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