gatsby-remark-codepen

Embed Codepen in Gatsby markdown

Install

npm install --save gatsby-remark-codepen

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: [
        {
          resolve:"gatsby-remark-codepen",
          options: {
            theme: "dark",
            height: 400
          }
        }
      ]
    }
  }
];

Usage

# Blog post title

This is an example of embedding a pen.
Add any markdown as you normally do, and then insert a valid
Codepen link anywhere to automatically transform it into an embed.

#### Check this pen

https://codepen.io/digitalhydra/pen/jPqWwP

NOTE: Make sure to copy the link instead of embed code.

How this looks

View a live demo here

License

MIT