CODEWITHSUNDEEP
javascriptreactjsmarkdown
Reggroy
Reggroy

Reputation: 53

How to use markdown inline-code quote symboles within a multiple lines string in React js?

I have created a program to transform markdown format into HTML using React JS.

I would like to show the types of markdown styles you can use by setting a default value of the variable as shown below.

However, such a format doesn't allow me to reuse (`) within a string using this type of quote symbol.

function App() {

    const [markdownText, setMarkdownText] = React.useState(`# Type your markdown text here

## then type enter or any other key to see it translated into an HTML format
    
here is a [link](https://commonmark.org/help/) with basics markdown styling methods 

`Inline code` with backticks 

`)

React.useEffect(() => {
    [textToMarkdown(), markdownText]
})

    const [markdowned, setMarkdowned] = React.useState("")



    const handleChange = (e) => {
        setMarkdownText(e.target.value)
        textToMarkdown()
    }

    const textToMarkdown = () => {
        setMarkdowned(marked.parse(markdownText));
    }

    return (
        
        <div className="row">
            <h1 className="text-center m-4">Convert your markdown</h1>
            <h3 className="text-center m-4">Tap enter after your last key to see the result</h3>
            <div className="col-6 border bg-danger">
                <h5 className="text-center">
                    Markdown:
                </h5>
                <textarea 
                onChange={handleChange} 
                defaultValue={markdownText} 
                id="editor"
                className="border-danger container-fluid box"/>
            </div>
            <div 
            className="col-6 border bg-warning">
                <h5 className="text-center">
                    HTML:
                </h5>
                <div id="preview" 
                className="border border-info rounded p-1 container-fluid box bg-light"
                dangerouslySetInnerHTML={{ __html: markdowned }}/>
            </div>
        </div>
    )
}

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);

Upvotes: 0

Views: 1304

Answers (1)

Arkellys
Arkellys

Reputation: 7800

You can escape the characters using backslashes (\):

`# Type your markdown text here

## then type enter or any other key to see it translated into an HTML format
    
here is a [link](https://commonmark.org/help/) with basics markdown styling methods 

\`Inline code\` with backticks 

`

Upvotes: 1

Related Questions