如何在 react-styleguidist 中为 Markdown 中的嵌入式 HTML 设置样式？

如何解决如何在 react-styleguidist 中为 Markdown 中的嵌入式 HTML 设置样式？

我正在尝试在 react-styleguidist 中的 Markdown 中的嵌入式 HTML 上实现内联样式，甚至是具有关联样式的类。我不想全局设置所有标签的样式（我知道可以使用 styleguide.config.js 中的样式对象来完成），而是只设置一个表和我嵌入到 Markdown 文件中的关联行。例如：

StyleTest.md：

<table style="width: 100%">
  <tr>
    <th colspan="2">CustomerComponentView.js</th>
  </tr>
  <tr>
    <td>Correct</td>
    <td>Incorrect</td>
  </tr>
  <td style="width: 50%">

```css
// GOOD!

.customer-component {
    .header {
        color: red;
        font-size: 20px;
    }
}
```

  </td>

  <td style="width: 50%">

```css
// BAD!

.header {
    color: red;
    font-size: 20px;
}
```

  </td>
</table>

从我所见，似乎所有属性都被丢弃了，而不仅仅是 style 属性，因为当 react-styleguidist 呈现 Markdown 时，我的 colspan 也被丢弃了。我不相信它是内部使用的 markdown-to-jsx 库来将 Markdown 编译为 HTML，因为在测试这个库后，我发现在通过编译器运行后，属性、类和样式都保留了下来。

我尝试通过编写自定义 React 组件并手动使用 Prism 来通过复制和利用 react-styleguidist 内部使用的 highlightCode 函数来格式化代码，以一种非常hacky 的方式解决此问题。这行不通，因为我需要手动标记 lang-js 和自动生成的 rsg-pre--## 类，我不能总是保证它们可用：

TestComponent.js

const highlightCode = (code,lang) => {
    if (!lang) {
        return code;
    }

    const grammar = Prism.languages[lang];
    if (!grammar) {
        return code;
    }

    return Prism.highlight(code,grammar,lang);
};

const TestComponent = () => {
    const goodCSSExampleHTML = { __html: highlightCode(goodCSSExample,'css') };
    const badCSSExampleHTML = { __html: highlightCode(badCSSExample,'css') };

    return (
        <React.Fragment>
            <table id="test" style={{ width: '100%' }}>
                <tr>
                    <th colSpan={2}>CustomerComponentView.js</th>
                </tr>
                <tr>
                    <td>Correct</td>
                    <td>Incorrect</td>
                </tr>
                <tr>
                    <td style={{ width: '50%' }}>
                        <pre className="lang-js rsg--pre-36" dangerouslySetInnerHTML={goodCSSExampleHTML} />
                    </td>
                    <td style={{ width: '50%' }} dangerouslySetInnerHTML={badCSSExampleHTML} />
                </tr>
            </table>
        </React.Fragment>
    );
};

在跳过箍以使其正常工作后，我觉得这是一个糟糕的解决方案，应该有更好的方法来适当地实现属性。