{"id":305,"date":"2026-05-14T08:00:51","date_gmt":"2026-05-14T11:00:51","guid":{"rendered":"https:\/\/neodoor.neo\/?post_type=neodoor_aula&#038;p=305"},"modified":"2026-05-21T10:32:55","modified_gmt":"2026-05-21T13:32:55","slug":"estilizar-blocos","status":"publish","type":"post","link":"https:\/\/www.portanova.com.br\/notebook\/estilizar-blocos\/","title":{"rendered":"[CSS] Estilizar Blocos de C\u00f3digo com CSS"},"content":{"rendered":"<h2>Guia R\u00e1pido: Como Estilizar Blocos de C\u00f3digo com CSS<\/h2>\n<p>Para formatar blocos de c\u00f3digo no futuro, o CSS usa a propriedade <code>pre:has(&gt; code)<\/code>. Esta regra seleciona qualquer elemento <code>&lt;pre&gt;<\/code> que tenha um filho direto <code>&lt;code&gt;<\/code>.<\/p>\n<h3>Personalizando o Visual<\/h3>\n<p>Para mudar a apar\u00eancia do bloco de c\u00f3digo, altere os valores no CSS:<\/p>\n<ul>\n<li><code>background<\/code> \u2013 cor de fundo do bloco<\/li>\n<li><code>padding<\/code> \u2013 espa\u00e7amento interno<\/li>\n<li><code>border-radius<\/code> \u2013 cantos arredondados<\/li>\n<li><code>color<\/code> \u2013 cor do texto (ex: rosa)<\/li>\n<\/ul>\n<p>Consulte a <a href=\"https:\/\/www.w3schools.com\/cssref\/pr_background-color.php\" target=\"_blank\" rel=\"noopener\">refer\u00eancia de CSS da W3Schools<\/a>.<\/p>\n<h3>Exemplo de c\u00f3digo CSS (para copiar e usar)<\/h3>\n<p>Cole o bloco abaixo no arquivo do seu MU-Plugin de estilos:<\/p>\n<pre><code>pre:has(&gt; code) {\n    background: #f8f9fa;\n    padding: 1.2em;\n    border-radius: 6px;\n    overflow-x: auto;\n    border: 1px solid #e2e4e7;\n}\npre code {\n    font-family: 'Courier New', monospace;\n    color: #d63384;\n    background: transparent;\n    white-space: pre-wrap;\n}<\/code><\/pre>\n<p><strong>Observa\u00e7\u00e3o:<\/strong> Para exibir tags HTML literalmente em posts (como <code>&amp;lt;pre&amp;gt;<\/code>), use <code>&amp;lt;<\/code> e <code>&amp;gt;<\/code> no lugar de <code>&lt;<\/code> e <code>&gt;<\/code>.<\/p>\n<hr \/>\n<h2>\ud83c\udfa8 Injetando CSS pelo Tema vs. MU-Plugin<\/h2>\n<p>Para aplicar CSS, temos duas rotas principais: via tema (Customizer) ou via MU-Plugin (c\u00f3digo).<\/p>\n<h3>1. Via Tema (Customizer) &#8211; Mais Simples<\/h3>\n<ol>\n<li>No painel do WordPress, v\u00e1 em <strong>Apar\u00eancia \u2192 Personalizar<\/strong>.<\/li>\n<li>Role o menu lateral e clique em <strong>&#8220;CSS Adicional&#8221;<\/strong>.<\/li>\n<li>Cole o c\u00f3digo CSS e clique em <strong>&#8220;Publicar&#8221;<\/strong>.<\/li>\n<\/ol>\n<p>\u26a1 <strong>Vantagem<\/strong>: R\u00e1pido, sem necessidade de plugins ou c\u00f3digos extras.<\/p>\n<p>\u26a0\ufe0f <strong>Desvantagem<\/strong>: Se voc\u00ea trocar de tema, o CSS \u00e9 perdido.<\/p>\n<h3>2. Via MU-Plugin (C\u00f3digo) &#8211; Mais Robusto<\/h3>\n<p>Como fizemos com o <code>neodoor-code-block-style.php<\/code>, o CSS fica no c\u00f3digo e &#8220;anda&#8221; com o site, independente do tema.<\/p>\n<p>\u26a1 <strong>Vantagem<\/strong>: Persiste mesmo se o tema for alterado.<\/p>\n<p>\u26a0\ufe0f <strong>Desvantagem<\/strong>: Exige conhecimento para criar e gerenciar o arquivo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Guia R\u00e1pido: Como Estilizar Blocos de C\u00f3digo com CSS Para formatar blocos de c\u00f3digo no futuro, o CSS usa a propriedade pre:has(&gt; code). Esta regra seleciona qualquer elemento &lt;pre&gt; que tenha um filho direto &lt;code&gt;. Personalizando o Visual Para mudar a apar\u00eancia do bloco de c\u00f3digo, altere os valores no CSS: background \u2013 cor de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,2],"tags":[],"class_list":["post-305","post","type-post","status-publish","format-standard","hentry","category-extras","category-lessons"],"_links":{"self":[{"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/posts\/305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/comments?post=305"}],"version-history":[{"count":0,"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/posts\/305\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/media?parent=305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/categories?post=305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.portanova.com.br\/notebook\/wp-json\/wp\/v2\/tags?post=305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}