Нумерация строк

В библиотеке MDX (Markdown for JSX) работа с нумерацией строк кода является важным аспектом для создания наглядной и читаемой документации. MDX позволяет интегрировать JSX-компоненты в Markdown, что делает возможным более гибкое управление отображением кода и его форматированием, включая нумерацию строк.

Использование компонента pre и code

Для отображения блока кода с нумерацией строк обычно используют комбинацию тегов 

 и
:


  
    {`function sum(a, b) {
      return a + b;
    }`}
  



При таком подходе нумерация строк отсутствует по умолчанию, так как
Markdown и MDX не добавляют её автоматически. Для решения этой задачи
применяют сторонние библиотеки или кастомные компоненты.


Подключение
синтаксического подсветчика с нумерацией


Наиболее популярный способ — использование
prism-react-renderer. Эта библиотека обеспечивает подсветку
синтаксиса и поддерживает нумерацию строк через собственные
компоненты.


Пример интеграции:


import Highlight, { defaultProps } from "prism-react-renderer";
import theme from "prism-react-renderer/themes/github";

const CodeBlock = ({ code, language }) => (
  
    {({ className, style, tokens, getLineProps, getTokenProps }) => (
      
        {tokens.map((line, i) => (
          

            
              {i + 1}
            
            {line.map((token, key) => (
              
            ))}
          

        ))}
      

    )}
  
);

export default CodeBlock;


Ключевые моменты реализации:


    

  • tokens.map: разбивает код на
строки;
    • 

  • i + 1: добавляет нумерацию строк
слева;
    • 

  • getLineProps и
getTokenProps: обеспечивают корректное
форматирование и подсветку синтаксиса;
    • 

  • CSS-стили: позволяют сделать номера строк менее
навязчивыми, сохранив читаемость.
    • 



Динамическая
нумерация строк для больших блоков


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


const HighlightLines = ({ code, language, highlight = [] }) => (
  
    {({ className, style, tokens, getLineProps, getTokenProps }) => (
      
        {tokens.map((line, i) => {
          const isHighlighted = highlight.includes(i + 1);
          return (
            

              
                {i + 1}
              
              {line.map((token, key) => (
                
              ))}
            

          );
        })}
      

    )}
  
);


Этот подход позволяет:


    

  • Подсвечивать отдельные строки по их номеру;
    • 

  • Сохранять структуру кода для длинных файлов;
    • 

  • Использовать в образовательных материалах, где важно выделить
конкретный участок.
    • 



Интеграция с Markdown


В MDX можно использовать компонент напрямую в Markdown-разметке:




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


Настройка стилей нумерации


Для улучшения визуального восприятия нумерации строк
рекомендуется:


    

  • Ограничивать ширину колонки с номерами строк
(width: 2em или 3em);
    • 

  • Использовать полупрозрачный цвет для номеров
(opacity: 0.5);
    • 

  • Добавлять отступы между номерами и самим кодом
(margin-right: 1em).
    • 



Автоматическая
нумерация через MDX-плагины


Существуют плагины для MDX и Gatsby, такие как
gatsby-remark-prismjs, которые позволяют:


    

  • Автоматически подсвечивать синтаксис;
    • 

  • Включать нумерацию строк через конфигурацию;
    • 

  • Поддерживать различные темы оформления.
    • 



Конфигурация в gatsby-config.js может выглядеть так:


{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: `gatsby-remark-prismjs`,
        options: {
          showLineNumbers: true,
        },
      },
    ],
  },
}


Использование таких плагинов упрощает работу с длинными кодовыми
блоками и снижает необходимость ручного добавления нумерации.
Оглавление