Understanding Markdown

JavaScript
1

Hi all,

I managed to get my Markdown previewer working, however, I feel like I only BARELY understand how Markdown actually works, and specifically, how the options within Markdown work and how to target them so I can change them as I want OR to add CSS to them…no clue.

For example: How could I, within React, target Headings in Markdown so it outputs a custom id of my choosing

OR

complete these optional requirements from (FCC Markdown Preview Project):

  • Optional Bonus (you do not need to make this test pass): When I click a link rendered by my markdown previewer, the link is opened up in a new tab (HINT: read the Marked.js docs for this one!).
  • Optional Bonus (you do not need to make this test pass): My markdown previewer interprets carriage returns and renders them as br (line break) elements.

I’m not looking at the FCC code, but I have literally no idea how to start these.

After reading the docs on marked.js, I don’t really have any better an understanding.

Any help explaining the options, including what things like Sanitize actually does, or how to implement renderer, etc., would be very much appreciated.

Here’s my codepen for this project.

2

carriage returns - as soon as your text is updated, try scanning through the entire input to detect any carriage returns, then replace them with something that markdown can recognize as carriage returns.

3

Did you look at the options for marked.js?

You can add this to your createMarkUp method.

marked.setOptions({
  breaks: true
})
6 Likes
4

Thank @lasjorg

That definitely helps in a) understanding a bit more and b) where to implement these. Thank you, I appreciate it!