Build a Markdown Previewer: Help Needed. Thx

JavaScript
#1

Tell us what’s happening:
Hi, it’s me again. Could someone explain to me the rationale behind these two code?
I understand that the first one is to overwrite the link method, so that now the link will be opened in a new tab, but how does the code work?
And for the second one, I don’t quite understand this part ({ renderer: renderer }). I roughly know that this is to embed the new written link function to the marked method.

I tried reading the markdown documentation, but could barely understand this part. ORZ

Your code so far
const renderer = new marked.Renderer();
renderer.link = function (href, title, text) {
return <a target="_blank" href="${href}">${text} + ‘’;
}

  <div id='preview' dangerouslySetInnerHTML={{__html: marked(props.markdown, { renderer: renderer })}} />

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36.

Challenge: Build a Markdown Previewer

Link to the challenge:

#2

Hey,

According to marked.js docs {renderer:renderer} is options object , marked
function arguments are:

marked(markdownString [,options] [,callback])

and you set your renderer (=object with functions) as renderer property value of options object.

Hope this makes sense

#3

Hi, not sure whether my understanding is correct.

So, this part of code:
renderer.link = function (href, title, text) {
return <a target="_blank" href="${href}">${text} + ‘’;
}
can be understood as :
const renderer = {link: function (href, title, text) {
return <a target="_blank" href="${href}">${text} + ‘’;
}}

so, this part of code:
renderer.link = function (href, title, text) {
return <a target="_blank" href="${href}">${text} + ‘’;
}
is basically updating the value of original “link” property of object renderer? Then why should I write a parameter “title” there?

and for this part :
const renderer = new marked.Renderer();
what does it mean?

Thank you.

#4

Hey,

const renderer = new marked.Renderer()

Here Renderer() is a constructor function (function creating object instance);

Here’s another article explaining what keyword new does in details in a beginner friendly manner, you can also check mdn

To see what’s what exactly, you can run this

const renderer = new marked.Renderer();
console.log(renderer.link===renderer.__proto__.link)

console.dir(renderer);
console.dir(renderer.__proto__);
console.log(typeof renderer)
console.dir(renderer.link);
console.log(typeof renderer.link)

Yes, you change link function, I’m sorry, can’t explain mark.js structure in detail, it’s a bit more complicated, there’s tokenizer function (The tokenizer defines how to turn markdown text into tokens.), I might be wrong but I guess if you want to change number or order of arguments you will have to change tokenizer first.

#5

Hi, thank you for your update.

So, Renderer() is a built-in constructor function of mark js. I see. I understand it now. Thank you!!!

Erm. I think I wont go that deep into mark.js for now. Understanding what these two code are for is enough for me. I just take the parameter “title” is a must for the code. Thank You!