Markdown previewer: why is <pre> required?

Markdown previewer: why is <pre> required?
0.0 0

#1

Hi everyone,

I’m failing the last non-optional test on this one. I’m getting:

  1. When my markdown previewer first loads, the default markdown in the #editor field should be rendered as HTML in the #preview element AssertionError: #preview does not contain at least one <pre> : expected 0 to be at least 1

Can someone explain where exactly I’m supposed to include a <pre>? Or is it a bug?

EDIT: the issue seems to be that my blockquotes aren’t really rendering as blockquotes! anyone with the same issue?

Thanks!


#2

I’ve edited your code. All HTML (like <pre>) need to be enclosed in backticks or it be interpreted instead rendered.

The <pre> tag ensure that the text is rendered as is, instead of trimmed and whitespace contracted.


#3

Whoops! sorry. But why is it required in my markdown previewer tests and not in the instructions?


#4

Yeah, the instructions don’t mention it, but it needs to be there. Look at it this way - if you didn’t have it, things would render incorrectly and you wouldn’t know why it was failing. It is necessary anytime you need things to be rendered exactly as written. If you think it really should be in there as a hint or reminder, then you can open an issue on the github.


#5

Thank you. I think that my codeblock should be between <pre> tags, but I don’t know how to place them there. Can’t find it in the documentation.


#6

It must be a bug, because I solved that issue, but now I get that there is not H1 on my preview, but there is! I’m seeing it when I inspect elements.


#7

Do you have a link to a pen?

I’m guessing that it isn’t seeing the H1 because the pre isn’t there.


#8

No, it’s local. Let me quickly put it in a pen.


#9

It will take some time because I have separate files for the component :persevere: but upon inspection pre is definitely there.


#10

Yeah, if you’re going to develop locally, I’d recommend having one JS file and one CSS file to make porting to CP easier.


#11

I was thinking of moving out of codepen because frankly I’m not a fan and I also want to start learning other things, so I was thinking up uploading it to Zeit or something similar.

Here’s the pen. It doesn’t work, but at least you can see the code. I’d like to make it work but I don’t know if I’ll be able to because basically I’ve never done a react project on Codepen.

I can post a screenshot of the element inspection too so you can verify that every single element that is required, is there, even the pre and h1 tags.

I’m thinking it might be something minor like spacing or something but I don’t know.


#12

Breaking news: it works with the placeholder in the sample pen in the instructions, so there’s something wrong with my placeholder text.


#13

Sorry, I’m having trouble getting your pen to run.


#14

It’s not, lol, but don’t worry.
It was the spacing.
I deleted all whitespace around the h1 and h2 tags and it passed all the tests.
Thanks so much for your help and patience :slight_smile: