Exibir bloco de código

Opa Bruna, tudo certo?

Poderia por gentiliza compartilhar mais informações sobre a sua dúvida? Quando comenta em adicionar um bloco de código como o código CSS acima, você diz de alguma propriedade específica? A responsividade?

Fico à disposição.

Tenha um bom dia e bons estudos.

Olá, Gabriel. Eu gostaria de saber como eu faço para inserir esse modelo de bloco "</>" no meu site. Quero disponibilizar o código que utilizei para que outras pessoas possam copiar e colar onde quiserem.

Opa Bruna.

A criação de um bloco de código nesse estilo envolve:

• Tag <pre>, usada para definir um bloco de texto pré-formatado, preservando o código-fonte ao manter espaços em branco, quebras de linha e outros espaçamentos;
• Tag <code>, indica que o conteúdo é código;

A Tag pre deve possuir o comportamento de pai da tag code, seguimos esse padrão para criar uma área de exibição de código, onde é mantida a fomação de especial para código. Como, por exemplo:

<div class="bloco_codigo">
        <pre>
            <code>
                function helloWorld() {
                    console.log("Olá, mundo!");
                }
            </code>
        </pre>
    </div>

A partir deste ponto você pode customizar como deseja o bloco de código para ficar do seu jeitinho! Adicionando a cor de fundo, borda, espaçamento interno, etc.

.bloco_codigo {
    background-color: #fff;
    border: 1px solid #b6bcbf;
}

Nesse caso, caso deseje implementar a opção de copiar o código com apenas um click, recomendo reconsiderar a inclusão de JavaScript, pois essa é a abordagem mais comum e eficaz para implementar essa funcionalidade de forma interativa em um site.

Fico à disposição.