Question about the markdown project

JavaScript
1

Hi,

i manage to have the markdown previer to work but I was not satisfied at all with the style so I managed to have 2 textareas , one for the editor and the other for the preview, but the thing is not working anymore

let Previewer = ({input}) => {  
  return (
    <div id="preview-box" >
 <div class="toolbar">
        PREVIEW <i class="fa fa-arrows-alt"></i>
      </div>     
      <textarea id="preview" value={dangerouslySetInnerHTML={__html : marked(input)}} /> 
       
    </div>  
    )  
}

this snippet works but I have to use div instead of textarea

let Previewer = ({input}) => {  
  return (
    <div id="preview-box" >
 <div class="toolbar">
           PREVIEW <i class="fa fa-arrows-alt"></i>
          </div>     
      <div id="preview" dangerouslySetInnerHTML={{__html : marked(input)}} />       
    </div>  
    )  
}

the question is how to use the dangerouslySetInneHTML with the value attribute?

the second question is about how to expand a div with an icon :slight_smile:
thank you

link of my project , where I commented the
https://codepen.io/ranran212/pen/YzZXXGremphasized text

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

First, I think div is the better choice for the previewer. Generally, textarea is used for editing text, which I don’t think you want in the previewer. So I think semantically, div is the better choice here.

Second, I don’t think textarea will actually render HTML, it just displays text. So all that nicely styled HTML you are currently seeing in your previewer is not possible with a textarea.

4

yes, after googling the issue I came to your same conclusions and reverted to the original code (with <div< element)
thank you anyway :slight_smile:

5

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