Markdown previewer react

1

Hi,

I am a newbie to web dev/react and i am using react to create the markdown previewer. I am usign a react component on github and it works fine in converting markdown to html.

Currently i am having issues with the last test to enable the line breaks . I noticed most people are using “marked.js” which allows them to use marked.setOptions. Will this be possible for me since i am using

2

Hello there,

You seem to have been cut-off…

There should be no reason you cannot use markedjs.

3

Just realised i was cutoff, sorry!. I found a react library called so i used that instead of marked.js and it works. However, i am stuck when it comes to rendering carriage returns as
.

This is the react library : https://github.com/rexxars/react-markdown

4

Have you looked at the options for the Node Types? Specifically, the break type?

5

i looked at the documentation and tried the “allowNode” function. However, it did not work. it’s not quite clear how to use it.

. Screenshot 2020-06-11 at 22.50.36 i removed the angle braces as it’s being removed for some reason.

Doesn’t seem to work

6

I also tried this

Screenshot 2020-06-11 at 23.14.58

7

Well, from their demo site, it looks like they do not have the carriage return. Remember, the last test is optional…

8

I think they do . but i am not sure how to use it as i am still new to web dev. The picture below is from the React Markdown doc.

Screenshot 2020-06-12 at 10.36.09|690x474

9

Yes. I have seen that. What I mean, is I do not think that refers to a carriage return.

1 Like
10

Just to add: Perhaps this issue could be of help. Specifically, the second-last comment: https://github.com/rexxars/react-markdown/issues/273

You will need to pre-process the source, and replace new lines with \n. Or, something similar.

Hope this helps

11

Thanks i will take a look!

1 Like
12

@Layooo I tried using react-markdown and ran into this issue to. I implemented the fix as specified in the github issue and the newlines inserted
s. HOWEVER, when I went to type into the editor, the editor would re-render and drop the cursor to the end of the editor, instead of continuing at the same spot(like a normal text editor).

I couldn’t figure how how to fix that, so I quit using react-markdown and switched to using marked. When I figured out how to used marked, typing in the editor worked fine as expected.

I hope this helps. Feel free to let me know if you have any questions! Also, feel free to checkout my project because I just finished it.

1 Like