以下是来自stackoverflow的解决办法：
原文：Is it possible to highlight specific characters in a line using 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={(lineNumber) => {
const style = { display: "block", width: "fit-content" };
if (linesToHighlight.includes(lineNumber)) {
style.backgroundColor = "#ffe7a4";
}
return { style };
}}