React 中的语法高亮指南

软件开发人员阅读的代码与编写的代码一样多。因此，要增强代码的可读性，不仅要努力编写可读的代码，还要应用适当的代码格式和语法高亮。

开发人员每天使用几种编程和非编程计算机语言。每种语言都有其语法，因此需要语法高亮。为了在浏览器环境中应用语法高亮，存在 Prism、Highlight 和 React 语法高亮等库。

这些库中的每一个都有其优点和缺点。其中一些库是为使用纯 JavaScript 而开发的，而另一些库也支持 React 等前端框架。

本文将是 Prism 等流行的语法高亮库以及如何将它们与 React 一起使用的完整指南。我们还将强调他们的优势和劣势。

目录

• 简介prism.js

• 如何在 React 中使用 Prism 进行语法高亮

• 如何使用 prism-react-renderer

• react-syntax-highlighter 简介

• 如何使用 react-syntax-highlighter

• 彩虹简介

简介prism.js

Prism 是 JavaScript 中最流行的语法高亮库之一，在 GitHub 上有超过 10,000 颗星。您可以将它与纯 JavaScript 和 React 等框架一起使用。它支持多种语言，并拥有丰富的主题和插件生态系统，您可以使用它们来扩展其核心功能。

要体验 Prism，您可以通过 CDN 快速加载它或下载源代码并使用标签将其添加到您的标记中script。您还可以下载对特定语言、主题和插件的支持。

核心 Prism 库占用空间小。它的压缩和压缩包大小约为 2kB。阅读App免费小说追书，内置了多达6000+小说书源，无限切换爽到起飞！尽管您使用核心 Prism 下载的附加主题和插件以扩展其功能可能会增加捆绑包的大小，但您可以完全控制可以下载哪些插件或主题。

此外，与某些语法荧光笔不同，Prism 强制您使用语义 HTML 进行代码表示。可定制性和其他几个功能使 Prism 成为语法突出显示的流行选择。

Babel-plugin-prismjs是一个方便的包，用于将 Prism 与 Babel 和 webpack 一起使用。Switch520游戏资源网(xxxxx520.com)，免费白嫖破解switch、PC、PS等3a游戏大作！在下一节中，我们将研究在 React 应用程序中使用这个插件。

如何在 React 中使用 Prism 进行语法高亮

如上一节所述，开始使用 Prism 最简单、最快的方法是使用 CDN。尽管 CDN 可能很方便，但在使用 React 等框架时几乎总是不可能使用它。因此，您需要从 NPM 安装它。

sh
# using npm
npm install prismjs
# using yarn
yarn add prismjs

如果你想在 React 应用程序中使用 Prism 进行语法高亮，babel-plugin-prismjsBabel 插件就派上用场了。您可以使用它来配置与 Prism 捆绑的语言、主题和插件。您可以将其安装为 NPM 的开发依赖项。

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

sh
# using npm
npm i -D babel-plugin-prismjs
# using yarn
yarn add -D babel-plugin-prismjs

您需要在 Babel 配置文件中注册插件，如下所示：

{
  "plugins": [
    ["prismjs", {
        "languages": ["javascript", "css", "markup"],
        "plugins": ["line-numbers"],
        "theme": "twilight",
        "css": true
    }]
  ]
}

您可以在配置文件中包含项目所需的语言、插件和主题。查看 Prism 文档以获取支持的语言以及您可以使用的可用主题和插件的完整列表。

如果要使用babel-plugin-prismjs插件，请设置自定义反应应用程序。Windows11官宣Moment 1更新正式发布，大量新功能更新！附官方ISO镜像(简/繁/英)但是，要将其与Create React App一起使用，您需要弹出 - 我认为这样做违背了使用 Create React App 的目的。

此外，一些 React 语法高亮包在后台使用 Prism。我们将在下面的部分中探讨其中的一些。如果您的项目不是基于自定义 React 应用程序，您可能会考虑使用其中之一。

完成上述设置后，将 Prism 导入 React 组件并调用钩子highlightAll中的方法，如下所示：useEffect

import React, { useEffect } from "react";
import Prism from "prismjs";
​
function App() {
  useEffect(() => {
    Prism.highlightAll();
  });
  return (
    

      

        You can declare a variable in JavaScript using the
        const, let or var keyword. 
 
 ); } export default App;

使用 Prism 时，您需要将内联代码包装在codeHTML 标记中，并根据您突出显示的语言，对其应用适当的类。类名应采用lang-xxxx或形式language-xxxx。

xxxx是语言的占位符。在上面的示例中，我们将lang-javascript类添加到code元素中，因为我们突出显示了 JavaScript 代码。

正如上一节所指出的，Prism 强制您在向标记添加代码时使用语义 HTML。因此，在突出显示代码块时，您必须将代码包装在pre元素中。

在渲染代码块时，将您的功能提取到单独的组件以实现可重用性很方便，如下例所示。您可以将代码块和语言作为道具传递。

import React, { useEffect } from "react";
import Prism from "prismjs";
​
const CodeBlock = ({ code, language }) => {
  useEffect(() => {
    Prism.highlightAll();
  }, []);
  return (
    
      
    

  );
};
​
export default CodeBlock;

sh
# install with npm
npm i prism-react-renderer
​
# install with yarn
yarn add prism-react-renderer

