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

【问题标题】：Why is react-markdown outputting code blocks instead of HTM:为什么 react-markdown 输出代码块而不是 HTM：
【发布时间】：2020-09-21 09:06:28
【问题描述】：

我正在尝试使用 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。我意识到我的降价内容包含在反引号中，这将其指定为降价中的代码，但这就是插件示例所说的我应该做的。任何关于我如何使它工作的建议将不胜感激。谢谢并恭祝安康，丹。

【问题讨论】：

反引号只是将它标记为字符串文字，如果你只有一对它不应该成为字符串的一部分

标签： reactjs markdown jsx

【解决方案1】：

您的降价来源是这样的：


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

【讨论】：

嗨莱昂内尔，是的！这正是问题所在。我按照您的建议更改了缩进，现在它可以完美运行。谢谢你非常详细的解释。问候，丹。
@Dan，我很高兴 Lionel 能够为您解决这个问题。请记住通过单击“✔”来接受回答您的问题的答案。见stackoverflow.com/help/someone-answers

【解决方案2】：

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

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

【讨论】：

我按照插件中给出的示例，他们不使用'escapeHtml'。我按照您的建议尝试了它，它没有任何区别。正确的解决方案由前面的答案提供。感谢您的意见。

【解决方案3】：

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

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

这段代码所做的只是将模板文字拆分为行数组，修剪行并将它们重新连接起来。

【讨论】：