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

Эта статья покажет вам, как использовать react-syntax-highlighter для выделения блоков кода в React. Вы создадите компонент блока кода, способный подсвечивать переданный ему код, используя синтаксис предоставленного языка.

Подсветка синтаксиса с помощью react-syntax-highlighter

Подсветка синтаксиса реакции позволяет подсвечивать код с помощью React. в отличие от других подсветка синтаксиса, react-syntax-highlighter не полагается на ComponentDidUpdate или ComponentDidMount для вставки выделенного кода в DOM с использованием опасноSetInnerHTML.

Такой подход опасен, потому что он подвергает приложение атаки межсайтового скриптинга.

Вместо этого он использует синтаксическое дерево для построения виртуального DOM и обновляет его только с изменениями.

instagram viewer

Компонент использует PrismJS и Highlight.js в фоновом режиме. Вы можете использовать любой из них, чтобы выделить свой код. Он очень прост в использовании, так как обеспечивает нестандартный стиль.

Компонент react-syntax-highlighter принимает код, язык и стиль в качестве реквизита. Компонент также поддерживает другие параметры настройки. Вы можете найти их в документация по подсветке синтаксиса реакции.

Использование компонента react-syntax-highlighter

Чтобы начать использовать подсветку синтаксиса реакции в React, установите ее через npm.

нпм установить реагировать-синтаксис-подсветка --спасти

Создайте новый компонент с именем CodeBlock.js в вашем приложении React и импортируйте реагировать-синтаксис-подсветка:

импорт Подсветка синтаксиса из 'подсветка синтаксиса реакции';
импорт { докко } из 'подсветка синтаксиса реакции/dist/esm/styles/hljs';
константа CodeBlock = ({кодовая строка}) => {
возвращаться (
<Язык подсветки синтаксиса="JavaScript" стиль = {docco}>
 {кодовая строка}
</SyntaxHighlighter>
 );
};

Компонент SyntaxHighlighter принимает используемый язык и стиль. Он также принимает строку кода в качестве своего содержимого.

Вы можете визуализировать вышеуказанный компонент следующим образом:

константа Приложение = () => {
константа строка кода = `
константа Квадрат = (n) => возвращаться п * п
 `
возвращаться(
<Кодовая строка CodeBlock={codeString}/>
 )
}

Важно отметить, что использование react-syntax-highlighter может увеличить размер вашей сборки, поэтому, если вам нужно, вы можете импортировать облегченную сборку. Однако легкая сборка не имеет стилей по умолчанию.

Вам также потребуется импортировать и зарегистрировать нужные языки с помощью регистрацияЯзык функция, экспортированная из легкой сборки.

импорт { Легкий в качестве Подсветка синтаксиса } из 'подсветка синтаксиса реакции';
импорт js из 'подсветка синтаксиса реакции/расстояние/ESM/языки/hljs/javascript';
SyntaxHighlighter.registerLanguage('JavaScript', js);

Этот компонент использует Highlight.js для выделения кода.

Чтобы вместо этого использовать PrismJS, импортируйте его из пакета react-syntax-highlighter следующим образом:

импорт { Призма в качестве Подсветка синтаксиса } из "реакция-синтаксис-подсветка";
импорт { vscDarkPlus } из "реакция-синтаксис-подсветка/расстояние/esm/стили/призма";

Для сборки prism light импортируйте PrismLight и зарегистрируйте язык, который вы используете.

импорт { Призмлайт в качестве Подсветка синтаксиса } из 'подсветка синтаксиса реакции';
импорт jsx из 'подсветка синтаксиса реакции/dist/esm/languages/prism/jsx';
импорт призма из 'подсветка синтаксиса реакции/расстояние/ESM/стили/призма/призма';
SyntaxHighlighter.registerLanguage('jsx', jsx);

Использование prism полезно, особенно при выделении jsx, потому что react-syntax-highlighter не поддерживает его полностью.

Добавление номеров строк в кодовый блок

Теперь, когда вы знаете, как выделить блок кода, вы можете начать добавлять дополнительные функции, такие как номера строк.

С реактивным синтаксическим маркером вам нужно только передать показатьLineNumbers к компоненту SyntaxHighlighter и установите для него значение true.

<Язык подсветки синтаксиса="JavaScript" style={docco} showLineNumbers="истинный">
 {кодовая строка}
</SyntaxHighlighter>

Теперь компонент будет отображать номера строк рядом с вашим кодом.

Использование пользовательских стилей в вашем компоненте

Несмотря на то, что react-syntax-highlighter предоставляет стили, иногда вам может потребоваться настроить блоки кода.

Для этого пакет позволяет передавать inline CSS-стили в свойство customStyle, как показано ниже:

<Язык подсветки синтаксиса="JavaScript" style={vscDarkPlus} customStyle={{borderRadius: "5 пикселей", фоновый цвет: "#001E3C"}} >
 {кодовая строка}
</SyntaxHighlighter>

В этом примере выделенный блок кода будет иметь настраиваемый радиус границы и цвет фона.

Важность подсветки синтаксиса

Вы можете использовать пакет react-syntax-highlighter для выделения кода в React. Вы можете использовать облегченную версию, чтобы уменьшить размер сборки и настроить блоки кода, используя собственные стили.

Выделение фрагментов кода улучшает внешний вид кода, улучшает его читабельность и делает его более доступным для читателей.