如何在.jsx文件中用React.js突出显示页面中的代码行？

Question

我尝试了一些库，但没有完成工作。

我试着：

  react-syntax-highlighter

(https://www.npmjs.com/package/react-syntax-highlighter)安装后并按照文档说明，在我的文件.jsx中始终找不到该模块。依赖项在我的package.json中，但是找不到该模块。(超自然活动)

   react-highlight

(https://github.com/akiran/react-highlight)模块已找到但不工作，线条的颜色始终为深色

  react-highlight 

(https://www.npmjs.com/package/react-highlight)

..。还有更多

如果有人对我文本着色有任何解决方案^^

​

代码是：

    import React, { useState, useEffect } from "react";
    import Highlight from "react-highlight";

    export const ButtonLib = () => {
        return (
            <div>
                <pre>
                    <code id="foo" ref={myRef}>
                        <Highlight language="javascript">
                            import React from "react";
                            import { Button } from "Antd";

                            export const Button = () => {
                                return (
                                     <span>
                                         <Button size="small">Small</Button>
                                         <Button size="medium">Medium</Button>
                                         <Button size="large">Large</Button>
                                         <JumboButton>Jumbo</JumboButton>                                                                                                                                                     <AuthenticationButton>Authentication</AuthenticationButton>
                                     </span>
                                 );
                            }
                        </Highlight>
                    </code>
              </pre>
         </div>
       );
};

Answer 1

根据react-highlight的官方文档

Visit Adding Styles In React Highlight

从我的角度来看，在组件中添加import语句应该是可行的。

import 'highlight.js/styles/github.css';

Answer 2

react-highlight只会用CSS类转换你的代码。如果没有任何CSS定义，您将看不到太大的区别。您必须包含来自highlight.js的样式，这些样式已经包含在节点包中，因此您可以立即导入其中的一个。不需要将highlight.js作为依赖项添加。

而不是

import 'highlight.js/styles/github.css'

你可以这样写：

import 'react-highlight.js/node_modules/highlight.js/styles/github.css'

您可以在https://highlightjs.org/static/demo/上预览所有样式。