Есть ли простой способ применить настраиваемую тему для выделения синтаксиса реакции?

Question

Я пытался сгенерировать фрагмент кода на своем веб-сайте в визуализированном текстовом редакторе с помощью response-syntax-highlighter. Я потратил некоторое время на использование этого плагина, и он мне нравится, однако я столкнулся с проблемой, на которую не могу найти ответа. Я хочу изменить некоторые цвета сгенерированного кода, но не могу найти другого способа сделать это, кроме использования их тем по умолчанию. Они позволяют применять стили к фону и коду, но не к диапазонам, содержащим цвета, есть ли простой способ создать и применить настраиваемую тему или просто настроить таргетинг на определенные классы и изменить их цвета?

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

const CodeDisplay = ({ active }) => {

const templateString = `
    const NewObject = New Shop(
        console.log('shop');
    )
`
    return (
        <>
            <SyntaxHighlighter
                language="jsx"
                style={atomDark}
                wrapLongLines
                customStyle={{
                    backgroundColor: "transparent",
                    opacity: "1",
                    marginTop: "-2rem",
                }}
                codeTagProps={{
                    style: {
                        color: "white",
                    },
                }}>
                {templateString}
            </SyntaxHighlighter>
        </>
    );
};

Снимок экрана вывода

Answer 1

Я думаю, что лучший способ сделать это - просто скопировать тему и отредактировать ее.

Тема, которую вы импортируете в свой код, доступна по адресу https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/src/styles/prism/atom-dark.js.

Вы можете загрузить этот файл, добавить его в систему управления версиями и изменить все, что захотите. Затем просто импортируйте отредактированный файл, где бы вы ни использовали SyntaxHighlighter.

Если вы вносите много изменений, которые считаете действительно крутыми, подумайте о том, чтобы сделать PR в библиотеке, чтобы другие люди тоже могли ее использовать!

Answer 2

Для меня лучше всего сработал способ стилизации кода, подобного теме в Visual Studio Code, - это указать useInlineStyles={false}чтобы предотвратить добавление встроенной информации о стиле CSS в каждый созданный элемент span. Однако RSH будет указывать определенное имя класса для этого объекта, что, кроме того, позволяет вам определять свои собственные стили CSS.

Моя конфигурация, т.е. выглядит так:

      ...
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
import ts from 'react-syntax-highlighter/dist/esm/languages/hljs/typescript';

import './rsh-style.css';

SyntaxHighlighter.registerLanguage('typescript', ts);


const calcMinLineNumberWidth = (code: string): string | null => {
    const lines = [...code].reduce((prev, current) => prev + (current === '\n' ? 1 : 0), 1);
    if (lines > 99) {
        return "50px";
    } else if (lines > 9) {
        return "40px";
    } else {
        return null;
    }
}

const highlightLine = (lineNumber: number, markLines: number[], color: string = "#FFDB81"):
    React.HTMLProps<HTMLElement> => {

    // only works when showLineNumbers and wrapLines are both enabled
    const style: React.CSSProperties = { display: "block", width: "fit-content" };
    if (markLines.includes(lineNumber)) {
        style.backgroundColor = color;
    }
    return { style };
}

const CodeList: FunctionComponent = (props: CodeListProps) => {
    const minWidth = calcMinLineNumberWidth(code);
    return (
    ...
        <div className="container">
            <div className="divider" />
            <SyntaxHighlighter language="typescript" style={style}
                className={"syntax-highlighter"}
                useInlineStyles={false}
                showLineNumbers={true}
                lineNumberStyle={{minWidth: minWidth}}
                wrapLines={true}
                lineProps={(line: number) => highlightLine(line, props.highlightLines, props.highlightColor)}
            >
                {code}
            </SyntaxHighlighter>
        </div>
    ...
    )
}

это даст результат, подобный видимому во фрагменте, добавленном внизу этого сообщения.

Лексер react-syntax-highlighter использует явно некоторые проблемы, так как в случае многострочных комментариев начало новой строки, обозначенное новым номером строки, аннотируется здесь с помощью class="hljs-comment"когда явно не должно. Кроме того, есть несколько вещей, которые не распознаются и, следовательно, правильно помечены, и поэтому выделение кода, как в выбранном вами редакторе, может быть невыполнимым.

С файлом CSS, также добавленным в виде фрагмента ниже, который в основном определяет цвета, которые VSCode использует для определенных ключевых элементов, я получаю результат, как в правой части изображения ниже. Для сравнения я также включил оригинальный стиль dark+стиль VSCode для справки. Некоторые изменения, такие как более серо-фиолетовый фон, сделаны специально, так как он лучше соответствует теме страницы.

Как можно видеть далее, выходные данные, возвращаемые RSH, не совсем способны форматировать код, как это делает VSCode, хотя большинство цветов должны быть похожи на те, которые использует VSCode в этой теме, по крайней мере, средство выбора цвета вернуло эти значения цвета.

Строка 19-21 на изображении справа демонстрирует выделение строки с помощью соответствующей функции, используемой в lineProps собственности, на всякий случай, если кому-то интересно, почему они другого цвета.