Liquid Tags Extension

[calumk]

Is anyone aware of an extension for supporting liquid tags?

There is support in quite a few other markdown libs

 {% youtube <videoid> %}

https://developers.forem.com/frontend/liquid-tags

[UziTech]

I don't think there is one yet, but if you want help developing one we can help.

All of our known extensions are in our docs.

[calumk]

For Future reference, I found someone who has already written this :
https://vrite.io/blog/next-level-technical-blogging-with-dev-to-api/

---

I have cleaned it up a bit, If i have time ill publish as an extension

import { h } from "hastscript";
import { toHtml } from "hast-util-to-html";

const liquidYoutube = (hash) => {
	let hast = h("iframe", {
		src: `https://www.youtube.com/embed/${hash}`,
		frameborder: 0,
		allowfullscreen: true,
		height: 350,
		width: "100%",
	});
	return toHtml(hast);
};
const liquidHastExample = (message) => {
	let hast = h("div", { class: "liquid_hast_example" }, [h("p", message)]);
	return toHtml(hast);
};
const liquidSimpleExample = (message) => {
	let html = `<div class="liquid_simple_example"><p>${message}</p></div>`;
	return html;
};

const liquidEmbed = {
	name: "liquidEmbed",
	level: "block",
	start(src) {
		return src.match(/^.*{%/)?.index;
	},
	tokenizer(src) {
		const regex = new RegExp(/^.*{%\s?(.+?) (.+?)\s?%}.*(?:\n|$)/);
		const match = regex.exec(src);

		console.log("tokenizer", src, match);
		if (match) {
			return {
				type: "liquidEmbed",
				raw: match[0],
				embedType: match[1].trim(),
				input: match[2].trim(),
				tokens: [],
			};
		}
	},
	renderer(token) {
		console.log("renderer", token);

		switch (token.embedType) {
			case "youtube":
				return liquidYoutube(token.input);
			case "liquid_hast_example":
				return liquidHastExample(token.input);
			case "liquid_simple_example":
				return liquidSimpleExample(token.input);
			default:
				return `<div class="liquid_embed_error">Error: ${token.embedType} is not a valid embed type</div>`;
		}
	},
};