-2

Estou criando uma aplicação onde preciso exibir trecho do código como exemplo, já li sobre e até consegui ter um resultado médio onde renderizava o conteúdo dentro de um textarea, porém gostaria que ficasse da mesma forma que aqui no stack.

Exemplo:

import React from 'react'
import { useRouteMatch } from 'react-router-dom'
import DescriptionHook from '../Components/DescriptionHook'

const UseMemo: React.FC = () => {
    const { url } = useRouteMatch()
    return (
        <>
            <DescriptionHook
                name={url.replace('/', '')}
                description="
                  O hook useMemo serve para memorização de valores já calculados."
            />
        </>
    )
}

export default UseMemo

Existe alguma lib ou alguma forma que facilite essa demanda ?

1 Resposta 1

-3

Você pode usar a tag <pre> do HTML pra exibir um bloco com formatação de código (fonte de largura fixa, etc).

Caso queira exibir o código colorido, é um pouco mais complicado. Você pode pesquisar por bibliotecas que façam isso, e então seguir as instruções da biblioteca escolhida. Utilize a palavra chave "syntax hightlight" pra buscar por uma biblioteca no google. Não posso te recomendar nenhuma aqui.

PS: Me lembro agora do projeto shiki-twoslash, que é o código usado pra gerar os blocos de exemplo na documentação do typescript, se interessar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .