react-syntax-highlighter

React 语法高亮器

基于<a href="https://github.com/wooorm/lowlight">lowlight</a>和<a href="https://github.com/wooorm/refractor">refractor</a>（由<a href="https://github.com/wooorm">wooorm</a>开发）的React语法高亮组件。

可以在<a href="https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/">这里</a>查看简单演示，以及在<a href="https://conorhastings.github.io/redux-test-recorder/demo/">这里</a>查看组件高亮生成的测试代码。

对于React Native，你可以使用<a href='https://github.com/conorhastings/react-native-syntax-highlighter'>react-native-syntax-highlighter</a>。

安装

npm install react-syntax-highlighter --save

为什么选择这个？

虽然已经有其他React语法高亮器，但为什么要使用这个呢？最主要的原因是，其他高亮器都依赖于在componentDidMount和componentDidUpdate中触发调用来高亮代码块，然后使用dangerouslySetInnerHTML或原生JavaScript手动修改DOM来插入渲染函数。而本组件利用语法树动态构建虚拟DOM，这样在发生变化时只需更新变化的DOM部分，而不是完全重写。因此，它更符合React的习惯用法，并允许使用从React 0.14版本引入的纯函数组件。

JavaScript样式！

在为自己的项目寻找语法高亮器时，我遇到的最大痛点之一就是需要在页面上添加样式表标签。我希望能在我的模块中提供开箱即用的代码样式，而不需要尴尬地引入其他库的样式表。本模块中的所有样式都基于JavaScript，并且所有highlight.js支持的样式都已移植！

我理解并非所有人都喜欢JavaScript样式，因此你可以选择通过将useInlineStyles属性设置为false（默认为true）来使用基于CSS的样式，并为元素添加类名。

使用方法

属性

• language - 要高亮的代码语言。可用选项hljs版本在此，prism版本在此。（传入text将只渲染普通等宽文本）
• style - 根据你从react-syntax-highlighter还是react-syntax-highlighter/prism目录导入，需要从styles/hljs或styles/prism目录引入的样式对象。hljs样式在此，prism样式在此。import { style } from 'react-syntax-highlighter/dist/esm/styles/{hljs|prism}'。如果未包含样式，将使用默认样式。
• children - 要高亮的代码。
• customStyle - 将与pre标签顶级样式合并的属性，这里的样式会覆盖之前的样式。
• codeTagProps - 将传递给高亮代码元素直接父级<code>标签的属性。用于设置样式/分配类名。
• useInlineStyles - 如果此属性设为false，react syntax highlighter将不会向元素添加样式对象，而是添加类名。然后你可以使用highlight.js提供的CSS文件之一来设置代码块样式。
• showLineNumbers - 如果启用，将在代码块旁显示行号。
• showInlineLineNumbers - 如果与showLineNumbers一起启用，行号将渲染到每行中，这允许在使用如<a href="https://github.com/conorhastings/react-syntax-highlighter-virtualized-renderer">react-syntax-highlighter-virtualized-renderer</a>等渲染器时正确显示行号。（如果showLineNumbers为false，此属性将不起作用。）
• startingLineNumber - 如果启用showLineNumbers，行号将从此处开始计数。
• lineNumberContainerStyle - 行号容器默认显示在左侧，右填充10px。你可以使用此属性覆盖这些样式。
• lineNumberStyle - 传递给包裹每个数字的span的内联样式。可以是对象，也可以是接收当前行号作为参数并返回样式对象的函数。
• wrapLines - 布尔值，决定是否将每行代码包裹在父元素中。默认为false，当为false时无法对行级元素执行操作。你可以在<a href="https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/diff.html">这里</a>看到这个功能的示例。
• wrapLongLines - 布尔值，指定是否使用white-space: pre-wrap或white-space: pre来设置<code>块的样式。演示
• lineProps - 如果wrapLines为true，则传递给包裹每行的span的属性。可以是对象，也可以是接收当前行号作为参数并返回属性对象的函数。
• renderer - 可选的自定义渲染器，用于渲染代码行。示例请参见<a href="https://github.com/conorhastings/react-syntax-highlighter-virtualized-renderer">这里</a>。
• PreTag - 用于替代默认pre标签的元素或自定义React组件，是组件的最外层标签（适用于不针对DOM的自定义渲染器）。
• CodeTag - 用于替代默认code标签的元素或自定义React组件，是组件树的第二个标签（适用于不针对DOM的自定义渲染器）。
• spread props 将任意属性传递给包裹代码的pre标签。

