Why is react-markdown outputting code blocks instead of HTM:

Question

I'm trying to convert Markdown to HTML using react-markdown. My code is pretty straightforward:

import React from 'react';
import ReactMarkdown from 'react-markdown';

const markdown = `
        # Header 1
        ## Header 2
        _ italic _
        ** bold **
        <b> bold Html </b>
    `;
    return (
        <div className='sidebar-right'>
            <div className='main-bar'> 
                <ReactMarkdown source={markdown} />        
            </div>
        </div>
    )

My problem is that the output in the browser is a code block, and not the HTML I expected. I realise that my markdown content is wrapped in backticks, which designates it as code in markdown, but that's what the plugin example says I should do. Any suggestions as to how I can get this to work would be greatly appreciated. Thanks and regards, Dan.

The backticks simply mark it as a string literal, if you have just a single pair it should not become part of the string — mousetail
– mousetail, Commented Sep 21, 2020 at 9:09

Lionel Rowe · Accepted Answer · 2020-09-21 11:04:31Z

1

Your markdown source is this:


        # Header 1
        ## Header 2
        _ italic _
        ** bold **
        <b> bold Html </b>

Whereas it should be this:

# Header 1
## Header 2
_ italic _
** bold **
<b> bold Html </b>

In Markdown, indented lines (in most contexts) indicate code blocks.

You need to declare it like this:

    const markdown = `# Header 1
## Header 2
_ italic _
** bold **
<b> bold Html </b>`;

This is because template literals do not automatically trim indentation.

Alternatively, strip the indentation programmatically, something like this:

const stripIndent = ([str]) => {
    try {
        const lines = str.split("\n")

        const firstContentfulLine = lines[0].trim() ? lines[0] : lines[1]

        const indent = firstContentfulLine.match(/^\s*/)[0].length

        const result = lines
            .map(l => l.slice(indent))
            .join("\n")
            .trim()

        return result
    } catch (_e) {
        return str
    }
}

const markdown = stripIndent`
    # Header 1
    ## Header 2
    _ italic _
    ** bold **
    <b> bold Html </b>
`

edited Sep 21, 2020 at 11:04

answered Sep 21, 2020 at 10:48

Lionel Rowe

6,2581 gold badge19 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dan Over a year ago

Hi Lionel, Yes! That's exactly the problem. I changed the indentation as you suggested and it now works perfectly. Thank you for your very detailed explanation. Regards, Dan.

user8277639 · Accepted Answer · 2020-09-21 09:41:00Z

0

If you read documentation you know need to add escapeHtml={false}

<ReactMarkdown
  source={markdown}
  escapeHtml={false}
/>

answered Sep 21, 2020 at 9:41

user8277639

1 Comment

Dan Over a year ago

I followed the example given in the plugin, and they do not use 'escapeHtml'. I tried it as you suggested and it doesn't make any difference. The correct solution is provide by the previous answer. Thank you for your input.

Niall King · Accepted Answer · 2021-03-02 10:42:13Z

0

I had this issue with some nicely formatted JSON containing Markdown templates that were therefore indented, and I wanted to keep the JSON formatting. Lionel's solution is on the right lines, but you don't need all the code as String.prototype.trim() will trim whitespace from both ends of a string, which means you don't need to work out what the indent is. I simplified it as follows:

const stripIndent = (str) => {
  try {
    return str.split("\n").map(l => l.trim()).join('\n')
  } catch {
    return str
  }
}

All this code does is split the template literal into arrays of lines, trims the lines and joins them back up again.

answered Mar 2, 2021 at 10:42

Niall King

11 bronze badge

Collectives™ on Stack Overflow

Why is react-markdown outputting code blocks instead of HTM:

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related