A template plugin used for custom embeds in markdowns e.g codepens, etc


unist-util-visit - Check the docs


npm install --save gatsby-transformer-remark gatsby-remark-liquid-tags

When to use

This plugin enables custom embeds in markdowns. At the moment, it only allows codepens. This can be useful when making project examples.

How to use

  1. Add the plugin to your gatsby configuration file.

    // In your gatsby-config.js
    plugins: [
        resolve: `gatsby-transformer-remark`,
        options: {
            plugins: [
  2. Use them in markdowns with this syntax - {% embed-site embed-url embed-options %} The embed-options argument is optional. Examples;

    Check out this pen {% codepen tab=result %}
    Embed example


Contributions are highly welcome to enable more embeds such as tweets, GitHub repositories, Stackoverflow questions, etc.

How To Contribute

Ensure you have some markdown files to work with

  • Fork this repository or download
  • Place the folder in a ‘plugins’ folder in the root directory.
  • Change your location to the gatsby-remark-liquid-tags folder.

    • cd plugins/gatsby-remark-liquid-tags
  • Install dependencies

    • npm i
  • Add the plugin to gatsby-config as shown above.
  • Make your changes in development mode
  • Push and make a pull request.