Help, I can't get the markdown previewer to work correctly

My problem is idk how to get the markdown styled, for example the code block and quote block are all the same. Besides that the text going out if the screen got smaller and tables aren’t showing.
PS: the string I got from other project just to test if it works. and the borders are just to see what’s going on with my elements
please help I’ve been trying to solve this problem for 2 days now.
here is my app: https://redapy.github.io/Markdown-previewer/

Your code so far
and here is my code on github: https://github.com/redapy/Markdown-previewer

Your browser information:

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

Challenge: Build a Markdown Previewer

Link to the challenge:

You should be able to style the html in the previewer with CSS the same way you would style any other elements on the page. Right now it is using the browser defaults. I would suggest you add some padding to the previewer div so the content doesn’t come up right against the edges of the div.

for example if I wanna target the block element in previewer div, how would I do it ?

Do you mean the <blockquote> element? I’m assuming you know basic CSS. The preview div has an id of preview, so you can use that to specify that you only want to target the blockquote in the preview div. Or perhaps I am not understanding your question correctly. If not, please be very specific about what you are asking.

You might look at the example project to see how it is done. The blockquote has specific styles applied, the pre element has overflow: auto to prevent the code overflowing and it is using a syntax highlighting library for the code colors.

yes exactly. IG I understand now. I was wondering if I can target it normally even its coming from a Markdown. thanx for you time.

I’ll take a look to the example project thnx.

Problem solved. I’m feeling so dump that I asked suck a question XD. thanks a lot guys for your help. I should just give it a style normal as other elments.

No, don’t feel dumb. You are learning a lot of new stuff to create these projects. Information overload can sometimes make you forget the basics. Happens to the best of us. Keep up the good work.

thank you so much for you support and help.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.