CODEWITHSUNDEEP
reactjsvue.jsmarkdownjavascript-marked
Kasheftin
Kasheftin

Reputation: 9463

The proper way to use marked.js with the Vue/React components

I write publications in markdown and use marked.js to display them on my blog. The blog uses custom image gallery components, audio and video players, etc. There are several simple marked.js extensions for that.

The issue is marked.js is mastering transforming markdown text into plain HTML. But the plain HTML is not what is needed for the modern web page powered by Vue or React. I can use <div v-html="markedJsRenderedHTML"> but I want the engine to be smart enough, and use my custom image gallery component instead of the plain <img> tag.

I need advice about how to handle better marked.js with the Vue/React powered components. These are the options:

  1. Use just a lexer part, send the token tree to the front-end and render it from scratch. The issue is there're more than 20 built in tokens in marked.js. Every token has different arguments, and I need to repeat the good half of the marked.js library. For example, the Heading token requires the Heading vue component that renders h1-h6 depending on the token.depth argument.

  2. Use a hybrid solution - return the tree with HTML content for the built-in tokens, and structured data for the custom ones. Then use the proper vue components and v-html for everything else. The issue is there might be images inside a table. A table is a built-in component, HTML is returned, but inside there's an image that should use the proper vue component.

  3. Parse back the generated HTML into the runtime component using vue compiler. Is https://github.com/FranckFreiburger/vue3-sfc-loader the way to go?

Upvotes: 1

Views: 405

Answers (0)

Related Questions