Подсветка кода в React с react-syntax-highlighter

Экран с подсвеченным блоком кода

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

Что такое react-syntax-highlighter

react-syntax-highlighter — компонент для React, который строит виртуальный DOM из синтаксического дерева, а не вставляет HTML через dangerouslySetInnerHTML. Это снижает риск XSS-уязвимостей и упрощает интеграцию с React-компонентной моделью.

Под капотом можно использовать две библиотеки: Highlight.js и PrismJS. Пакет предоставляет набор стилей «из коробки» и позволяет выбирать между полноценными и облегченными сборками.

Кратко:

Highlight.js — широкий набор языков, классические темы.
PrismJS — лучше подходит для JSX/TSX и гибкой кастомизации.

Быстрый старт в React

Установите пакет через npm или yarn:

npm install react-syntax-highlighter --save

Создаём компонент CodeBlock.js. Обратите внимание на согласованность имён переменных (codeString):

import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';

const CodeBlock = ({ codeString, language = 'javascript' }) => {
  return (
    
      {codeString}
    
  );
};

export default CodeBlock;

Пример использования в приложении:

import React from 'react';
import CodeBlock from './CodeBlock';

const App = () => {
  const codeString = `const square = n => n * n`;
  return (
    
      Пример
      
    
  );
};

export default App;

Important: полная сборка увеличивает размер бандла. Если это критично, используйте light-версию и регистрируйте только нужные языки.

Light build: регистрация языков (Highlight.js)

Пример с Highlight.js light-билдом и регистрацией JavaScript:

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';

SyntaxHighlighter.registerLanguage('javascript', js);

const CodeBlock = ({ codeString }) => (
  
    {codeString}
  
);

Использование PrismJS

Для Prism-подсветки:

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

const CodeBlock = ({ codeString }) => (
  
    {codeString}
  
);

Для лёгкой версии Prism (PrismLight) также требуется регистрация языков:

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 часто даёт лучшую поддержку JSX/TSX и более современную тему оформления.

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

Чтобы показать номера строк, передайте проп showLineNumbers:


  {codeString}

Замечание: showLineNumbers — булев проп. Для кастомного форматирования номеров можно использовать lineNumberStyle.

Кастомные стили

Чтобы изменить оформление блока, используйте customStyle или wrapLines/lineProps для более тонкой настройки:


  {codeString}

Также можно комбинировать тему и свой CSS-класс для контейнера.

Практическая методология внедрения подсветки кода

Мини-методология (быстрый план):

Оцените требования — какие языки и нужен ли SSR/SSG.
Выберите движок (Highlight.js для общего набора, Prism для JSX/TSX).
Решите, full или light — при ограничениях размера используйте light и регистрируйте языки по одному.
Создайте общий компонент CodeBlock с параметрами: language, showLineNumbers, style, customStyle.
Тестируйте в среде сборки и на страницах с большим количеством фрагментов (профилирование).
Добавьте документацию для контрибьюторов — как регистрировать новый язык, где менять темы.

Когда подсветка может не подойти

Counterexamples:

Статические сайты, где генерация контента происходит на стороне сервера и нужен минимальный бандл: иногда удобнее подсвечивать на этапе сборки (build-time highlighting) с помощью remark/prismjs в MD-генераторе.
Если код приходит из ненадёжного источника и вы не контролируете содержимое, дополнительная фильтрация и CSP обязательны.

Альтернативные подходы

Build-time highlighting: генерировать HTML с подсветкой на этапе сборки (remark + rehype + prism). Подходит для SSG и уменьшает клиентскую нагрузку.
Web Components или сторонние виджеты: удобно, если нужно единообразие между несколькими платформами.

Советы по производительности и упаковке

Используйте light-билд и регистрируйте только необходимые языки.
Кешируйте результаты подсветки, если код часто повторяется.
Избегайте импортов всех стилей — подключайте только нужную тему.

Безопасность и политика контента

react-syntax-highlighter снижает риск XSS, потому что не вставляет готовый HTML через dangerouslySetInnerHTML. Тем не менее:

Применяйте Content Security Policy (CSP).
Валидируйте или экранируйте пользовательский ввод перед подсветкой.
Для данных из внешних источников используйте серверную валидацию.

Чек-лист ролей

Автор контента:

Убедиться, что код корректен и синтаксически валиден.
Передавать language явно.

Разработчик UI:

Реализовать общий CodeBlock с поддержкой light/full, showLineNumbers, customStyle.
Зарегистрировать языки в сборке по мере необходимости.

DevOps/Release:

Проверить размер бандла до и после интеграции.
Настроить сборки для минимизации: tree-shaking, code-splitting.

Краткая галерея вариантов использования

Блоги и документация: часто нужен широкий набор языков — возможно full-билд.
IDE-похожие редакторы: динамическая подсветка + номера строк + выделение строк.
Презентации и слайды: приоритет на компактность — light-билд.

Критерии приёмки

Код подсвечивается корректно для минимум трёх целевых языков.
Номера строк отображаются по требованию.
Размер бандла не увеличивается критически (> допустимого порога команды).

Частые вопросы

Нужна ли подсветка на сервере?

Для SSG или SEO-чувствительных страниц можно генерировать подсветку на этапе сборки, чтобы убрать нагрузку с клиента.

Что лучше для JSX — Highlight.js или Prism?

Prism обычно даёт лучшую поддержку JSX/TSX и более гибкую кастомизацию тем.

Как уменьшить вес бандла?

Используйте light-билд и регистрируйте только нужные языки.

Короткое резюме:

react-syntax-highlighter — удобный и безопасный способ подсветки кода в React.
Выбирайте между Highlight.js и Prism в зависимости от потребностей (JSX, набор языков).
Для оптимизации используйте light-билды, регистрацию отдельных языков и кастомные стили.

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