1

我创建了以下 React 组件。它实现了 react-syntax-highlighter：

import React from "react";
import { PrismAsyncLight as SyntaxHighlighter } from "react-syntax-highlighter";
import { coy } from "react-syntax-highlighter/dist/cjs/styles/prism";

export type CodeViewerProps = {
    language: string;
    code: string;
    linesToHighlight?: number[];
    startingLineNumber?: number;
}

export function CodeViewer({
    language, code, linesToHighlight = [], startingLineNumber = 1,
}: CodeViewerProps) {
    return (
        <SyntaxHighlighter
            startingLineNumber={startingLineNumber}
            language={language}
            style={coy}
            showLineNumbers
            wrapLines
            lineProps={(lineNumber) => {
                const style = { display: "block", width: "fit-content" };
                if (linesToHighlight.includes(lineNumber)) {
                    style.backgroundColor = "#ffe7a4";
                }
                return { style };
            }}
        >
            {code}
        </SyntaxHighlighter>
    );
}

如您所见，我使用lineProps道具通过设置其背景颜色来突出显示特定行。当我使用上述组件时，它会产生如下所示的输出：

react-syntax-highlighter React.js 示例

在上面突出显示的行中，您可以看到字符串"SUPER_SECRET_TOKEN"。我想知道是否有任何方法可以为该字符串应用不同的背景颜色。是否可以提供开始字符和结束字符来应用特定样式？

我浏览了文档，但没有找到任何可以帮助我突出显示一行中特定字符的内容。我试图编写一个自定义脚本来解析语法高亮组件的 DOM 结构，但结果证明它非常不可靠。

4

0 回答 0