loading words...

Jan 07, 2019 07:53:51

Remark and plugins

by @swizecteller | 203 words | 3🔥 | 116💌

Swizec Teller

Current day streak: 3🔥
Total posts: 116💌
Total words: 32303 (129 pages 📄)

Today I learned that plugin-based architectures are beautiful, extendible, and nigh impossible to figure out. The more you dig the less you know where anything happens.

I built my first remark plugin. #200wordsTIL

---

Remark is that wonderfully extensible markdown parser powering @gatsbyjs MDX @freecodecamp and others.

Mind you 𝘳𝘦𝘮𝘢𝘳𝘬𝘢𝘣𝘭𝘦 is completely different, but also a markdown parser built in JavaScript ¯\_(ツ)_/¯

https://remark.js.org/

---

Remark is built by the Unified collective over at https://unified.js.org

Unified, also, is a library. Or maybe it's a standard? Remark seems to be a specific implementation of Unified.

For example:

---

See what I mean? It's confusing. Where does anything 𝘢𝘤𝘵𝘶𝘢𝘭𝘭𝘺 happen?

---

Anyway, remark takes markdown and turns it into mdast. A markdown abstract syntax tree.

Everything else happens with plugins. Many exist.

---

Remark plugins are just JavaScript functions that follow a particular format. Mine is a transformer. There are also attachers, I think? Briefly mentioned in docs.

My plugin finds **bold** and _italic_ nodes and turns them into utf8 characters. Found an package for that, but had to copy pasta 😞

---

Unified has a utility that makes the visitor pattern a breeze 👉 visit() calls your functions on just the nodes you care about. Wonderful 👌

Livecoded it all 👇

https://www.youtube.com/watch?v=LWvaOGVHLfE

Originally published at twitter.com

contact: email - twitter / Terms / Privacy