📍 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

1. Add the plugin to your gatsby configuration file (gatsby-config.js) in the plugins property of gatsby-transformer-remark.

plugins: [
	{
		resolve: `gatsby-transformer-remark`,
		options: {
			plugins: [`gatsby-remark-liquid-tags`],
		},
	},
];

2. 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

Dillion Megida

Related plugins

• gatsby-remark-embedder

License

MIT