Включение переноса строк с помощью React-Syntax-Highlighter?

Question

Я использую React Syntax Highlighter , чтобы выделить код при рендеринге файла уценки до HTML.

Я вижу, что мне нужно установить wrapLines на true так что для каждой строки есть родительский элемент span. Однако я не понимаю, что мне следует передать на lineProps, чтобы включить перенос строк?

Например, вы можете посмотреть на этот снимок экрана.

введите описание изображения здесь

Я бы тоже хотел сохранить номера строк.

Большое спасибо за помощь!

Answer 1

Меня это тоже очень сбивало с толку.

wrapLines - это НЕ об переносе строк кода на заранее заданную длину или ширину контейнера.

Речь идет об окружении каждой строки в содержащем элементе DOM («обертывании» строки в элементе DOM).

Я полагаю, что имя параметра, вероятно, следует изменить.

Источники

• Исходный выпуск: https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/44
• Pull Request: https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/46

Answer 2

В соответствии с документами https://www.npmjs.com/package/react-syntax-highlighter вы можете использовать:

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

попробуйте следующее:

<SyntaxHighlighter
  lineProps={{style: {paddingBottom: 8}}}
  wrapLines={true}
  showLineNumbers={true}
</SyntaxHighlighter>

фрагмент песочницы: https://codesandbox.io/s/syntax-highlighter-demo-skhkw