search

leandrocp / mdex

A CommonMark-compliant fast and extensible Markdown parser and formatter for Elixir.
https://mdex-c31.pages.dev
MIT License
127 stars 10 forks source link

Support Liquid style Tags #30

Closed clsource closed 1 month ago

clsource commented 6 months ago

In the https://dev.to website they use special tags in Markdown documents to embed posts, gist, github repos, twitch streams, youtube, and other sites too.

I have been using a custom parser to enable this functionality while migrating my content from dev.to to my own server.

Example

{% youtube JNWPsaO4PNM %}

would render

<iframe style="min-height:50vh" width="100%" height="auto" src="https://www.youtube.com/embed/JNWPsaO4PNM" title="ElixirConf 2023 - German Velasco - Using DDD concepts to create better Phoenix Contexts" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="">
  </iframe>
leandrocp commented 6 months ago

@clsource I'm assuming youtube is a custom tag you'd implement yourself?

clsource commented 6 months ago

@leandrocp

Yes I created a simple Lib to get the same functionality of dev.to markdown editor in my own website

https://github.com/ElixirCL/liquor

leandrocp commented 6 months ago

Nice. Support to manipulate the markdown AST is something I'm still woking on, which would enable you to transform liquid tags into html using https://hex.pm/packages/solid or whatever engine you want

leandrocp commented 1 month ago

Hey @clsource AST manipulation is now available on the main branch (will be released soon) and I just added an example on how to render Liquid tags: https://github.com/leandrocp/mdex/blob/main/examples/liquid.exs

That script outputs:

<h1><a href="https://shopify.github.io/liquid/">Liquid</a> Example</h1>
<p>Elixir</p>

I've not added a custom tag in the example but implementing {% youtube JNWPsaO4PNM %} should work as well so I'm closing this issue now but feel free to send more comments. Thanks!