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

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

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

Синтаксическая подсветка с react-syntax-highlighter

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

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

Компонент принимает основные свойства: код (внутренний контент), language и style. Есть дополнительные опции — см. документацию пакета для полного списка.

Установка

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

npm install react-syntax-highlighter --save

или

yarn add react-syntax-highlighter

Создание простого компонента CodeBlock

Создайте файл CodeBlock.js и импортируйте компонент:

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

const CodeBlock = ({ codeString }) => {
  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;

Лёгкая сборка (light build) и регистрация языков

Если размер сборки важен, используйте лёгкую версию. Она не включает набор стилей и языков по умолчанию — их нужно регистрировать вручную:

import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';

SyntaxHighlighter.registerLanguage('javascript', js);

Этот пример использует Highlight.js как движок подсветки.

Использование Prism вместо Highlight.js

Для Prism-версии импортируйте соответствующие экспорты и стили:

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

Для prism light:

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, поэтому для проектов с большим количеством React-примеров стоит рассмотреть Prism.

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

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


  {codeString}

Номера строк улучшают ссылочность к фрагментам кода в статьях и при обсуждении багов.

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

Можно переопределить внешний вид через customStyle (inline-стили) или через CSS-классы:


  {codeString}

Используйте customStyle для быстрой правки внешнего вида; для масштабных изменений удобнее создать CSS-обёртку.

Почему подсветка важна

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

Когда это не подходит

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

Если нужно интерактивное редактирование кода — лучше использовать редакторы (Monaco, CodeMirror, React Ace).
Для огромного числа уникальных языков или очень большого объёма кода в UI — может сказаться на производительности и размере бандла.
Если в проекте уже используется систематическая тема оформления (дизайн-система) и вы хотите единый стайлинг — возможно, проще реализовать подсветку на стороне сервера или использовать CSS-подход.

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

PrismJS напрямую (без обёртки) — меньше абстракций, гибкость в настройке.
Highlight.js напрямую — простая интеграция и много готовых языков.
Серверная подсветка (например, на этапе сборки статического сайта) — уменьшает runtime‑нагрузку.
Реактивные редакторы (Monaco, CodeMirror) — когда нужен интерактив.

Хейристики и рекомендации

По умолчанию используйте light build для production и регистрируйте только используемые языки.
Если в статьях много JSX/TSX — предпочитайте Prism.
Всегда учитывайте размер бандла: измерьте impact при добавлении библиотеки.
Для простых блогов достаточно Highlight.js с готовым стилем.

Краткая методика внедрения (мини-SOP)

Оцените список языков, которые нужно подсвечивать.
Решите, нужен ли light build для уменьшения веса.
Выберите движок: Prism для JSX/TSX, Highlight.js для простоты.
Настройте registerLanguage при использовании light build.
Добавьте showLineNumbers и customStyle по необходимости.
Протестируйте рендер на ключевых страницах и измерьте размер бандла.

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

Код рендерится со стилями на основных браузерах.
Размер бандла не увеличился критично (проходное значение — команда определяет).
Номера строк правильно выровнены и не ломают верстку.
Нет всплывающих XSS-уязвимостей при рендере входных фрагментов кода.

Проверочные тесты

Отобразить короткий и длинный фрагмент кода, проверить переносы и номера строк.
Проверить JSX/TSX-примеры в Prism и Highlight.js (если применимо).
Прогнать Lighthouse/Bundle Analyzer для оценки размера.

Краткий глоссарий

Light build: облегчённая версия библиотеки без встроенных языков и стилей.
registerLanguage: функция для регистрации языка в light build.
PrismJS / Highlight.js: движки подсветки синтаксиса.

Пример шаблона компонента (чек-лист для разработчика)

Выбран движок (Prism / Highlight.js).
Решено, использовать light build.
Зарегистрированы языки.
Добавлены тесты отображения и проверки безопасности.
Протестирован размер бандла.

Когда это может не сработать

Старые браузеры без поддержки необходимых CSS-фич могут некорректно отображать номера строк.
Если код приходит с небезопасных источников без санитизации — возможен риск, несмотря на внутренние меры библиотеки; всегда проверяйте входные данные.

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

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

Важно: для интерактивных сценариев и редакторов кода используйте специализированные решения (Monaco, CodeMirror).

Полезные заметки:

Примечание: для статических сайтов можно предварительно подсвечивать код на этапе сборки, чтобы снизить runtime-стоимость.
Важно: всегда проверяйте совместимость стилей с вашей дизайн-системой.