import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
const Component = () => {
  const codeString = '(num) => num + 1';
  return (
    <SyntaxHighlighter language="javascript" style={docco}>
      {codeString}
    </SyntaxHighlighter>
  );
};

Prism

使用<a href="https://github.com/wooorm/refractor">refractor</a>，我们可以使用基于Prism.js语言的抽象语法树，而不是highlight.js。这在高亮jsx时特别有益，这是本模块长期未解决的问题。使用方法基本相同，尽管目前还不支持浅色模式（但将在未来推出）。你可以在<a href="https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html">这里</a>查看使用Prism(refractor)的演示（包括jsx）。

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';
const Component = () => {
  const codeString = '(num) => num + 1';
  return (
    <SyntaxHighlighter language="javascript" style={dark}>
      {codeString}
    </SyntaxHighlighter>
  );
};

轻量级构建

以上述方式使用的React语法高亮器可能会占用相当大的空间。对于那些希望更精确控制所需内容的人来说，有一个选项可以导入轻量级构建。如果你选择使用这种方式，你需要专门导入所需的语言并使用轻量级构建的registerLanguage导出来注册它们。此外，也没有提供默认样式。

import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
import docco from 'react-syntax-highlighter/dist/esm/styles/hljs/docco';

SyntaxHighlighter.registerLanguage('javascript', js);

你可以从react-syntax-highlighter中引入PrismLight来使用Prism轻量级构建，而不是标准轻量级构建。

import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';

SyntaxHighlighter.registerLanguage('jsx', jsx);

异步构建

为了优化包大小并尽快渲染，有一个Prism轻量级和轻量级的异步版本。这些版本要求你使用支持动态导入语法的打包工具，如webpack。在加载代码分割时，代码将显示行号但不会高亮。

Prism版本：

import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';

Highlight版本：

import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter';

支持的语言

通过静态字段supportedLanguages访问。

SyntaxHighlighter.supportedLanguages;

使用React语法高亮器构建的项目

• mdx-deck - 基于MDX的演示文稿
• codecrumbs - 通过在源代码中放置面包屑来学习、设计或记录代码库。支持实时更新、多语言和轻松分享。
• Spectacle Editor - 一个基于Electron的应用，用于创建、编辑、保存和发布Spectacle演示文稿。集成了Plotly支持。
• Superset - Superset是一个设计用于可视化、直观和交互式的数据探索平台。
• Daydream - 一个Chrome扩展，可将你的操作记录为nightmare脚本
• CodeDoc - 基于Electron构建的React应用，用于创建项目文档
• React Component Demo - 一个React组件，用于制作其他React组件的实时可编辑演示。
• Redux Test Recorder - 一个Redux中间件，通过UI交互自动为reducer生成测试。React插件使用了语法高亮器。
• GitPoint - iOS版GitHub。使用React Native构建。（使用react-native-syntax-highlighter）
• Yoga Layout Playground - 用多种语言生成Yoga布局代码
• Kibana - 基于浏览器的Elasticsearch分析和搜索仪表板。
• Golangci Web
• Storybook Official Addons
• Microsoft Fast DNA
• Alibaba Ice
• Uber BaseUI Docs
• React Select Docs
• Auto-layout - 使用flex布局
• npmview - 一个查看npm包文件的Web应用
• Static Forms - 静态网站的免费HTML表单。
• React DemoTab - 一个React组件，用于轻松创建其他组件的演示
• codeprinter - 轻松打印代码
• Neumorphism - 软UI/新拟物阴影的CSS代码生成器
• grape-ui - 使用styled-system和其他开源组件的组件库。
• ✅ Good Arduino Code - Arduino编码示例的精选库
• marmota.app - 一个用于创建简单Markdown演示文稿的桌面应用

如果你的项目使用了react-syntax-highlighter，请发送PR来添加！

许可证

MIT