Markdown Previewer Parsing Issue

Curriculum Help
1

I am facing some issues in the “Build a Markdown Previewer” project. The issue seems to arise from the “Marked” library as it sometimes renders correct HTML and sometimes doesn’t. For example, I can see it successfully renders “# Heading 1” correctly as an <h1></h1> element; however, it doesn’t seem to render “## Heading 2”
as an <h2></h2> element; instead, it renders it as an <h1></h1> element too. I think that’s also the reason that test 6 is failing for me (it doesn’t render HTML correctly). I tried using different versions of the library without any success. There also seems to be a problem with spacing: whenever I type a blank space in the editor, I can’t really see the space showing anywhere in the previewer.

Your code so far
Here’s a link to my code on CodePen: https://codepen.io/Inferno888/pen/xxdKKyw?editors=0010

Your browser information:

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

Challenge: Build a Markdown Previewer

Link to the challenge:

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

Hi @Inferno888 !

Welcome to the forum!

All of the tests are passing on my end.

Screen Shot 2021-06-27 at 12.52.52 PM

4

It looks like it’s because your HTML is inside a section element.

Browsers (at least both Chrome and Firefox) have some default styles for headings inside some semantic elements. Not sure I really realized this.

Here are the styles from Chrome:

:-webkit-any(article, aside, nav, section) h1 {
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
}

Here are the defaults, font-size and margins are getting overwritten by the above styles.

h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}