mdx中的代码块由于代码解析而引发错误

时间:2020-09-24 11:43:44

标签: markdown gatsby prismjs gatsby-plugin-mdx

我最近将我的gatsby帖子转换为使用gatsby-plugin-mdx,并且大多数情况下过渡是无缝的,但是对于我的一些帖子,我遇到了一个问题-即代码中的代码区块正在解析,并且无法建立这些帖子。

这种情况发生在我正在写有关类和功能性React组件的帖子上,在我的一个示例中,我故意创建了一些错误的标记来说明这一点。 `gatsby-plugin-mdx` *似乎*正在解析它,然后由于错误而失败...

我该如何解决?有办法摆脱这些障碍吗?还是我需要使用其他插件?

config:

...
{
            resolve: `gatsby-plugin-mdx`,
            options: {
                extensions: [`.md`, `.mdx`],
                defaultLayouts: {
                    adventures: require.resolve("./src/views/Advanced.jsx"),
                    default: require.resolve("./src/views/Advanced.jsx")
                }
            },
            gatsbyRemarkPlugins: [
    {
        resolve: `gatsby-plugin-catch-links`,
        options: {
            excludePattern: /(excluded-link|external)/
        }
    },
    {
        resolve: `gatsby-remark-prismjs`,
        options: {
            classPrefix: "language-",
            inlineCodeMarker: null,
            aliases: {},
            showLineNumbers: false,
            noInlineHighlight: false,
            prompt: {
                user: "root",
                host: "localhost",
                global: false
            },
            escapeEntities: {}
        }
    },
    {
        resolve: "gatsby-remark-relative-images",
        options: {
            name: "uploads"
        }
    },
    {
        resolve: "gatsby-remark-images",
        options: {
            maxWidth: 2048
        }
    },
    {
        resolve: "gatsby-remark-copy-linked-files",
        options: {
            destinationDir: "static"
        }
    }
]
...
        },

Markdown带有故意错误(它包装在反引号中,但不确定我如何在markdown中转义它们!):

class List extends Component {
  render() {
    return (
      <h2>List title</h2>
      <ul>
      
      </ul>
    )
  }
}

1 个答案:

答案 0 :(得分:0)

事实证明,此问题不是代码块。在此块之后的普通段落中包含包含的文本。将其包装在后面的刻度中可解决问题<div>