为什么react-markdown输出代码块而不是HTM：

Question

我正在尝试使用react-markdown将Markdown转换为HTML。我的代码非常简单：

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>
    )

我的问题是浏览器中的输出是一个代码块，而不是我期望的HTML。我意识到我的markdown内容是用反引号包装的，这将它指定为markdown中的代码，但这正是插件示例告诉我应该做的。任何关于我如何让它工作的建议都将不胜感激。谢谢和问候，丹。

Answer 1

你的markdown源码是：

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

然而它应该是这样的：

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

在Markdown中，缩进行(在大多数上下文中)表示代码块。

您需要这样声明它：

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

这是因为模板文字不会自动修剪缩进。

或者，以编程方式剥离缩进，如下所示：

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>
`

Answer 2

如果您阅读了文档，就会知道需要添加escapeHtml={false}

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

Answer 3

我在一些格式良好的JSON中遇到了这个问题，这些JSON包含Markdown模板，因此被缩进了，所以我想保留JSON格式。Lionel的解决方案是正确的，但是您不需要所有的代码，因为String.prototype.trim()将从字符串的两端裁剪空格，这意味着您不需要计算缩进是什么。我把它简化如下：

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

这段代码所做的一切就是将模板文字拆分成行的数组，修剪这些行，然后再将它们连接起来。