📍 gatsby-remark-liquid-tags
A remark plugin used for custom embeds in markdowns.
Inspiration
This idea came from the usage of liquid tags in dev.to (DEV COMMUNITY) platform for embedding services in markdowns. This documented page shows their idea behind liquid tags and the tags available.
Usage
Install
npm install --save gatsby-transformer-remark gatsby-remark-liquid-tags
Installing gatsby-transformer-remark
is not necessary if you have it installed before.
When to use
This plugin enables custom embeds in markdowns. Check out the available services.
How to use
- Add the plugin to your gatsby configuration file (
gatsby-config.js
) in the plugins property ofgatsby-transformer-remark
.
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [`gatsby-remark-liquid-tags`],
},
},
];
- Use them in markdowns with this syntax -
{% embed-service embed-options %}
The embed-options argument may contain the url or other options as required by the tag.
Note that the liquid tags must have a line space above and below. This helps the plugin capture the tags correctly. Here’s what I mean:
Check out this codepen:
{% codepen https://codepen.io/Dillion/pen/GRKLJBP tab=html,css %}
The codepen shows the online text editor I created.
Examples
Please check out this file: SERVICES.md to see an example of each of the services available.
Contributions
Contributions are highly welcome: Feature requests, Pull requests, Bug report, documentation fixes and so on.
If you’d like to add more embeds, you can get insights from the Dev.to Liquid tags page
If you’d like to create a pull request, kindly go through the documentation here - CONTRIBUTION.md to help you get started.
Author
Related plugins
License
MIT