import React from "react";
import Highlight, { defaultProps } from "prism-react-renderer";
​
export const CodeBlock = ({ code, language }) => {
  return (
    <Highlight {...defaultProps} code={code} language={language}>
      {({ className, style, tokens, getLineProps, getTokenProps }) => {
        return (
          <pre className={className} style={style}>
            
                  {tokens.map((line, idx) => {
                    return (
                      

                        {line.map((token, i) => {
                          return (
                            
                          );
                        })}
                      
                    );
                  })}
                
          </pre>
        );
      }}
    </Highlight>
  );
};

上面的代码块说明了如何使用 prism-react-renderer 包突出显示一个简单的代码块。该Highlight组件将几个参数传递给 render prop。F搜(fsoufsou.com)，国内最接近谷歌的搜索引擎，精准搜索想要搜索的结果！你可以使用这些道具来呈现你的代码块，就像上面的例子一样。

可以导入CodeBlock我们上面写的组件，在渲染代码块的时候传入codeand属性。language这样做可以使组件可重用。

import { CodeBlock } from "./CodeBlock";
​
const code = `
  const add = (a, b) => {
    return a + b;
  }
`;
​
function MyComponent() {
  return (
    

      
    
  );
}

react-syntax-highlighter 简介

react-syntax-highlighter 是一个 React 组件，用于在 React 中突出显示语法。它在内部使用 Prism 和 Highlight 进行语法高亮。Prism 和 Highlight 是浏览器环境中流行的语法高亮器之一。

您从 NPM安装它并传入必要的道具以开始使用 react-syntax-highlighter。

sh
# using npm
npm i react-syntax-highlighter

# using yarn
yarn add react-syntax-highlighter

与前几节中描述的某些包不同，您不需要额外的配置即可使其工作。让我们看看如何在下面的部分中使用它在 React 中进行语法高亮。

如何使用 react-syntax-highlighter

安装 react-syntax-highlighter 后，您可以导入和渲染必要的组件。如上一节所述，您可以选择使用 Highlight 或 Prism 进行高亮显示。

但是，react-syntax-highlighter 会导出一个默认使用 highlight 的组件。渲染时需要将配置选项作为道具传递，如下所示：

import SyntaxHighlighter from "react-syntax-highlighter";
import { dracula } from "react-syntax-highlighter/dist/esm/styles/hljs";

const code = `
console.log("hello world");
`;

function App() {
  return (
      
  );
}

如上面的示例所示，您将要突出显示的代码和格式化语言作为字符串道具传递。除了children、language和styleprops 之外，还有其他几个格式化选项，例如显示和样式化行号。请检查文档以获取可用选项的完整列表。

正如介绍中所指出的，react-syntax-highlighter 与 Highlight 和 Prism 捆绑在一起。您也可以使用 Prism，而不是像上面示例中那样使用 Highlight。使用 Prism 时，您还需要导入您要使用的 Prism 主题，如下例所示。

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';

尽管上述使用它的方法加载了几个开箱即用的功能，但它占用的空间很大。因此，react-syntax-highlighter 具有轻量级的构建，仅用于加载和捆绑您需要的功能。

但是，请注意，轻量级构建没有默认样式。因此，您需要自己导入主题。registerLanguage此外，使用以下示例中的函数导入和注册语言。

import { Light as SyntaxHighlighter } from "react-syntax-highlighter";

import typescript from "react-syntax-highlighter/dist/esm/languages/hljs/typescript";
import a11yDark from "react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark";

SyntaxHighlighter.registerLanguage('typescript', typescript);

上面的 light build 示例默认使用 Highlight。您可以类似地使用 Prism。导入PrismLight而不是Light，如下例所示。

import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";

import typescript from "react-syntax-highlighter/dist/esm/languages/prism/typescript";
import a11yDark from "react-syntax-highlighter/dist/esm/styles/prism/a11y-dark";

SyntaxHighlighter.registerLanguage('typescript', typescript);

查看文档以了解 react-syntax-highlighter 包的更多功能和限制。

彩虹简介

上面提到的语法高亮库是最流行和最容易与 React 一起使用的。

然而，它们并不是唯一的语法高亮库。Rainbow 是另一个简单轻量的语法高亮包。这是值得探索的，尤其是当你不使用像 React 这样的框架时。

结论

在发布包含内联代码片段或代码块的内容以增加可读性时，语法高亮是不可避免的。在浏览器环境中突出显示代码时，您可以选择几个库。语法高亮库中最受欢迎的是 Prism 和 Highlight。

如上所述，您可以使用一些带有纯 JavaScript 的语法高亮库和其他带有 React 等框架的库。Babel 插件允许您将babel-plugin-prismjsPrism 与 webpack 等捆绑器一起使用。但是，您也可以使用捆绑 Prism 修改版本的 React 包，例如 prism-react-renderer 或 react-syntax-highlighter。

在考虑核心库时，Prism 占用空间很小。但是，当您使用其他主题和插件扩展其核心功能时，它会变得相当大。

尽管我们在本文中的重点是可用于 React 的语法高亮显示，但其他几个语法高亮显示库（如 Rainbow）也值得探索。如果你不使用像 React 这样的前端框架，Rainbow 是一个很棒的语法高亮库。