[CSS] Estilizar Blocos de Código com CSS

Guia Rápido: Como Estilizar Blocos de Código com CSS

Para formatar blocos de código no futuro, o CSS usa a propriedade pre:has(> code). Esta regra seleciona qualquer elemento <pre> que tenha um filho direto <code>.

Personalizando o Visual

Para mudar a aparência do bloco de código, altere os valores no CSS:

• background – cor de fundo do bloco
• padding – espaçamento interno
• border-radius – cantos arredondados
• color – cor do texto (ex: rosa)

Consulte a referência de CSS da W3Schools.

Exemplo de código CSS (para copiar e usar)

Cole o bloco abaixo no arquivo do seu MU-Plugin de estilos:

pre:has(> code) {
    background: #f8f9fa;
    padding: 1.2em;
    border-radius: 6px;
    overflow-x: auto;
    border: 1px solid #e2e4e7;
}
pre code {
    font-family: 'Courier New', monospace;
    color: #d63384;
    background: transparent;
    white-space: pre-wrap;
}

Observação: Para exibir tags HTML literalmente em posts (como <pre>), use < e > no lugar de < e >.

🎨 Injetando CSS pelo Tema vs. MU-Plugin

Para aplicar CSS, temos duas rotas principais: via tema (Customizer) ou via MU-Plugin (código).

1. Via Tema (Customizer) – Mais Simples

1. No painel do WordPress, vá em Aparência → Personalizar.
2. Role o menu lateral e clique em “CSS Adicional”.
3. Cole o código CSS e clique em “Publicar”.

⚡ Vantagem: Rápido, sem necessidade de plugins ou códigos extras.

⚠️ Desvantagem: Se você trocar de tema, o CSS é perdido.

2. Via MU-Plugin (Código) – Mais Robusto

Como fizemos com o neodoor-code-block-style.php, o CSS fica no código e “anda” com o site, independente do tema.

⚡ Vantagem: Persiste mesmo se o tema for alterado.

⚠️ Desvantagem: Exige conhecimento para criar e gerenciar o arquivo.