Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

Codepen Embed Plugin

The Codepen Embed Plugin is for Grav CMS. You can use it to easily embed 'pens' from codepen.io right from your markdown editor.

Installation

Installing the Codepen Embed plugin can be done in one of two ways. The GPM (Grav Package Manager) installation method enables you to quickly and easily install the plugin with a simple terminal command, while the manual method enables you to do so via a zip file.

GPM Installation (Preferred)

The simplest way to install this plugin is via the Grav Package Manager (GPM) through your system's terminal (also called the command line). From the root of your Grav install type:

bin/gpm install codepen-embed

This will install the Codepen Embed plugin into your /user/plugins directory within Grav. Its files can be found under /your/site/grav/user/plugins/codepen-embed.

Manual Installation

To install this plugin, just download the zip version of this repository and unzip it under /your/site/grav/user/plugins. Then, rename the folder to codepen-embed. You can find these files on GitHub or via GetGrav.org.

You should now have all the plugin files under

/your/site/grav/user/plugins/codepen-embed

NOTE: This plugin is a modular component for Grav which requires Grav and the Shortcode Core

Configuration

Before configuring this plugin, you should copy the user/plugins/codepen-embed/codepen-embed.yaml to user/config/plugins/codepen-embed.yaml and only edit that copy.

Here is the default configuration and an explanation of available options:

enabled: true

Usage

[codepen id=CODEPEN_ID]

You can use these parameters (only id is required)

Parameter Default Value Description
id The codepen from the url. For example on this pen: https://codepen.io/akm2/pen/rHIsa the id would be rHIsa
user required, no default Include the pen user in the markup
title default: '' Include the codepen
preview default: true. Show preview of the pen once embedded
height default: 265 Height of the pen embed
defaultTab default: js,result What tabs should be shown by default
content default:'' For SEO purposes you can also include content that will be removed once the pen has been embeded.

About

You can use it to easily embed pens from codepen.io right from your markdown editor.

Resources

License

Packages

No packages published