Skip to main content
Community Plugin
View plugin on GitHub
See starters using this


A template plugin used for custom embeds in markdowns


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 and youtube videos.

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. It is only used in codepens for setting the default tab Example:

    Check out this pen {% codepen tab=result %}
    Watch this video {% youtube WoPI_7fnKlM %}
  3. The codepen tag uses the link to the pen and the optional configuration for the default tab to display
  4. The youtube tab uses the hash at the end of the url (e.g`4dBVuTbjy6I`)


This whole plugin idea came as result of how it was used in (DEV COMMUNITY) platform for embedding services in markdowns.


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.


Dillion Megida