Есть ли способ показать код компонента React в тег <code>?

Question

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

Вот компонент:

render = () => {
    let component = (
            <Slider
                onSlide={this.handleSlide}
                totalCount={120}
            />
    );

    return (
        <div>
            <h2>Slider Test:</h2>
            {component}

            <code>HOW TO PRINT COMPONENT CODE HERE?</code>
        </div>
    );
};

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

Как можно вывести на экран код компонента без необходимости повторять его внутри тега?

Есть ли способ сделать это напрямую или через существующую библиотеку npm?

Answer 1

Вы можете экранировать код, и он должен отображаться правильно.

Вы можете использовать эту библиотеку, чтобы сделать это escape- html npm

Вы должны Также можно найти специализированные библиотеки, чтобы сделать это так: представление кода реакции npm