1

我想在我的 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 控制台中的一个匹配的丑陋错误)。

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

4

0 回答 0