如何在查看代码块中显示外部文件

Question

我想显示我的Styleguidists MarkDown文档中另一个文件的源。我不希望源代码始终在行内可见；我只想在读者单击查看代码时显示。

根据文档（https://react-styleguidist.js.org/docs/configuration.html），我已将updateExamples添加到我的`styleguide.config.js

  updateExample(props, exampleFilePath) {
    const { settings, lang } = props;
    if (typeof settings.file === 'string') {
      const filepath = path.resolve(
        path.dirname(exampleFilePath),
        settings.file
      );
      const { file, ...restSettings } = settings;
      return {
        content: fs.readFileSync(filepath, 'utf8'),
        settings: restSettings,
        lang,
      };
    }
    return props;
  }

这几乎可行，但是效果不佳：

如果我包括

`` `jsx { "file": "./documentation-mocks.js", "static": true}
`` `

然后，我看到了完整的源代码，总是在扩展，而不是缩小为“查看代码”按钮。

或者，如果我包含

`` `jsx { "file": "./documentation-mocks.js"}
`` `

然后，我得到了想要的“查看代码”按钮，但是在尝试评估代码之前，我也得到了一个带有SyntaxError: Unexpected token 'export'的框（以及Chrome控制台中匹配的难看错误）

如何在不评估外部文件的情况下将其放入查看代码按钮？