分类导航

程序问答发布时间：2022-05-31 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何在 react-styleguidist 中为 Markdown 中的嵌入式 HTML 设置样式？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

开发过程中遇到如何在 react-styleguidist 中为 Markdown 中的嵌入式 HTML 设置样式？的问题如何解决？下面主要结合日常开发的经验，给出你关于如何在 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>
    );
};