Using "code" to replace a custom string with a custom div

[medbuddyaus]

I would like use the code implementation to replace a custom string within my Markdown e.g. {{{Hello}}} with a custom div e.g. "<Chip label="Hello" / " (omitting closing > otherwise it disappears when submitting).
I have played around with code but I can't even get a console output or change anything to test.
Any help would be greatly appreciated!

[ChristianMurphy]

Welcome @medbuddyaus! 👋
Taking a step back it sounds like you are looking for something like MDX? https://mdxjs.com/
It's maintained by the same team and supports JSX elements like <Chip label="hello" /> out of the box.

If you're looking to stay closer to markdown you could also consider using directives like https://github.com/remarkjs/remark-directive which is more standard.

I'd avoid creating custom syntax like {{{ Hello }}} it will confuse syntax authors who are familiar with markdown.
But if you really want to go down that road, you can find more about extending markdown at https://github.com/micromark/micromark#extending-markdown and https://github.com/micromark/micromark#creating-a-micromark-extension