Markdown Previewer -

Recently did my Markdown Previewer over again.

See it in action

I tried to make it a bit more colorful than my last version on Codepen and look better if someone was viewing it on a mobile device.

I thinking I may try to make it so each section scrolls like in the original if I can figure it out anyways.

Feedback is appreciated.


I love it. Keep up the good work.:smile:

I think you can do that by setting the container height, and y-overflow to scroll or something like that.

Wow. Looks great!

Currently trying to build the same project but i dont understand how import coding.
I see you succeeded, and maybe you willing to share you knowledge?

So some questions to make sure Iā€™m on the same page as you @moiseychek. Are you talking about how I got the sytanx higlighting? or something else? Can you describe in more detail what is your tring to do and what troubles your having?

so. i had troubles with making previewer work, and than i copied some of the code from our project, and previevier started work.

but i still do not understand some of the logic

const renderer = new marked.Renderer(); = function (href, title, text) {
  return `<a target="_blank" href="${href}">${text}` + '</a>';

so this variable and function

<div id="preview" dangerouslySetInnerHTML={{__html: marked(this.state.input, { renderer: renderer })}} />

and this code.
what is that dangeroulsy set iiner HTML.
if you could just briefly describe the logic, just couple words.
Appreciate that!

As to the first code snippet, it setting a function to be used by the marked Renderer, the bit that takes markdown and translates it to html, and creating a callback for links to return the link in a diffrent format then the default., the callback gets called with the href, title and text for that link.

The React documentation covers what dangerouslySetInnerHTML is and why it exists. I highly recommend going through the documention when you can since its pretty good.

1 Like