[plugin-dev] Extending Markdown syntax


(Hoopy Frood) #1

Dear craftzdog and others,

I am currently working on a plugin to support text highlighting in Inkdrop. My starting point was a similar plugin for remark that parses ||foo|| and transforms it into <kbd>foo</kbd>. That is lesser known HTML tag that denotes keyboard input elements.

At first it seemed that I could use this as a template for my plugin. Moreover remark-kbd works seemlessly with Inkdrop. When I tried to replace <kbd> with <mark> I ran into a problem, because somewhere during the parsing process the HTML tag got sanitized and was missing from the output. I am sure it must have been sanitized, because the syntax elements !! got consumed indicating that the parser in fact added a new node to the mdast syntax tree.

I suspect that Inkdrop uses the hast-util-sanitize plugin for sanitization, maybe implicitly as part of mdast-util-to-hast. The default ruleset includes a whitelist of tagNames where kbd is included, but mark is not (and neither is span for that matter). This prevents me from using meaningful HTML tags for text highlighting. My workaround at the moment is to use <strong> along with a custom CSS class as a discriminator for highlighted text, but that solution is not optimal.

Maybe you can look into it and change the ruleset used during Markdown processing to allow for <mark> tags.

Thank you!


Text highlighting plugin
(Takuya Matsuyama) #2

Hi Hoopy,

As you guess, that’s right - Inkdrop uses hast-util-sanitize with github rule.
Ah that makes sense.
Sure, I’ll add mark tag to the whitelist. I think it is no problem to add it.
I’m surprised you’ve already understood remark’s internal architecture!

Thanks!


(Hoopy Frood) #3

Thank you!

remark was quite a rabbit hole I stumbled into when it did not work as expected in the beginning. But now I am glad I had a chance to look into it. It is a powerful framework and a perfect fit for Inkdrop! The more I learn about the internal structure of Inkdrop, I have great respect for the design choices you made. Keep up the good work!

Hoopy


(Takuya Matsuyama) #4

I’m glad to hear that!
Yeah, I was lucky to find remark and to choose it for the Markdown renderer.
This kind of app requires high extensibility, so I would keep focusing on that.
Thanks for the comment!


(Takuya Matsuyama) #5

I’ll work on it next week.
Thank you for waiting!


(Hoopy Frood) #6

Thank you! :grinning:


(Takuya Matsuyama) #7

v3.20.1 allows rendering <mark> tag! Thanks again :smiley: