{"id":59561,"date":"2023-05-17T10:20:36","date_gmt":"2023-05-17T13:20:36","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=59561&#038;preview=true&#038;preview_id=59561"},"modified":"2025-01-17T09:57:11","modified_gmt":"2025-01-17T12:57:11","slug":"wordpress-display-codigo","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/","title":{"rendered":"Como Exibir C\u00f3digo no WordPress (E Torn\u00e1-lo mais Atraente)"},"content":{"rendered":"<p>Aprender a exibir c\u00f3digos no WordPress \u00e9 fundamental para blogueiros e criadores de conte\u00fado que publicam c\u00f3digos on-line de forma consistente para que seus leitores possam utilizar. <a href=\"https:\/\/kinsta.com\/pt\/blog\/editar-codigo-wordpress\/\">O c\u00f3digo de computador<\/a>, por sua natureza, gera algo novo no frontend de um site, em vez de exibir as tags, barras e colchetes encontrados nos snippets de c\u00f3digo propriamente ditos.<\/p>\n<p>Isso, no entanto, representa um problema para quem escreve sobre desenvolvimento e design, pois voc\u00ea precisa de uma maneira de exibir adequadamente o c\u00f3digo sem que ele fa\u00e7a seu trabalho real, como criar um bot\u00e3o ou adicionar estilo a um bloco de par\u00e1grafos.<\/p>\n<p>Simplificando, se voc\u00ea escrever um artigo e colocar um exemplo de snippet de c\u00f3digo, voc\u00ea deve verificar se o c\u00f3digo realmente funciona! Dessa forma, os leitores podem ver o c\u00f3digo em sua forma bruta, visualizar o c\u00f3digo em um bloco bem formatado e at\u00e9 mesmo copiar seu conte\u00fado para usar em seu trabalho de desenvolvimento.<\/p>\n<p>Neste guia, mostraremos exatamente como exibir c\u00f3digo no WordPress (independentemente do <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-personalizar-tema-wordpress\/\">tema do WordPress<\/a>) usando v\u00e1rios m\u00e9todos diferentes e ajudaremos voc\u00ea a decidir qual m\u00e9todo funciona melhor para o seu fluxo de trabalho.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>O que acontece quando voc\u00ea adiciona c\u00f3digo regular no WordPress?<\/h2>\n<p>Voc\u00ea pode se perguntar o que aconteceria se escrevesse algum c\u00f3digo no editor visual do WordPress. Afinal de contas, voc\u00ea n\u00e3o est\u00e1 mexendo nos editores de texto ou de c\u00f3digo, ent\u00e3o seu snippet de c\u00f3digo n\u00e3o deveria funcionar bem?<\/p>\n<p>Provavelmente n\u00e3o.<\/p>\n\n<p>Aqui est\u00e3o alguns dos resultados incomuns que podem ocorrer:<\/p>\n<ul>\n<li>O c\u00f3digo aparece parcialmente, com partes do c\u00f3digo sendo exibidas no frontend do artigo e outras desaparecendo. Isso parece pouco profissional para os visitantes; significa que seu c\u00f3digo n\u00e3o est\u00e1 correto.<\/li>\n<li>N\u00e3o aparece nada, com o c\u00f3digo desaparecendo completamente do backend e n\u00e3o mostrando nada no frontend da publica\u00e7\u00e3o.<\/li>\n<li>Voc\u00ea v\u00ea uma formata\u00e7\u00e3o estranha &#8211; geralmente algo que n\u00e3o \u00e9 amig\u00e1vel ou public\u00e1vel para um p\u00fablico.<\/li>\n<li>O c\u00f3digo pode ser renderizado apenas parcialmente<\/li>\n<\/ul>\n<p>Para ilustrar alguns desses resultados, usaremos o seguinte <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-html\/\">snippet de c\u00f3digo HTML<\/a>:<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n.cities {\nbackground-color: green;\ncolor: white;\nborder: 4px solid black;\nmargin: 10px;\npadding: 10px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;div class=\"cities\"&gt;\n&lt;h2&gt;Chicago&lt;\/h2&gt;\n&lt;p&gt;A nickname for Chicago is The City of Broad Shoulders.&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div class=\"cities\"&gt;\n&lt;h2&gt;Los Angeles&lt;\/h2&gt;\n&lt;p&gt;A nickname for Los Angeles is The City of Angels.&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div class=\"cities\"&gt;\n&lt;h2&gt;New York&lt;\/h2&gt;\n&lt;p&gt;A nickname for New York is The Big Apple.&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Esse snippet de c\u00f3digo espec\u00edfico <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-html\/\">usa elementos de estilo HTML<\/a> para produzir tr\u00eas blocos de conte\u00fado verde com cabe\u00e7alhos e par\u00e1grafos.<\/p>\n<figure id=\"attachment_151531\" aria-describedby=\"caption-attachment-151531\" style=\"width: 937px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151531 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/click-to-write-code.jpg\" alt=\"Clique para escrever o c\u00f3digo\" width=\"937\" height=\"437\"><figcaption id=\"caption-attachment-151531\" class=\"wp-caption-text\">Clique para escrever o c\u00f3digo<\/figcaption><\/figure>\n<p>No entanto, gostar\u00edamos de exibir o c\u00f3digo <em>bruto<\/em> em um artigo de blog, e n\u00e3o que ele fosse realmente renderizado nesses blocos.<\/p>\n<p>Aqui est\u00e3o os resultados se voc\u00ea colar o c\u00f3digo diretamente no <a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">Editor de Blocos do WordPress <\/a><a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">Gutenberg<\/a>:<\/p>\n<figure id=\"attachment_151527\" aria-describedby=\"caption-attachment-151527\" style=\"width: 928px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151527 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Gutenberg-Editor-results-from-HTML-code.jpg\" alt=\"Resultados do Editor Gutenberg a partir do c\u00f3digo HTML\" width=\"928\" height=\"752\"><figcaption id=\"caption-attachment-151527\" class=\"wp-caption-text\">Resultados do Editor Gutenberg a partir do c\u00f3digo HTML<\/figcaption><\/figure>\n<p>Como voc\u00ea pode ver, o WordPress tenta usar o c\u00f3digo para sua finalidade principal: gerar conte\u00fado &#8211; no entanto, ele retira o estilo do c\u00f3digo, de modo que n\u00e3o fornece o resultado que quer\u00edamos mostrar aos leitores.<\/p>\n<p>Para evitar situa\u00e7\u00f5es como essa, recomendamos que voc\u00ea use um dos m\u00e9todos listados abaixo para exibir o c\u00f3digo.<\/p>\n<h2>Como exibir c\u00f3digo em seu site WordPress (6 m\u00e9todos)<\/h2>\n<p>Esses m\u00e9todos est\u00e3o listados do mais f\u00e1cil ao mais dif\u00edcil, e temos alguns m\u00e9todos especiais para aqueles que gostam de escrever c\u00f3digo e conte\u00fado em editores de markdown (ao inv\u00e9s do WordPress).<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"-1\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>M\u00e9todo 1: Usando o editor de blocos Gutenberg (padr\u00e3o)<\/h3>\n<p>Para praticar a exibi\u00e7\u00e3o de c\u00f3digo no WordPress, voc\u00ea pode usar o seguinte snippet de c\u00f3digo, que <a href=\"https:\/\/kinsta.com\/pt\/blog\/aprender-html\/\">usa HTML<\/a> e CSS interno para produzir um resultado simples com um cabe\u00e7alho azul e um par\u00e1grafo preto:<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\nbody {background-color: beige;}\nh1 {color: blue;}\np {color: black;}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;h1&gt;Fun Facts About Otters&lt;\/h1&gt;\n&lt;p&gt;A group of otters in water is called a \"raft,\" since they all link arms to prevent from floating away.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Quando colocado em a\u00e7\u00e3o, o c\u00f3digo mostrar\u00e1 isso no frontend:<\/p>\n<figure id=\"attachment_151528\" aria-describedby=\"caption-attachment-151528\" style=\"width: 979px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151528 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/html-code-rendering-fun-facts-about-otters.jpg\" alt=\"Os resultados mostram um t\u00edtulo e um corpo de texto com estilo\" width=\"979\" height=\"359\"><figcaption id=\"caption-attachment-151528\" class=\"wp-caption-text\">Os resultados mostram um t\u00edtulo e um corpo de texto com estilo<\/figcaption><\/figure>\n<p>Mas, ao seguir este tutorial, voc\u00ea aprender\u00e1 a exibir o c\u00f3digo bruto em si, e n\u00e3o o que o c\u00f3digo deve mostrar no frontend.<\/p>\n<h4>Etapa 1: Adicione um bloco de c\u00f3digo no WordPress<\/h4>\n<p>O editor do WordPress Gutenberg j\u00e1 tem um bloco de c\u00f3digo integrado, que permite que voc\u00ea exiba snippet\u00a0de c\u00f3digo sem perder a formata\u00e7\u00e3o ou ativar o c\u00f3digo.<\/p>\n<p>Para come\u00e7ar, crie um <a href=\"https:\/\/kinsta.com\/pt\/blog\/obter-id-artigo-wordpress\/\">artigo ou p\u00e1gina<\/a> no WordPress e clique em um dos bot\u00f5es <strong>Add Block<\/strong>.<\/p>\n<figure id=\"attachment_151529\" aria-describedby=\"caption-attachment-151529\" style=\"width: 941px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151529 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/add-block-buttons.jpg\" alt=\"Bot\u00f5es de Adicionar bloco\" width=\"941\" height=\"486\"><figcaption id=\"caption-attachment-151529\" class=\"wp-caption-text\">Bot\u00f5es de Adicionar bloco<\/figcaption><\/figure>\n<p>Clique em um dos bot\u00f5es Add Block<\/p>\n<p>Isso revela a cole\u00e7\u00e3o de blocos dispon\u00edveis. Voc\u00ea pode procurar o bloco Code ou digitar uma palavra-chave como &#8220;code&#8221; na barra de pesquisa.<\/p>\n<p>Quando voc\u00ea ver o bloco <strong>Code<\/strong> (com \u00edcones de colchetes), clique nele para inserir um snippet de c\u00f3digo na publica\u00e7\u00e3o.<\/p>\n<figure id=\"attachment_151530\" aria-describedby=\"caption-attachment-151530\" style=\"width: 939px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151530 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/popup-window-to-add-a-block-with-Code-block-option.jpg\" alt=\"Janela pop-up para adicionar um bloco, com a op\u00e7\u00e3o Bloco de c\u00f3digo\" width=\"939\" height=\"411\"><figcaption id=\"caption-attachment-151530\" class=\"wp-caption-text\">Janela pop-up para adicionar um bloco, com a op\u00e7\u00e3o Bloco de c\u00f3digo<\/figcaption><\/figure>\n<p>Agora voc\u00ea deve ver um campo com o prompt <strong>&#8220;Write code&#8230;&#8221;<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-151531 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/click-to-write-code.jpg\" alt width=\"937\" height=\"437\"><\/p>\n<p>O editor do WordPress Gutenberg \u00e9 compat\u00edvel com markdown, portanto voc\u00ea tamb\u00e9m pode encontrar e inserir o bloco C\u00f3digo digitando uma barra (<code>\/<\/code>) no editor e, em seguida, escrever &#8220;C&#8221; ou &#8220;Code&#8221;. O WordPress mostrar\u00e1 todos os blocos relevantes, oferecendo a voc\u00ea uma maneira mais r\u00e1pida de inseri-los.<\/p>\n<p>\u00c9 f\u00e1cil confundir o bloco de c\u00f3digo (Code block) e o bloco de HTML personalizado (Custom HTML block). No entanto, o bloco de HTML personalizado \u00e9 usado para adicionar HTML personalizado para ser renderizado no frontend, n\u00e3o para adicionar c\u00f3digo bruto para exibi\u00e7\u00e3o.<\/p>\n<figure id=\"attachment_151532\" aria-describedby=\"caption-attachment-151532\" style=\"width: 933px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151532 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/using-markdown-to-call-the-Code-block.jpg\" alt=\"Utilizando markdown para chamar o bloco de c\u00f3digo.\" width=\"933\" height=\"380\"><figcaption id=\"caption-attachment-151532\" class=\"wp-caption-text\">Utilizando markdown para chamar o bloco de c\u00f3digo.<\/figcaption><\/figure>\n<h4>Etapa 2: Cole o c\u00f3digo de exibi\u00e7\u00e3o no campo do bloco de c\u00f3digo<\/h4>\n<p>Agora \u00e9 hora de copiar o c\u00f3digo que voc\u00ea gostaria de exibir e col\u00e1-lo na caixa que diz <strong>&#8220;Write Code&#8230;&#8221;.<\/strong><\/p>\n<figure id=\"attachment_151533\" aria-describedby=\"caption-attachment-151533\" style=\"width: 936px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151533 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Write-or-Paste-in-Code-to-Display.jpg\" alt=\"Escreva ou cole o c\u00f3digo que voc\u00ea deseja exibir\" width=\"936\" height=\"405\"><figcaption id=\"caption-attachment-151533\" class=\"wp-caption-text\">Escreva ou cole o c\u00f3digo que voc\u00ea deseja exibir<\/figcaption><\/figure>\n<p>Seu c\u00f3digo agora aparecer\u00e1 dentro da caixa.<\/p>\n<p>O que \u00e9 \u00f3timo sobre o bloco de c\u00f3digo \u00e9 que ele respeita todos os espa\u00e7os e tabula\u00e7\u00f5es que voc\u00ea j\u00e1 tinha dentro do snippet de c\u00f3digo. Como resultado, ele n\u00e3o deve parecer diferente da fonte de onde voc\u00ea o copiou.<\/p>\n<figure id=\"attachment_151534\" aria-describedby=\"caption-attachment-151534\" style=\"width: 919px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151534 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Pasted-Snippet-in-the-Code-Block.jpg\" alt=\"Snippet colado no bloco de c\u00f3digo\" width=\"919\" height=\"840\"><figcaption id=\"caption-attachment-151534\" class=\"wp-caption-text\">Snippet colado no bloco de c\u00f3digo<\/figcaption><\/figure>\n<h4>Etapa 3: Publique e visualize os resultados<\/h4>\n<p>Para exibir seu c\u00f3digo no artigo ou na p\u00e1gina do WordPress, conclua o processo clicando no bot\u00e3o <strong>Publish (Publicar)<\/strong>.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode ter uma ideia da apar\u00eancia do c\u00f3digo antes de public\u00e1-lo selecionando <strong>Preview (Visualizar)<\/strong>.<\/p>\n<figure id=\"attachment_151535\" aria-describedby=\"caption-attachment-151535\" style=\"width: 929px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151535 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Click-Publish.jpg\" alt=\"Clique em Publicar\" width=\"929\" height=\"499\"><figcaption id=\"caption-attachment-151535\" class=\"wp-caption-text\">Clique em Publicar<\/figcaption><\/figure>\n<p>Depois que voc\u00ea clicar no bot\u00e3o <strong>Publish (Publicar)<\/strong>, visite a vers\u00e3o em tempo real do artigo para confirmar se o snippet de c\u00f3digo est\u00e1 sendo exibido como c\u00f3digo bruto.<\/p>\n<p>Como voc\u00ea pode ver, o bloco de c\u00f3digo \u00e9 bastante simples, mas fornece a funcionalidade necess\u00e1ria para manter a formata\u00e7\u00e3o ao publicar c\u00f3digo em artigos de blog.<\/p>\n<p>D\u00ea uma olhada na captura de tela abaixo. Em nosso exemplo aqui, nada foi alterado em rela\u00e7\u00e3o ao snippet de c\u00f3digo original; foi simplesmente apresentado no frontend em uma caixa cinza.<\/p>\n<figure id=\"attachment_151536\" aria-describedby=\"caption-attachment-151536\" style=\"width: 1031px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151536 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/grey-box.jpg\" alt=\"C\u00f3digo exibido no frontend\" width=\"1031\" height=\"1190\"><figcaption id=\"caption-attachment-151536\" class=\"wp-caption-text\">C\u00f3digo exibido no frontend<\/figcaption><\/figure>\n<h4>Etapa 4: Considere a formata\u00e7\u00e3o do bloco de c\u00f3digo<\/h4>\n<p>Para fazer com que o bloco de c\u00f3digo se destaque um pouco, pense em mudar sua apar\u00eancia do padr\u00e3o.<\/p>\n<p>Para revelar as op\u00e7\u00f5es de estilo do bloco, selecione o bloco <strong>Code<\/strong>\u00a0e, em seguida, escolha o bot\u00e3o <strong>Settings <\/strong>(\u00edcone de engrenagem). Isso abrir\u00e1 a aba <strong>Block<\/strong> (Bloco), que mostra apenas as configura\u00e7\u00f5es do bloco que voc\u00ea selecionou &#8211; nesse caso, o bloco de c\u00f3digo.<\/p>\n<figure id=\"attachment_151537\" aria-describedby=\"caption-attachment-151537\" style=\"width: 1056px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151537 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Go-to-Block-Settings-for-Code-Formatting.jpg\" alt=\"Configura\u00e7\u00f5es de bloco para formata\u00e7\u00e3o de c\u00f3digo\" width=\"1056\" height=\"814\"><figcaption id=\"caption-attachment-151537\" class=\"wp-caption-text\">Configura\u00e7\u00f5es de bloco para formata\u00e7\u00e3o de c\u00f3digo<\/figcaption><\/figure>\n<p>Voc\u00ea pode estilizar o bloco de C\u00f3digo como quiser, com op\u00e7\u00f5es para alterar itens como texto e cores de fundo.<\/p>\n<figure id=\"attachment_151538\" aria-describedby=\"caption-attachment-151538\" style=\"width: 1044px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151538 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Edit-Color-and-Background-Settings.jpg\" alt=\"Editar configura\u00e7\u00f5es de cor e plano de fundo\" width=\"1044\" height=\"758\"><figcaption id=\"caption-attachment-151538\" class=\"wp-caption-text\">Editar configura\u00e7\u00f5es de cor e plano de fundo<\/figcaption><\/figure>\n<p>Voc\u00ea tamb\u00e9m pode:<\/p>\n<ul>\n<li>Alterar o tamanho do texto<\/li>\n<li>Adicionar preenchimento e margens \u00e0 caixa de c\u00f3digo<\/li>\n<li>Incluir uma borda com largura e cores personalizadas<\/li>\n<\/ul>\n<figure id=\"attachment_151539\" aria-describedby=\"caption-attachment-151539\" style=\"width: 1050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151539 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Settings-for-size-dimensions-and-border.jpg\" alt=\"Configura\u00e7\u00f5es de tamanho, dimens\u00f5es e borda\" width=\"1050\" height=\"806\"><figcaption id=\"caption-attachment-151539\" class=\"wp-caption-text\">Configura\u00e7\u00f5es de tamanho, dimens\u00f5es e borda<\/figcaption><\/figure>\n<p>Como sempre, clique no bot\u00e3o <strong>Publish<\/strong> quando voc\u00ea terminar de editar o bloco e, em seguida, veja os resultados no frontend da <a href=\"https:\/\/kinsta.com\/pt\/blog\/tipos-publicacoes-personalizadas-wordpress\/\">publica\u00e7\u00e3o do WordPress<\/a>.<\/p>\n<figure id=\"attachment_151540\" aria-describedby=\"caption-attachment-151540\" style=\"width: 1045px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151540 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Frontend-Results.jpg\" alt=\"Resultados do frontend\" width=\"1045\" height=\"1340\"><figcaption id=\"caption-attachment-151540\" class=\"wp-caption-text\">Resultados do frontend<\/figcaption><\/figure>\n<h3>M\u00e9todo 2: Usando um plugin<\/h3>\n<p>Outra maneira de exibir c\u00f3digo no WordPress \u00e9 <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-instalar-plugins-no-wordpress\/\">instalando um plugin<\/a>.<\/p>\n<p>Esse m\u00e9todo pode parecer um pouco redundante, considerando que o WordPress j\u00e1 tem um bloco de c\u00f3digo integrado, mas alguns plugins oferecem recursos adicionais e ferramentas de formata\u00e7\u00e3o que fazem valer a pena trabalhar com um plugin. Em resumo, voc\u00ea pode tornar seus blocos de c\u00f3digo mais bonitos do que o que obteria com o bloco de c\u00f3digo padr\u00e3o do Gutenberg.<\/p>\n<p>Al\u00e9m disso, alguns usu\u00e1rios do Editor Cl\u00e1ssico do WordPress podem achar mais f\u00e1cil trabalhar com um plugin, pois \u00e9 um pouco mais complicado exibir o c\u00f3digo no Editor Cl\u00e1ssico.<\/p>\n<p>Para come\u00e7ar, voc\u00ea deve escolher um plugin de &#8220;syntax highlighter&#8221;, que \u00e9 uma maneira elegante de dizer que o plugin real\u00e7ar\u00e1 seu c\u00f3digo-fonte e manter\u00e1 sua formata\u00e7\u00e3o intacta.<\/p>\n<p>Aqui est\u00e3o alguns plugins de boa reputa\u00e7\u00e3o para exibi\u00e7\u00e3o de c\u00f3digo no WordPress:<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/enlighter\/\" target=\"_blank\" rel=\"noopener noreferrer\">Enlighter<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/syntaxhighlighter\/\" target=\"_blank\" rel=\"noopener noreferrer\">SyntaxHighlighter Evolved<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/code-prettify\/\" target=\"_blank\" rel=\"noopener noreferrer\">Code Prettify<\/a><\/li>\n<\/ul>\n<p>Usaremos o plugin Enlighter neste tutorial, pois ele oferece op\u00e7\u00f5es para marcar os tipos de c\u00f3digo que voc\u00ea exibe nas caixas de c\u00f3digo, al\u00e9m de muitos outros recursos de estilo. No entanto, voc\u00ea \u00e9 mais do que bem-vindo para experimentar os outros, pois todos eles fazem a mesma coisa.<\/p>\n<h4>Etapa 1: Instale o plugin Enlighter<\/h4>\n<p>Instale o plugin Enlighter &#8211; Customizable Syntax Highlighter em seu site WordPress usando o <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-instalar-plugins-no-wordpress\/\">m\u00e9todo de instala\u00e7\u00e3o de plugin<\/a> que voc\u00ea preferir.<\/p>\n<p>Ap\u00f3s a ativa\u00e7\u00e3o, o plugin estar\u00e1 pronto para inserir c\u00f3digo em qualquer artigo\/p\u00e1gina com um bloco do Gutenberg ou bot\u00e3o <strong>Inserir<\/strong> do Editor Cl\u00e1ssico.<\/p>\n<figure id=\"attachment_151541\" aria-describedby=\"caption-attachment-151541\" style=\"width: 945px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151541 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/The-Enlighter-Plugin.jpg\" alt=\"O plugin Enlighter\" width=\"945\" height=\"309\"><figcaption id=\"caption-attachment-151541\" class=\"wp-caption-text\">O plugin Enlighter<\/figcaption><\/figure>\n<h4>Etapa 2: Insira o bloco de c\u00f3digo-fonte do Enlighter em um artigo<\/h4>\n<p>Se voc\u00ea estiver usando o Editor de Blocos do WordPress Gutenberg, abra um artigo na qual gostaria de exibir o c\u00f3digo. Clique em um dos bot\u00f5es <strong>Add Block<\/strong> (\u00edcone +) para revelar a cole\u00e7\u00e3o de blocos dispon\u00edveis.<\/p>\n<p>Procure ou digite uma palavra-chave para o bloco <strong>Enlighten Sourcecode<\/strong>. Clique nesse bloco para inseri-lo no artigo.<\/p>\n<figure id=\"attachment_151542\" aria-describedby=\"caption-attachment-151542\" style=\"width: 997px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151542 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Enlighter-Sourcecode-Block.jpg\" alt=\"Bloco Enlighter Sourcecode\" width=\"997\" height=\"575\"><figcaption id=\"caption-attachment-151542\" class=\"wp-caption-text\">Bloco Enlighter Sourcecode<\/figcaption><\/figure>\n<h4>Etapa 3: Cole o c\u00f3digo no bloco Enlighter Highlighter<\/h4>\n<p>O bloco <strong>Enlighter<\/strong> <strong>Highlighter<\/strong> aparecer\u00e1 no Editor de Blocos, com um t\u00edtulo para &#8220;<strong>Generic Highlighting<\/strong>&#8221; e um campo para &#8220;<strong>Insert Sourcecode\u2026<\/strong>&#8221;<\/p>\n<p>Pegue o c\u00f3digo que voc\u00ea gostaria de exibir no WordPress e cole\/digite no campo &#8220;<strong>Insert Sourcecode&#8230;<\/strong>&#8220;.<\/p>\n<figure id=\"attachment_151543\" aria-describedby=\"caption-attachment-151543\" style=\"width: 1022px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151543 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Use-the-Insert-Sourcecode-Field.jpg\" alt=\"Use o campo Inserir c\u00f3digo-fonte\" width=\"1022\" height=\"381\"><figcaption id=\"caption-attachment-151543\" class=\"wp-caption-text\">Use o campo Inserir c\u00f3digo-fonte<\/figcaption><\/figure>\n<p>Como um destacador de sintaxe, o plugin preserva todas as op\u00e7\u00f5es de formata\u00e7\u00e3o e tabula\u00e7\u00f5es. Quando voc\u00ea estiver satisfeito com o resultado, clique no bot\u00e3o <strong>Publish (Publicar)<\/strong>.<\/p>\n<figure id=\"attachment_151544\" aria-describedby=\"caption-attachment-151544\" style=\"width: 991px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151544 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Click-Publish-1.jpg\" alt=\"Clique em Publicar\" width=\"991\" height=\"849\"><figcaption id=\"caption-attachment-151544\" class=\"wp-caption-text\">Clique em Publicar<\/figcaption><\/figure>\n<h4>Etapa 4: Visualize o c\u00f3digo no frontend<\/h4>\n<p>Com isso, voc\u00ea pode visualizar o frontend do seu artigo para ver o que os visitantes do site veem.<\/p>\n<p>O plugin Enlighter oferece um tema padr\u00e3o minimalista para exibi\u00e7\u00e3o de c\u00f3digo, com n\u00fameros de linha para ajudar na organiza\u00e7\u00e3o e na refer\u00eancia.<\/p>\n<figure id=\"attachment_151545\" aria-describedby=\"caption-attachment-151545\" style=\"width: 1098px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151545 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.95cce0abcfa2479e9089506a78f9c684.jpg\" alt=\"Exibido no frontend\" width=\"1098\" height=\"728\"><figcaption id=\"caption-attachment-151545\" class=\"wp-caption-text\">Exibido no frontend<\/figcaption><\/figure>\n<p>Como mencionamos, o uso de um plugin para exibir c\u00f3digo no WordPress tem suas vantagens em rela\u00e7\u00e3o aos outros m\u00e9todos. Por exemplo, a vers\u00e3o frontend do plugin de sintaxe Enlighter destaca as linhas \u00e0 medida que o usu\u00e1rio rola o c\u00f3digo.<\/p>\n<figure id=\"attachment_151546\" aria-describedby=\"caption-attachment-151546\" style=\"width: 1035px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151546 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.ffec66ab73594f6a8fcfd86328515232.jpg\" alt=\"Linhas de c\u00f3digo destacadas\" width=\"1035\" height=\"512\"><figcaption id=\"caption-attachment-151546\" class=\"wp-caption-text\">Linhas de c\u00f3digo destacadas<\/figcaption><\/figure>\n<p>H\u00e1 tamb\u00e9m v\u00e1rios bot\u00f5es no canto superior direito da caixa de c\u00f3digo, incluindo um que apresenta o c\u00f3digo em texto simples, sem os n\u00fameros de linha.<\/p>\n<figure id=\"attachment_151547\" aria-describedby=\"caption-attachment-151547\" style=\"width: 1020px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151547 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.00b5c3fcfa414d76ae68c0827cb2228c.jpg\" alt=\"Bot\u00e3o Texto simples\" width=\"1020\" height=\"468\"><figcaption id=\"caption-attachment-151547\" class=\"wp-caption-text\">Bot\u00e3o Texto simples<\/figcaption><\/figure>\n<p>O segundo bot\u00e3o chama-se <strong>Copy<\/strong> <strong>To<\/strong> <strong>Clipboard <\/strong>(<strong>Copiar<\/strong> <strong>para <\/strong><strong>\u00e1rea de transfer\u00eancia<\/strong>), que copia instantaneamente tudo o que est\u00e1 na caixa de c\u00f3digo para a \u00e1rea de transfer\u00eancia do usu\u00e1rio, que pode copiar e colar em qualquer programa que desejar.<\/p>\n<figure id=\"attachment_151548\" aria-describedby=\"caption-attachment-151548\" style=\"width: 946px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151548 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.6c9ec9750eef4aecbfceee51a4af1cc0.jpg\" alt=\"Bot\u00e3o Copiar para a \u00e1rea de transfer\u00eancia\" width=\"946\" height=\"466\"><figcaption id=\"caption-attachment-151548\" class=\"wp-caption-text\">Bot\u00e3o Copiar para a \u00e1rea de transfer\u00eancia<\/figcaption><\/figure>\n<p>Por fim, o terceiro bot\u00e3o abre o c\u00f3digo em uma nova janela, apresentando em uma vers\u00e3o de texto simples da janela do navegador.<\/p>\n<figure id=\"attachment_151549\" aria-describedby=\"caption-attachment-151549\" style=\"width: 986px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151549 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.777ac0e80acf4dcbb66107daddf8a3b7.jpg\" alt=\"Abrir c\u00f3digo em uma nova janela\" width=\"986\" height=\"456\"><figcaption id=\"caption-attachment-151549\" class=\"wp-caption-text\">Abrir c\u00f3digo em uma nova janela<\/figcaption><\/figure>\n<h4>Etapa 5: Defina as configura\u00e7\u00f5es de linguagem e linha para a bloco de c\u00f3digo<\/h4>\n<p>O plugin Enlighter vem com v\u00e1rios temas e ferramentas de personaliza\u00e7\u00e3o poderosas para fazer com que a bloco de c\u00f3digo tenha a apar\u00eancia desejada. Se voc\u00ea preferir n\u00e3o usar o tema padr\u00e3o, volte ao seu artigo no WordPress e clique no bloco <strong>Enlighter Sourcecode<\/strong> que est\u00e1 aberto no momento.<\/p>\n<p>Isso abrir\u00e1 a barra lateral <strong>do bloco<\/strong> no WordPress. Se ela n\u00e3o abrir, certifique-se de clicar no bot\u00e3o <strong>Settings<\/strong>\u00a0(\u00edcone de engrenagem) no canto superior direito da janela do WordPress.<\/p>\n<p>A primeira configura\u00e7\u00e3o a ser personalizada \u00e9 o campo <strong>Language (linguagem)<\/strong> &#8211; isso informa ao plugin qual linguagem de c\u00f3digo \u00e9 exibido para que ele possa oferecer a formata\u00e7\u00e3o e o destaque adequados.<\/p>\n<figure id=\"attachment_151550\" aria-describedby=\"caption-attachment-151550\" style=\"width: 1148px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151550 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.f2c13dad8c56496597ac3b6a7c51be2c.jpg\" alt=\"Campo linguagem\" width=\"1148\" height=\"733\"><figcaption id=\"caption-attachment-151550\" class=\"wp-caption-text\">Campo linguagem<\/figcaption><\/figure>\n<p>H\u00e1 v\u00e1rias linguagens de c\u00f3digo para voc\u00ea escolher, portanto, percorra a lista e escolha a mais adequada.<\/p>\n<figure id=\"attachment_151551\" aria-describedby=\"caption-attachment-151551\" style=\"width: 1171px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151551 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4e8a9a6a7c984e20b6bb154e04f75987.jpg\" alt=\"Escolhendo a linguagem\" width=\"1171\" height=\"886\"><figcaption id=\"caption-attachment-151551\" class=\"wp-caption-text\">Escolhendo a linguagem<\/figcaption><\/figure>\n<p>O campo <strong>Speciallines<\/strong> destaca todas as linhas que voc\u00ea especificar. Para que isso aconte\u00e7a, digite os n\u00fameros das linhas separados por v\u00edrgulas.<\/p>\n<figure id=\"attachment_151552\" aria-describedby=\"caption-attachment-151552\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151552 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.17f5c662bffd4955a719bcd12d1afc82.jpg\" alt=\"Linhas especiais\" width=\"1024\" height=\"700\"><figcaption id=\"caption-attachment-151552\" class=\"wp-caption-text\">Linhas especiais<\/figcaption><\/figure>\n<p>Como resultado, os visitantes do site ver\u00e3o linhas destacadas para todas as que voc\u00ea especificou.<\/p>\n<figure id=\"attachment_151553\" aria-describedby=\"caption-attachment-151553\" style=\"width: 982px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151553 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.26424dd29a524fb5bb4e898efbc65609.jpg\" alt=\"Linhas destacadas no frontend\" width=\"982\" height=\"477\"><figcaption id=\"caption-attachment-151553\" class=\"wp-caption-text\">Linhas destacadas no frontend<\/figcaption><\/figure>\n<p>O campo <strong>Lineoffset <\/strong>\u00e9 uma maneira de iniciar o snippet de c\u00f3digo em uma linha numerada espec\u00edfica, o que \u00e9 vantajoso se voc\u00ea estiver exibindo apenas um subconjunto de c\u00f3digo que faz parte de um conjunto maior de linhas.<\/p>\n<figure id=\"attachment_151554\" aria-describedby=\"caption-attachment-151554\" style=\"width: 1046px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151554 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.2fcdd0028fa949ba9294eeb90fee1f99.jpg\" alt=\"Campo Lineoffset\" width=\"1046\" height=\"447\"><figcaption id=\"caption-attachment-151554\" class=\"wp-caption-text\">Campo Lineoffset<\/figcaption><\/figure>\n<p>Como voc\u00ea pode ver, ao digitar &#8220;10&#8221; no campo <strong>Lineoffset<\/strong>, o c\u00f3digo completo come\u00e7a a partir do n\u00famero 10.<\/p>\n<figure id=\"attachment_151555\" aria-describedby=\"caption-attachment-151555\" style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151555 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.29b010d935744289aac79f10b3b2eaf4.jpg\" alt=\"Iniciar o documento em uma linha espec\u00edfica\" width=\"900\" height=\"463\"><figcaption id=\"caption-attachment-151555\" class=\"wp-caption-text\">Iniciar o documento em uma linha espec\u00edfica<\/figcaption><\/figure>\n<h4>Etapa 6: Escolha um tema<\/h4>\n<p>O tema Enlighter \u00e9 o tema padr\u00e3o desse plugin. No entanto, o campo <strong>Theme<\/strong> (ainda abaixo do painel de configura\u00e7\u00f5es do bloco) apresenta uma ampla gama de temas incorporados que voc\u00ea pode escolher.<\/p>\n<figure id=\"attachment_151556\" aria-describedby=\"caption-attachment-151556\" style=\"width: 942px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151556 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.a6632b4168ee44ef843640a71644257f.jpg\" alt=\"Op\u00e7\u00f5es de tema\" width=\"942\" height=\"771\"><figcaption id=\"caption-attachment-151556\" class=\"wp-caption-text\">Op\u00e7\u00f5es de tema<\/figcaption><\/figure>\n<p>Por exemplo, o tema Godzilla exibe o c\u00f3digo como se ele estivesse em cima de um gr\u00e1fico ou papel de rascunho.<\/p>\n<figure id=\"attachment_151557\" aria-describedby=\"caption-attachment-151557\" style=\"width: 1007px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151557 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.ee85f0bb69e84d96a03ac4d623fd3453.jpg\" alt=\"O tema Godzilla\" width=\"1007\" height=\"563\"><figcaption id=\"caption-attachment-151557\" class=\"wp-caption-text\">O tema Godzilla<\/figcaption><\/figure>\n<p>E o tema Atomic muda o plano de fundo para um tema escuro, oferecendo principalmente texto branco e cor rosa para as tags de c\u00f3digo.<\/p>\n<figure id=\"attachment_151558\" aria-describedby=\"caption-attachment-151558\" style=\"width: 1063px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151558 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.ebf289e0059f4ac5a19fcfb6c2bfb589.jpg\" alt=\"Tema Atomic\" width=\"1063\" height=\"646\"><figcaption id=\"caption-attachment-151558\" class=\"wp-caption-text\">Tema Atomic<\/figcaption><\/figure>\n<p>Outro exemplo \u00e9 o tema Classic, que \u00e9 uma vers\u00e3o menos minimalista do tema Enlighter, com cores mais vivas e linhas mais definidas.<\/p>\n<figure id=\"attachment_151559\" aria-describedby=\"caption-attachment-151559\" style=\"width: 1020px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151559 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.6a3cbf74437e460ba4f884eb05cee863.jpg\" alt=\"Tema Classic\" width=\"1020\" height=\"660\"><figcaption id=\"caption-attachment-151559\" class=\"wp-caption-text\">Tema Classic<\/figcaption><\/figure>\n<h4>Etapa 7: Considere a possibilidade de criar um tema personalizado<\/h4>\n<p>O plugin Enlighter oferece um guia no <a href=\"https:\/\/kinsta.com\/pt\/blog\/painel-administrativo-wordpress\/\">painel do WordPress<\/a> para que voc\u00ea personalize todos os aspectos do plugin e seus recursos de destaque.<\/p>\n<p>Para obter controle total sobre o design e a exibi\u00e7\u00e3o de suas caixas de c\u00f3digo, v\u00e1 para a aba <strong>Enlighter<\/strong> (\u00edcone &lt;&gt;) e escolha <strong>Appearance (Apar\u00eancia)<\/strong> ou <strong>Theme<\/strong> <strong>Customizer (Personalizador<\/strong> <strong>de<\/strong> <strong>tema)<\/strong>.<\/p>\n<figure id=\"attachment_151560\" aria-describedby=\"caption-attachment-151560\" style=\"width: 903px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151560 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.dae7a301ff6c4263b7608ef0fa6d8266.jpg\" alt=\"Personalizador de tema\" width=\"903\" height=\"474\"><figcaption id=\"caption-attachment-151560\" class=\"wp-caption-text\">Personalizador de tema<\/figcaption><\/figure>\n<p>A aba <strong>Appearance<\/strong> (Apar\u00eancia) permite que voc\u00ea escolha um tema padr\u00e3o e, ao mesmo tempo, d\u00e1 acesso para ajustar elementos como:<\/p>\n<ul>\n<li>Recuo de c\u00f3digo<\/li>\n<li>Estouro de texto<\/li>\n<li>Numera\u00e7\u00e3o de linha<\/li>\n<li>Efeito de proje\u00e7\u00e3o de linha<\/li>\n<li>C\u00f3digo RAW ao clicar duas vezes<\/li>\n<\/ul>\n<figure id=\"attachment_151561\" aria-describedby=\"caption-attachment-151561\" style=\"width: 1083px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151561 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.abcba1aae5c04c278f1b59b5768b3aa3.jpg\" alt=\"Se\u00e7\u00e3o Appearance do personalizador de temas\" width=\"1083\" height=\"830\"><figcaption id=\"caption-attachment-151561\" class=\"wp-caption-text\">Se\u00e7\u00e3o Appearance do personalizador de temas<\/figcaption><\/figure>\n<p>A se\u00e7\u00e3o <strong>Theme<\/strong>\u00a0<strong>Customizer<\/strong> inclui uma longa lista de guias para criar um tema highlighter de c\u00f3digo do zero, com op\u00e7\u00f5es para ajustar bot\u00f5es, express\u00f5es, linguagens e muito mais.<\/p>\n<figure id=\"attachment_151562\" aria-describedby=\"caption-attachment-151562\" style=\"width: 987px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151562 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.e9cf6edb95b34a5ebb1771e2491ad782.jpg\" alt=\"Configura\u00e7\u00f5es adicionais\" width=\"987\" height=\"865\"><figcaption id=\"caption-attachment-151562\" class=\"wp-caption-text\">Configura\u00e7\u00f5es adicionais<\/figcaption><\/figure>\n<h4>B\u00f4nus: uso do Enlighter com o editor cl\u00e1ssico<\/h4>\n<p>O plugin Enlighter funciona de forma ligeiramente diferente para aqueles que ainda usam o Editor cl\u00e1ssico do WordPress.<\/p>\n<p>Depois que voc\u00ea instalar o plugin Enlighter, v\u00e1 para qualquer artigo ou p\u00e1gina e encontre o bot\u00e3o <strong>Enlighter Code Insert<\/strong> no painel de controle do editor.<\/p>\n<figure id=\"attachment_151563\" aria-describedby=\"caption-attachment-151563\" style=\"width: 969px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151563 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.58a5cf5f681c4e638286491be211f678.jpg\" alt=\"Inserindo o c\u00f3digo no Enlighter\" width=\"969\" height=\"434\"><figcaption id=\"caption-attachment-151563\" class=\"wp-caption-text\">Inserindo o c\u00f3digo no Enlighter<\/figcaption><\/figure>\n<p>Isso abrir\u00e1 uma nova janela chamada <strong>Enlighter Code Insert<\/strong>.<\/p>\n<p>Cole o c\u00f3digo que voc\u00ea gostaria de exibir no campo grande (sem r\u00f3tulo) na parte inferior.<\/p>\n<figure id=\"attachment_151564\" aria-describedby=\"caption-attachment-151564\" style=\"width: 985px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151564 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.169682da2f0f4a80b61a2e195331cedf.jpg\" alt=\"Cole o c\u00f3digo\" width=\"985\" height=\"795\"><figcaption id=\"caption-attachment-151564\" class=\"wp-caption-text\">Cole o c\u00f3digo<\/figcaption><\/figure>\n<p>Clique no menu suspenso do campo <strong>Language (linguagem)<\/strong> para selecionar a linguagem de codifica\u00e7\u00e3o correto.<\/p>\n<figure id=\"attachment_151565\" aria-describedby=\"caption-attachment-151565\" style=\"width: 983px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151565 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.a9bc4bc75c3941d0a18f51012154c107.jpg\" alt=\"Escolha uma linguagem\" width=\"983\" height=\"660\"><figcaption id=\"caption-attachment-151565\" class=\"wp-caption-text\">Escolha uma linguagem<\/figcaption><\/figure>\n<p>Quando voc\u00ea tiver terminado, clique no bot\u00e3o <strong>OK<\/strong>. Voc\u00ea tamb\u00e9m pode fazer ajustes nos outros recursos dessa janela, como adicionar recuo de linha.<\/p>\n<figure id=\"attachment_151566\" aria-describedby=\"caption-attachment-151566\" style=\"width: 980px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151566 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.34dcd4d4658c4c5b849bbc0271526d65.jpg\" alt=\"Exemplo de recuo de linha\" width=\"980\" height=\"623\"><figcaption id=\"caption-attachment-151566\" class=\"wp-caption-text\">Exemplo de recuo de linha<\/figcaption><\/figure>\n<p>Clique no bot\u00e3o <strong>Publish<\/strong> para o artigo e, em seguida, veja os resultados no frontend. A caixa de c\u00f3digo padr\u00e3o do Editor cl\u00e1ssico \u00e9 um tema escuro, mas voc\u00ea pode alterar a apar\u00eancia da sua caixa de c\u00f3digo e at\u00e9 mesmo criar seus pr\u00f3prios temas.<\/p>\n<figure id=\"attachment_151567\" aria-describedby=\"caption-attachment-151567\" style=\"width: 922px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151567 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.3a8933d9ff7049568e8e0145998c0410.jpg\" alt=\"Vers\u00e3o publicada\" width=\"922\" height=\"743\"><figcaption id=\"caption-attachment-151567\" class=\"wp-caption-text\">Vers\u00e3o publicada<\/figcaption><\/figure>\n<h3>M\u00e9todo 3: Usando uma ferramenta de codifica\u00e7\u00e3o<\/h3>\n<p>As ferramentas de codifica\u00e7\u00e3o servem como op\u00e7\u00f5es alternativas ao tentar exibir c\u00f3digo no WordPress, especialmente se voc\u00ea n\u00e3o pretende fazer isso com frequ\u00eancia (e prefere n\u00e3o mexer em um plugin).<\/p>\n<p>Os codificadores HTML preservam a integridade dos formatos de c\u00f3digo, principalmente aqueles com caracteres especiais e tabula\u00e7\u00f5es. Os codificadores podem lidar com todos os tipos de c\u00f3digo, mas eles traduzem o c\u00f3digo inserido em um c\u00f3digo pronto para HTML que \u00e9 f\u00e1cil de colar no WordPress.<\/p>\n<p>N\u00e3o existem ferramentas de codifica\u00e7\u00e3o confi\u00e1veis como plugins, mas muitas s\u00e3o oferecidas como aplicativos da web gratuitos de terceiros. Observe tamb\u00e9m que as ferramentas de codifica\u00e7\u00e3o n\u00e3o oferecem nenhuma ferramenta de estilo, portanto, voc\u00ea s\u00f3 receber\u00e1 o c\u00f3digo como ele deve ser exibido (sem caixas sofisticadas ou recursos de personaliza\u00e7\u00e3o de linha).<\/p>\n<p>Algumas ferramentas de codifica\u00e7\u00e3o confi\u00e1veis incluem:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3docs.com\/tools\/html-encoder\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3Docs HTML Encoder<\/a><\/li>\n<li><a href=\"https:\/\/www.opinionatedgeek.com\/codecs\/htmlencoder\" target=\"_blank\" rel=\"noopener noreferrer\">Opinionated Geek HTML Encoder<\/a><\/li>\n<li><a href=\"https:\/\/www.web2generators.com\/html-based-tools\/online-html-entities-encoder-and-decoder\" target=\"_blank\" rel=\"noopener noreferrer\">Web2Generators HTML Encoder and Decoder<\/a><\/li>\n<\/ul>\n<p>Com base em nossos testes, a ferramenta de codifica\u00e7\u00e3o mais eficaz \u00e9 o W3Docs HTML Encoder, portanto, vamos us\u00e1-la neste tutorial.<\/p>\n<h4>Etapa 1: Abra o codificador e escolha as configura\u00e7\u00f5es<\/h4>\n<p>V\u00e1 para o site do W3Docs HTML Encoder.<\/p>\n<p>A p\u00e1gina mostra dois campos de caixa lado a lado. O da esquerda \u00e9 onde voc\u00ea deve colar seu c\u00f3digo. O da direita exibe a vers\u00e3o codificada que voc\u00ea deve copiar e colar no WordPress.<\/p>\n<p>No entanto, voc\u00ea deve primeiro definir o tipo de c\u00f3digo que deseja preservar:<\/p>\n<ul>\n<li>Escolha <strong>unicode JavaScript<\/strong> se voc\u00ea estiver colando c\u00f3digo com elementos JavaScript.<\/li>\n<li>Escolha <strong>s\u00edmbolos HTML<\/strong> quando voc\u00ea estiver usando HTML.<\/li>\n<\/ul>\n<figure id=\"attachment_151568\" aria-describedby=\"caption-attachment-151568\" style=\"width: 1155px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151568 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b4cf25bd90b44faea5a06da55310d33a.jpg\" alt=\"Escolha s\u00edmbolos HTML\" width=\"1155\" height=\"718\"><figcaption id=\"caption-attachment-151568\" class=\"wp-caption-text\">Escolha s\u00edmbolos HTML<\/figcaption><\/figure>\n<h4>Etapa 2: Cole e clique para Codificar<\/h4>\n<p>Cole o c\u00f3digo que voc\u00ea gostaria de exibir no WordPress no campo \u00e0 esquerda. Em seguida, localize e clique no bot\u00e3o <strong>Encode (Codificar)<\/strong> acima, \u00e0 direita.<\/p>\n<figure id=\"attachment_151569\" aria-describedby=\"caption-attachment-151569\" style=\"width: 1147px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151569 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.be543787ffbc49ea966242ac15528658.jpg\" alt=\"Clique para codificar\" width=\"1147\" height=\"621\"><figcaption id=\"caption-attachment-151569\" class=\"wp-caption-text\">Clique para codificar<\/figcaption><\/figure>\n<h4>Etapa 3: Copie o resultado decodificado<\/h4>\n<p>O produto final pode parecer confuso, mas na verdade \u00e9 uma combina\u00e7\u00e3o de elementos HTML para preservar todos os aspectos do c\u00f3digo que voc\u00ea inseriu, tudo sem fazer com que o c\u00f3digo seja ativado e mostre outra coisa no frontend.<\/p>\n<p>Clique no bot\u00e3o <strong>Copy <\/strong>para copiar.<\/p>\n<figure id=\"attachment_151570\" aria-describedby=\"caption-attachment-151570\" style=\"width: 1156px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151570 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4a0e251ebf094c2da66953dcbb53bbf2.jpg\" alt=\"Copie o c\u00f3digo\" width=\"1156\" height=\"623\"><figcaption id=\"caption-attachment-151570\" class=\"wp-caption-text\">Copie o c\u00f3digo<\/figcaption><\/figure>\n<h4>Etapa 4: Cole o HTML codificado no c\u00f3digo do WordPress ou no editor de texto<\/h4>\n<p>Volte para o WordPress e abra o artigo ou a p\u00e1gina desejada.<\/p>\n<p>Selecione o item de menu <strong>Options (Op\u00e7\u00f5es)<\/strong> (tr\u00eas pontos verticais) no canto superior direito. Clique na op\u00e7\u00e3o <strong>Code<\/strong>\u00a0<strong>Editor<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Evite tentar usar o bloco HTML personalizado para esse processo, pois ele n\u00e3o parece funcionar.<\/p>\n<\/aside>\n\n<figure id=\"attachment_151571\" aria-describedby=\"caption-attachment-151571\" style=\"width: 1087px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151571 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4eb099a1c6eb417bb897b6a0eb5a333a.jpg\" alt=\"V\u00e1 para o menu Options (Op\u00e7\u00f5es)\" width=\"1087\" height=\"613\"><figcaption id=\"caption-attachment-151571\" class=\"wp-caption-text\">V\u00e1 para o menu Options (Op\u00e7\u00f5es)<\/figcaption><\/figure>\n<p>Agora voc\u00ea ver\u00e1 o <strong>Code<\/strong> <strong>Editor<\/strong> em vez do visual do Editor de Blocos. Localize a \u00e1rea em que voc\u00ea gostaria de exibir o c\u00f3digo e cole o HTML codificado no editor.<\/p>\n<figure id=\"attachment_151572\" aria-describedby=\"caption-attachment-151572\" style=\"width: 901px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151572 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b5990861f47e46a3ab2b929258a7f630.jpg\" alt=\"Colar HTML codificado\" width=\"901\" height=\"870\"><figcaption id=\"caption-attachment-151572\" class=\"wp-caption-text\">Colar HTML codificado<\/figcaption><\/figure>\n<p>Se voc\u00ea estiver usando o editor cl\u00e1ssico do WordPress, dever\u00e1 ir para a aba Text (Texto), que \u00e9 igual ao Code Editor (Editor de C\u00f3digo) do Gutenberg Block Editor.<\/p>\n<figure id=\"attachment_151573\" aria-describedby=\"caption-attachment-151573\" style=\"width: 967px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151573 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b8d500e6d84b435a851a50cda8ea61c9.jpg\" alt=\"Aba Texto\" width=\"967\" height=\"736\"><figcaption id=\"caption-attachment-151573\" class=\"wp-caption-text\">Aba Texto<\/figcaption><\/figure>\n<h4>Etapa 5: Publique e visualize o c\u00f3digo<\/h4>\n<p>Clique em <strong>Update (Atualizar)<\/strong> ou <strong>Publish (Publicar)<\/strong> para o artigo e, em seguida, navegue at\u00e9 o frontend desse artigo para ver como ela est\u00e1.<\/p>\n<p>Voc\u00ea dever\u00e1 ver o c\u00f3digo original que foi colado no codificador, antes da ferramenta adicionar elementos de codifica\u00e7\u00e3o HTML. Conforme mencionado, n\u00e3o h\u00e1 nenhum recurso de estilo nos codificadores, portanto, esse \u00e9 um m\u00e9todo maravilhoso para que voc\u00ea tenha uma apar\u00eancia limpa e minimalista.<\/p>\n<figure id=\"attachment_151574\" aria-describedby=\"caption-attachment-151574\" style=\"width: 1083px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151574 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.321fb9938cf84a1c8308d32fc211b121.jpg\" alt=\"C\u00f3digo publicado\" width=\"1083\" height=\"808\"><figcaption id=\"caption-attachment-151574\" class=\"wp-caption-text\">C\u00f3digo publicado<\/figcaption><\/figure>\n<h3>M\u00e9todo 4: Ese um shortcode personalizado<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/pt\/blog\/codigo-curto-wordpress\/\">A cria\u00e7\u00e3o de um shortcode personalizado<\/a> faz o trabalho de inserir partes de c\u00f3digo reutiliz\u00e1vel sem que voc\u00ea precise copiar e colar. \u00c9 por isso que os c\u00f3digos de acesso personalizados oferecem uma oportunidade s\u00f3lida para a exibi\u00e7\u00e3o de c\u00f3digo no WordPress.<\/p>\n<p>Aqui est\u00e3o os benef\u00edcios de usar c\u00f3digos de acesso personalizados para exibir c\u00f3digos:<\/p>\n<ol>\n<li>Os c\u00f3digos de acesso personalizados permitem que voc\u00ea salve c\u00f3digos complicados uma vez e depois os reutilize, eliminando a necessidade de digitar snippet\u00a0de c\u00f3digo mais longos todas as vezes.<\/li>\n<li>Voc\u00ea pode escrever seu pr\u00f3prio <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-css\/\">CSS<\/a> de estilo para os marcadores de c\u00f3digo e as caixas.<\/li>\n<li>Os c\u00f3digos de acesso podem ser usados por qualquer pessoa, de modo que outros colaboradores possam aproveitar os marcadores de c\u00f3digo e os blocos que voc\u00ea criou clicando em um bot\u00e3o.<\/li>\n<\/ol>\n<p>Para criar um shortcode personalizado, voc\u00ea precisa ter experi\u00eancia em editar <a href=\"https:\/\/kinsta.com\/pt\/blog\/que-e-u-tema-wordpress\/#whats-inside-those-wordpress-files\">arquivos de temas do WordPress<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/blog\/php-editor\/\">trabalhar com c\u00f3digo PHP<\/a> e, possivelmente, criar plugins do WordPress. Devido a esses requisitos, criar um shortcode personalizado para o WordPress pode ser dif\u00edcil para quem n\u00e3o tem experi\u00eancia com PHP.<\/p>\n<p>No entanto, o produto final resulta em uma maneira significativa mais f\u00e1cil de exibir c\u00f3digo no WordPress.<\/p>\n<figure id=\"attachment_151575\" aria-describedby=\"caption-attachment-151575\" style=\"width: 1558px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151575 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.2e11bbe71e8244aaa8d5ecc5d61c3bab.jpg\" alt=\"C\u00f3digo de acesso HTML\" width=\"1558\" height=\"842\"><figcaption id=\"caption-attachment-151575\" class=\"wp-caption-text\">C\u00f3digo de acesso HTML<\/figcaption><\/figure>\n<p>Voc\u00ea pode nomear o shortcode personalizado como quiser e criar v\u00e1rias op\u00e7\u00f5es, como <code>[html] [\/html]<\/code> e <code>[css] [\/css]<\/code>, para diferentes linguagens de codifica\u00e7\u00e3o.<\/p>\n<figure id=\"attachment_151576\" aria-describedby=\"caption-attachment-151576\" style=\"width: 1647px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151576 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.85e96f67d4374def86be5d930973f276.jpg\" alt=\"C\u00f3digo de acesso CSS\" width=\"1647\" height=\"714\"><figcaption id=\"caption-attachment-151576\" class=\"wp-caption-text\">C\u00f3digo de acesso CSS<\/figcaption><\/figure>\n<p>Lembre-se de que os c\u00f3digos de acesso personalizados funcionam melhor para realce de sintaxe ao usar o <strong>Editor<\/strong> <strong>de texto<\/strong> (no editor Cl\u00e1ssico do WordPress ) ou a caixa <strong>HTML<\/strong> <strong>personalizado<\/strong> ao trabalhar com o Editor de blocos do WordPress Gutenberg.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>O bloco Shortcode do Gutenberg \u00e9 uma op\u00e7\u00e3o, mas durante nossos testes, alguns snippets de c\u00f3digo perderam elementos de formata\u00e7\u00e3o ou caracteres importantes.<\/p>\n<\/aside>\n\n<figure id=\"attachment_151577\" aria-describedby=\"caption-attachment-151577\" style=\"width: 1063px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151577 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b5305f76b1754513b54ee4fd2a41e41e.jpg\" alt=\"Editor de texto\" width=\"1063\" height=\"534\"><figcaption id=\"caption-attachment-151577\" class=\"wp-caption-text\">Editor de texto<\/figcaption><\/figure>\n<p>O objetivo \u00e9 criar um shortcode personalizado em que voc\u00ea possa digitar ou colar c\u00f3digo entre as tags de abertura e fechamento do shortcode.<\/p>\n<figure id=\"attachment_151578\" aria-describedby=\"caption-attachment-151578\" style=\"width: 1487px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151578 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.557a5f43cf8d4950ac2bc4212f6aa73b.jpg\" alt=\"C\u00f3digo colado dentro do shortcode HTML\" width=\"1487\" height=\"834\"><figcaption id=\"caption-attachment-151578\" class=\"wp-caption-text\">C\u00f3digo colado dentro do shortcode HTML<\/figcaption><\/figure>\n<p>Ap\u00f3s publicado, as configura\u00e7\u00f5es de estilo e destaque do shortcode personalizado s\u00e3o exibidas no frontend. E o c\u00f3digo que voc\u00ea adicionou \u00e9 exibido de forma agrad\u00e1vel no real\u00e7ador de sintaxe.<\/p>\n<figure id=\"attachment_151579\" aria-describedby=\"caption-attachment-151579\" style=\"width: 1357px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151579 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.1123bc1ac4c34faab9809ce3826b2cc9.jpg\" alt=\"Visualiza\u00e7\u00e3o do frontend\" width=\"1357\" height=\"897\"><figcaption id=\"caption-attachment-151579\" class=\"wp-caption-text\">Visualiza\u00e7\u00e3o do frontend<\/figcaption><\/figure>\n<h3>M\u00e9todo 5: Usando as tags <code><code><\/code>&lt;code&gt; and &lt;pre&gt;<\/code><\/h3>\n<p>Talvez a maneira mais antiga, por\u00e9m ainda incrivelmente confi\u00e1vel, de exibir c\u00f3digo no WordPress seja simplesmente adicionar tags HTML espec\u00edficas ao snippet de c\u00f3digo. Esse m\u00e9todo \u00e9 melhor para quando voc\u00ea trabalha com o editor cl\u00e1ssico do WordPress ou em qualquer editor de HTML.<\/p>\n<p>H\u00e1 duas op\u00e7\u00f5es:<\/p>\n<ol>\n<li><strong><code>&lt;code&gt;<\/code> tags:<\/strong> Melhor para exibir uma linha curta de c\u00f3digo; geralmente usado em par\u00e1grafos<\/li>\n<li><strong><code>&lt;pre&gt;<\/code> tags:<\/strong> Ideal para blocos de c\u00f3digo mais longos ou quando voc\u00ea quiser mais op\u00e7\u00f5es de formata\u00e7\u00e3o<\/li>\n<\/ol>\n<h4>Op\u00e7\u00e3o 1: Use as tags <code>&lt;code&gt;<\/code> para snippets de c\u00f3digo em linha<\/h4>\n<p>Os criadores de conte\u00fado que escrevem sobre codifica\u00e7\u00e3o nem sempre querem usar grandes blocos de c\u00f3digo. \u00c0s vezes, faz mais sentido incluir um pequeno snippet de c\u00f3digo em um par\u00e1grafo.<\/p>\n<p>No entanto, voc\u00ea ainda precisa destacar e preservar a formata\u00e7\u00e3o do c\u00f3digo. E alguns c\u00f3digos podem causar problemas com o conte\u00fado ao redor se n\u00e3o forem preservados adequadamente.<\/p>\n<figure id=\"attachment_151580\" aria-describedby=\"caption-attachment-151580\" style=\"width: 908px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151580 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.103e5a059b524aa0aa00957a007800de.jpg\" alt=\"Uma tag de quebra\" width=\"908\" height=\"371\"><figcaption id=\"caption-attachment-151580\" class=\"wp-caption-text\">Uma tag de quebra<\/figcaption><\/figure>\n<p>Vejamos a tag <code>&lt;br&gt;<\/code>, por exemplo &#8211; sem as tags <code>&lt;code&gt;<\/code>, ela simplesmente adicionaria uma quebra ao par\u00e1grafo.<\/p>\n<figure id=\"attachment_151581\" aria-describedby=\"caption-attachment-151581\" style=\"width: 1020px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151581 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.a191cc69e4594c76acf394a546c9a1ed.jpg\" alt=\"Uma quebra indesejada\" width=\"1020\" height=\"390\"><figcaption id=\"caption-attachment-151581\" class=\"wp-caption-text\">Uma quebra indesejada<\/figcaption><\/figure>\n<p>Ao colocar a codifica\u00e7\u00e3o dentro dessas tags, voc\u00ea obt\u00e9m um resultado muito mais limpo:<\/p>\n<pre><code class=\"language-html\"><code>&lt;code&gt; &lt;\/code&gt;<\/code><\/code><\/pre>\n<p>Para fazer isso, abra um artigo do WordPress e ative o <strong>Code Editor<\/strong> (para o Editor de blocos do Gutenberg) ou o <strong>Text<\/strong>\u00a0<strong>Editor<\/strong> (ao usar o editor Cl\u00e1ssico do WordPress).<\/p>\n<p>Cole ou digite essas tags em algum lugar do editor; n\u00e3o insira o c\u00f3digo que voc\u00ea deseja exibir ainda. Em vez disso, adicione um espa\u00e7o entre as tags.<\/p>\n<p><code class=\"language-html\"><code>&lt;code&gt; &lt;\/code&gt;<\/code><\/code><\/p>\n<figure id=\"attachment_151582\" aria-describedby=\"caption-attachment-151582\" style=\"width: 1111px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151582 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.e37032a750ae40dbb0bae105f49375bc.jpg\" alt=\"Espa\u00e7o entre as tags de c\u00f3digo\" width=\"1111\" height=\"313\"><figcaption id=\"caption-attachment-151582\" class=\"wp-caption-text\">Espa\u00e7o entre as tags de c\u00f3digo<\/figcaption><\/figure>\n<p>Mude para o <strong>Visual<\/strong> <strong>Editor<\/strong> (independentemente de voc\u00ea estar no Gutenberg ou no WordPress cl\u00e1ssico).<\/p>\n<p>Voc\u00ea ver\u00e1 um pequeno espa\u00e7o cinza dentro do conte\u00fado visual. Clique para posicionar seu cursor dentro desse espa\u00e7o cinza. \u00c9 aqui que voc\u00ea pode colar ou digitar o c\u00f3digo para exibi\u00e7\u00e3o.<\/p>\n<figure id=\"attachment_151583\" aria-describedby=\"caption-attachment-151583\" style=\"width: 988px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151583 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.749a378741b34258a4a3c94dcd4e5455.jpg\" alt=\"Espa\u00e7o cinza para voc\u00ea escrever o c\u00f3digo\" width=\"988\" height=\"280\"><figcaption id=\"caption-attachment-151583\" class=\"wp-caption-text\">Espa\u00e7o cinza para voc\u00ea escrever o c\u00f3digo<\/figcaption><\/figure>\n<p>\u00c0 medida que voc\u00ea digita, o espa\u00e7o cinza se expande para acomodar o snippet de c\u00f3digo. Clique no bot\u00e3o <strong>Publish<\/strong>\u00a0ou <strong>Update<\/strong>\u00a0para esse artigo.<\/p>\n<figure id=\"attachment_151584\" aria-describedby=\"caption-attachment-151584\" style=\"width: 1019px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151584 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.132a0f507095471dbc4bf516bba70787.jpg\" alt=\"Digitando c\u00f3digo no espa\u00e7o cinza\" width=\"1019\" height=\"367\"><figcaption id=\"caption-attachment-151584\" class=\"wp-caption-text\">Digitando c\u00f3digo no espa\u00e7o cinza<\/figcaption><\/figure>\n<p>No frontend do artigo, voc\u00ea ver\u00e1 o c\u00f3digo preservado como deveria estar e sem nenhuma atividade estranha (como adicionar uma quebra ao conte\u00fado).<\/p>\n<figure id=\"attachment_151585\" aria-describedby=\"caption-attachment-151585\" style=\"width: 1163px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151585 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.3034b84bc11f4511b65cb87a74b4e92d.jpg\" alt=\"A tag de interrup\u00e7\u00e3o exibida sem que voc\u00ea realmente adicione uma interrup\u00e7\u00e3o\" width=\"1163\" height=\"449\"><figcaption id=\"caption-attachment-151585\" class=\"wp-caption-text\">A tag de interrup\u00e7\u00e3o exibida sem que voc\u00ea realmente adicione uma interrup\u00e7\u00e3o<\/figcaption><\/figure>\n<p>A formata\u00e7\u00e3o dessas tags <code>&lt;code&gt;<\/code> geralmente \u00e9 simples, mas muitas vezes depende do estilo do seu tema. Por exemplo, nosso exemplo altera apenas a fonte, mas n\u00e3o inclui um fundo cinza.<\/p>\n<h4>Op\u00e7\u00e3o 2: Use as tags <code>&lt;pre&gt;<\/code> para blocos de c\u00f3digo mais longos<\/h4>\n<p>Snippets de c\u00f3digo mais longos merecem seus pr\u00f3prios blocos, separados do conte\u00fado que voc\u00ea est\u00e1 escrevendo em par\u00e1grafos. Para esses casos, recomendamos que voc\u00ea use as tags <code>&lt;pre&gt;<\/code>.<\/p>\n<p>O processo de adi\u00e7\u00e3o de uma tag <code>&lt;pre&gt;<\/code> \u00e9 igual ao das tags <code>&lt;code&gt;<\/code>, mas voc\u00ea tem mais espa\u00e7o para trabalhar quando se trata de inserir seu c\u00f3digo.<\/p>\n<p>V\u00e1 para um artigo e abra o editor de <strong>c\u00f3digo<\/strong> (Gutenberg) ou <strong>de texto<\/strong> (WordPress cl\u00e1ssico). Cole ou digite o c\u00f3digo que voc\u00ea gostaria de exibir. Em seguida, envolva o c\u00f3digo com essas tags:<\/p>\n<p><code>&lt;pre&gt; &lt;\/pre&gt;<\/code><\/p>\n<figure id=\"attachment_151586\" aria-describedby=\"caption-attachment-151586\" style=\"width: 1099px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151586 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.d24206ad63c045479f1ad67aa2e5ae5d.jpg\" alt=\"Pr\u00e9-marca\u00e7\u00f5es\" width=\"1099\" height=\"596\"><figcaption id=\"caption-attachment-151586\" class=\"wp-caption-text\">Pr\u00e9-marca\u00e7\u00f5es<\/figcaption><\/figure>\n<p>Mude para o editor <strong>Visual<\/strong> para ver como fica. Voc\u00ea notar\u00e1 que a se\u00e7\u00e3o de texto ter\u00e1 um r\u00f3tulo <strong>&#8220;Preformatted&#8221;<\/strong>, que \u00e9 exatamente o que a tag <code>&lt;pre&gt;<\/code> deve fazer.<\/p>\n<figure id=\"attachment_151587\" aria-describedby=\"caption-attachment-151587\" style=\"width: 1021px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151587 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4bc9f2cabf7b45aeba2da63e5bd1f96f.jpg\" alt=\"Escolha a op\u00e7\u00e3o preformatted\" width=\"1021\" height=\"450\"><figcaption id=\"caption-attachment-151587\" class=\"wp-caption-text\">Escolha a op\u00e7\u00e3o preformatted<\/figcaption><\/figure>\n<p>Clique em <strong>Publish<\/strong>\u00a0ou <strong>Update <\/strong>e, em seguida, v\u00e1 para o frontend para ver o c\u00f3digo em sua forma original. Da mesma forma que a tag <code>&lt;code&gt;<\/code>, e a tag <code>&lt;pre&gt;<\/code> s\u00e3o p\u00e9ssimas em termos de formata\u00e7\u00e3o, de modo que voc\u00ea fica com a apar\u00eancia mais simples poss\u00edvel. Entretanto, h\u00e1 maneiras de voc\u00ea mesmo estiliz\u00e1-las.<\/p>\n<figure id=\"attachment_151588\" aria-describedby=\"caption-attachment-151588\" style=\"width: 1177px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151588 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.12b9304ed5de42298a6474f01813d716.jpg\" alt=\"Resultados do frontend\" width=\"1177\" height=\"759\"><figcaption id=\"caption-attachment-151588\" class=\"wp-caption-text\">Resultados do frontend<\/figcaption><\/figure>\n<h5>Dicas para estilizar as tags <code>&lt;pre&gt;<\/code><\/h5>\n<p>As tags <code>&lt;pre&gt;<\/code> s\u00e3o menos est\u00e1veis do que as tags <code>&lt;code&gt;<\/code>, portanto, voc\u00ea pode ter dificuldades dependendo do tipo de c\u00f3digo que est\u00e1 tentando mostrar.<\/p>\n<p>Use estas dicas para melhorar a apar\u00eancia:<\/p>\n<ul>\n<li>Fa\u00e7a o poss\u00edvel para remover ou evitar completamente as quebras de linha, pois a tag <code>&lt;pre&gt;<\/code> geralmente n\u00e3o as reconhece. Em geral, ela responde mal a muitas quebras de linha.<\/li>\n<li>Considere adicionar uma propriedade <code>overflow-x:auto;<\/code> em seu CSS para adicionar a funcionalidade de rolagem ao c\u00f3digo da tag <code>&lt;pre&gt;<\/code>. Isso ajuda com o excesso de conte\u00fado, j\u00e1 que a tag <code>&lt;pre&gt;<\/code>, por si s\u00f3, permite que seu c\u00f3digo saia da p\u00e1gina.<\/li>\n<li>Use fontes com espa\u00e7amento simples.<\/li>\n<\/ul>\n<p>Voc\u00ea tamb\u00e9m pode estilizar a formata\u00e7\u00e3o do texto e a caixa atr\u00e1s do c\u00f3digo. Aqui est\u00e1 um modelo inicial que voc\u00ea pode <a href=\"https:\/\/kinsta.com\/pt\/blog\/editar-codigo-wordpress\/\">adicionar ao seu arquivo CSS<\/a>:<\/p>\n<pre><code class=\"language-css\">article pre{\nbackground:#ffffff;\nborder:3px #eee solid;\nborder-top:30px #eee solid;\nfont-family:Consolas, courier;\nfont-size:0.8em;\nwhite-space:pre;\noverflow-x:auto;\n}<\/code><\/pre>\n<h3>M\u00e9todo 6: Use um editor Markdown que se conecta ao WordPress<\/h3>\n<p>Os editores Markdown oferecem a capacidade n\u00e3o apenas de digitar e formatar mais rapidamente, mas muitos deles se conectam diretamente ao WordPress para publica\u00e7\u00e3o instant\u00e2nea diretamente do editor.<\/p>\n<p>Muitos escritores recorrem a editores markdown devido a esse r\u00e1pido processo de cria\u00e7\u00e3o de conte\u00fado. E, felizmente, alguns desses editores oferecem markdown para blocos de c\u00f3digo, o que significa que voc\u00ea pode exibir o c\u00f3digo no editor markdown e envi\u00e1-lo diretamente ao WordPress para publica\u00e7\u00e3o.<\/p>\n<p>Tenha em mente que <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-editores-texto\/\">os editores de texto normais<\/a> (como o <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-usar-sublime-text\/\">Sublime Text<\/a>) n\u00e3o preservam a integridade do c\u00f3digo quando transferido para publica\u00e7\u00e3o no WordPress. E <a href=\"https:\/\/kinsta.com\/pt\/blog\/editores-html-gratuitos\/\">os editores de HTML<\/a>, embora excelentes para escrever e armazenar c\u00f3digo, tamb\u00e9m n\u00e3o oferecem os recursos de destaque necess\u00e1rios para preservar o c\u00f3digo para publica\u00e7\u00e3o no WordPress.<\/p>\n<p>H\u00e1 <a href=\"https:\/\/kinsta.com\/pt\/blog\/editores-markdown\/\">muitos editores de markdown<\/a> para voc\u00ea escolher, mas as solu\u00e7\u00f5es ideais compartilham dois recursos:<\/p>\n<ol>\n<li>Exporta\u00e7\u00e3o direta para o WordPress<\/li>\n<li>Markdown para destaque de c\u00f3digo<\/li>\n<\/ol>\n<p>Voc\u00ea pode, no entanto, optar por um editor de markdown com exporta\u00e7\u00e3o de HTML, se n\u00e3o gostar de exporta\u00e7\u00f5es diretas para o WordPress.<\/p>\n<p>Os melhores editores de markdown com ambos os recursos s\u00e3o:<\/p>\n<ul>\n<li><a href=\"https:\/\/ulysses.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ulysses<\/a> (Mac e iOS)<\/li>\n<li><a href=\"https:\/\/bywordapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">ByWord<\/a> (Mac e iOS)<\/li>\n<li><a href=\"https:\/\/obsidian.md\/\" target=\"_blank\" rel=\"noopener noreferrer\">Obsidian<\/a> (Mac, Windows, Linux e outros)<\/li>\n<\/ul>\n<p>O Ulysses e o ByWord s\u00e3o aplicativos premium, enquanto o Obsidian tem vers\u00f5es gratuitas e premium.<\/p>\n<p>No tutorial a seguir, usaremos o Ulysses.<\/p>\n<h4>Etapa 1: Adicione um bloco de c\u00f3digo de formato longo no Ulysses<\/h4>\n<p>Ao redigir um documento no Ulysses, digite <code>\"<\/code> markdown &#8211; ou seja, dois ap\u00f3strofos &#8211; sempre que voc\u00ea quiser adicionar imediatamente um bloco markdown de c\u00f3digo em um documento.<\/p>\n<p>Esse m\u00e9todo markdown \u00e9 para blocos de c\u00f3digo mais longos. Ele n\u00e3o pode ser usado no meio de um par\u00e1grafo, portanto voc\u00ea deve criar uma nova linha para que o markdown seja ativado.<\/p>\n<figure id=\"attachment_151589\" aria-describedby=\"caption-attachment-151589\" style=\"width: 2000px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151589 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Gif-for-code-block.14390a79e7064955b03f88869ec1ffee.gif\" alt=\"Marca\u00e7\u00e3o de c\u00f3digo markdown do Ulysses\" width=\"2000\" height=\"1126\"><figcaption id=\"caption-attachment-151589\" class=\"wp-caption-text\">Marca\u00e7\u00e3o de c\u00f3digo markdown do Ulysses<\/figcaption><\/figure>\n<p>Quando o marcador de c\u00f3digo aparecer, voc\u00ea poder\u00e1 digitar ou colar o que quiser nele.<\/p>\n<figure id=\"attachment_151590\" aria-describedby=\"caption-attachment-151590\" style=\"width: 1015px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151590 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b5f94d159066484fb7b70b16a1c3c73a.jpg\" alt=\"Colando o c\u00f3digo no marcador de c\u00f3digo do Ulysses\" width=\"1015\" height=\"543\"><figcaption id=\"caption-attachment-151590\" class=\"wp-caption-text\">Colando o c\u00f3digo no marcador de c\u00f3digo do Ulysses<\/figcaption><\/figure>\n<p>Outra maneira de ativar o bloco de c\u00f3digo \u00e9 clicando no item de menu <strong>Markdown<\/strong> (tr\u00eas pontos horizontais) e, em seguida, selecionando a op\u00e7\u00e3o <strong>Code<\/strong>.<\/p>\n<figure id=\"attachment_151592\" aria-describedby=\"caption-attachment-151592\" style=\"width: 937px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151592 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.81ab2e958f054c0798abc43d606aca57.jpg\" alt=\"Use o menu Markdown para selecionar o item Code\" width=\"937\" height=\"398\"><figcaption id=\"caption-attachment-151592\" class=\"wp-caption-text\">Use o menu Markdown para selecionar o item Code<\/figcaption><\/figure>\n<p>Ap\u00f3s clicar nesse item de menu, o campo do marcador de c\u00f3digo aparecer\u00e1 onde quer que o cursor estivesse por \u00faltimo.<\/p>\n<figure id=\"attachment_151593\" aria-describedby=\"caption-attachment-151593\" style=\"width: 977px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151593 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.41e360b297fd4c60be68ccb8bcf0cccf.jpg\" alt=\"Marcador de c\u00f3digo vazio\" width=\"977\" height=\"285\"><figcaption id=\"caption-attachment-151593\" class=\"wp-caption-text\">Marcador de c\u00f3digo vazio<\/figcaption><\/figure>\n<p>Para colocar snippets de c\u00f3digo dentro de par\u00e1grafos, voc\u00ea recorreria ao markdown <code>``<\/code> (que tem quase a mesma apar\u00eancia, mas na verdade s\u00e3o dois acentos agudos\/graves em vez de ap\u00f3strofos).<\/p>\n<h4>Etapa 3: Exporte para o WordPress<\/h4>\n<p>Quando voc\u00ea tiver o documento pronto, \u00e9 hora de exportar tudo para o WordPress.<\/p>\n<p>A parte maravilhosa dos editores markdown que se conectam ao WordPress \u00e9 que eles mant\u00eam os blocos de c\u00f3digo durante toda a transfer\u00eancia. Assim, voc\u00ea ver\u00e1 marcadores de c\u00f3digo bem formatados e prontos para serem publicados no WordPress.<\/p>\n<figure id=\"attachment_151594\" aria-describedby=\"caption-attachment-151594\" style=\"width: 996px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151594 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.59962c045f204e8990253665628656d0.jpg\" alt=\"O destacador de c\u00f3digo permanece o mesmo no WordPress\" width=\"996\" height=\"723\"><figcaption id=\"caption-attachment-151594\" class=\"wp-caption-text\">O destacador de c\u00f3digo permanece o mesmo no WordPress<\/figcaption><\/figure>\n<p>No Ulysses, v\u00e1 at\u00e9 a parte superior do documento para localizar a barra de ferramentas. Clique no bot\u00e3o <strong>Publishing Preview<\/strong>.<\/p>\n<figure id=\"attachment_151595\" aria-describedby=\"caption-attachment-151595\" style=\"width: 981px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151595 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.927b4b9ed6d54119baebba453248cf41.jpg\" alt=\"Selecione o bot\u00e3o Publishing Preview\" width=\"981\" height=\"618\"><figcaption id=\"caption-attachment-151595\" class=\"wp-caption-text\">Selecione o bot\u00e3o Publishing Preview<\/figcaption><\/figure>\n<p>Isso abrir\u00e1 um menu suspenso para voc\u00ea selecionar uma plataforma e um site para publica\u00e7\u00e3o. Voc\u00ea tamb\u00e9m pode usar a op\u00e7\u00e3o <strong>Manage<\/strong> <strong>Accounts<\/strong> (<strong>Gerenciar\u00a0contas<\/strong>) nesse menu para fazer login em um site do WordPress antes de exportar.<\/p>\n<p>Quando voc\u00ea tiver o site certo, clique no bot\u00e3o <strong>Publish<\/strong>.<\/p>\n<figure id=\"attachment_151596\" aria-describedby=\"caption-attachment-151596\" style=\"width: 948px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151596 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.e00fbece9dc94fea8e8a5e63d1336717.jpg\" alt=\"Escolha uma conta e publique\" width=\"948\" height=\"704\"><figcaption id=\"caption-attachment-151596\" class=\"wp-caption-text\">Escolha uma conta e publique<\/figcaption><\/figure>\n<p>Preencha o t\u00edtulo do artigo, a programa\u00e7\u00e3o e qualquer outra informa\u00e7\u00e3o que voc\u00ea queira, como categorias, tags e imagens em destaque.<\/p>\n<p>A parte mais importante, no entanto, \u00e9 definir o <strong>Status<\/strong> como <strong>Draft<\/strong> para que voc\u00ea n\u00e3o publique o artigo sem revis\u00e1-lo primeiro no WordPress.<\/p>\n<p>Clique em <strong>OK<\/strong> para prosseguir.<\/p>\n<figure id=\"attachment_151597\" aria-describedby=\"caption-attachment-151597\" style=\"width: 915px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151597 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b14f638aa5d94d789d323bfc861dafca.jpg\" alt=\"Escolha um status e clique em OK\" width=\"915\" height=\"649\"><figcaption id=\"caption-attachment-151597\" class=\"wp-caption-text\">Escolha um status e clique em OK<\/figcaption><\/figure>\n<p>Em alguns segundos, o Ulysses colocar\u00e1 todo o documento em um novo artigo do WordPress (talvez voc\u00ea tenha que fazer login no <a href=\"https:\/\/kinsta.com\/pt\/blog\/painel-administrativo-wordpress\/\">administrador do WordPress<\/a> quando ele for exibido).<\/p>\n<p>Voc\u00ea ver\u00e1 os blocos de c\u00f3digo j\u00e1 configurados e prontos para serem publicados. Clique no bot\u00e3o <strong>Publish<\/strong>\u00a0para torn\u00e1-lo ativo.<\/p>\n<figure id=\"attachment_151598\" aria-describedby=\"caption-attachment-151598\" style=\"width: 1202px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151598 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.9b10519d98304e4b83dfefbefe2955fe.jpg\" alt=\"Blocos de c\u00f3digo no editor do WordPress\" width=\"1202\" height=\"788\"><figcaption id=\"caption-attachment-151598\" class=\"wp-caption-text\">Blocos de c\u00f3digo no editor do WordPress<\/figcaption><\/figure>\n<p>No frontend, voc\u00ea ver\u00e1 que os snippets de c\u00f3digo em linha e os blocos de c\u00f3digo maiores est\u00e3o bem destacados, e a formata\u00e7\u00e3o desse c\u00f3digo foi preservada.<\/p>\n<figure id=\"attachment_151599\" aria-describedby=\"caption-attachment-151599\" style=\"width: 916px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151599 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.7fe2b1887f1644d7a819d9a68d18481b.jpg\" alt=\"Resultados do frontend\" width=\"916\" height=\"881\"><figcaption id=\"caption-attachment-151599\" class=\"wp-caption-text\">Resultados do frontend<\/figcaption><\/figure>\n\n<h2>Resumo<\/h2>\n<p>H\u00e1 v\u00e1rios m\u00e9todos para exibir corretamente o c\u00f3digo no WordPress, e isso geralmente depende do editor do WordPress que est\u00e1 sendo usado, da linguagem de c\u00f3digo que voc\u00ea gostaria de exibir e de como voc\u00ea gostaria de exibir e formatar esse c\u00f3digo. Por exemplo, ao optar por um plugin, voc\u00ea certamente ter\u00e1 uma experi\u00eancia de formata\u00e7\u00e3o mais criativa do que o bloco de c\u00f3digo padr\u00e3o no editor do WordPress Gutenberg.<\/p>\n<p>Neste artigo, abordamos v\u00e1rios m\u00e9todos diferentes que ilustram como voc\u00ea pode exibir c\u00f3digo no WordPress.<\/p>\n<p>Em geral, recomendamos que voc\u00ea comece com o m\u00e9todo 1 e v\u00e1 avan\u00e7ando. O m\u00e9todo 2 serve, se voc\u00ea estiver procurando por mais op\u00e7\u00f5es de estilo, e os m\u00e9todos 3 , 4 e 5 s\u00e3o \u00fateis apenas em situa\u00e7\u00f5es espec\u00edficas. O m\u00e9todo 6 \u00e9 uma esp\u00e9cie de solu\u00e7\u00e3o b\u00f4nus, destinada \u00e0queles que preferem editores markdown em vez de escrever diretamente no WordPress.<\/p>\n<p>Independentemente do m\u00e9todo que voc\u00ea escolher, um provedor de hospedagem confi\u00e1vel pode ajud\u00e1-lo a aprimorar ainda mais o seu site. As solu\u00e7\u00f5es de <a href=\"https:\/\/kinsta.com\/pt\/hospedagem-wordpress\/\">hospedagem WordPress<\/a> da Kinsta oferecem <a href=\"https:\/\/kinsta.com\/pt\/precos\/\">planos para sites<\/a> de todos os tamanhos e formatos, e a platafprma <a href=\"https:\/\/kinsta.com\/pt\/mykinsta\/\">MyKinsta<\/a>, tem um painel de controle exclusivo que facilita a edi\u00e7\u00e3o de qualquer parte do seu site e de seus arquivos. Al\u00e9m disso, voc\u00ea ter\u00e1 os benef\u00edcios adicionais de <a href=\"https:\/\/kinsta.com\/pt\/blog\/plataforma-de-nuvem-para-desenvolvedores\/\">velocidade<\/a>, <a href=\"https:\/\/kinsta.com\/pt\/integracao-cloudflare\/\">seguran\u00e7a<\/a> e <a href=\"https:\/\/kinsta.com\/pt\/suporte-kinsta\/\">suporte<\/a> de classe mundial da Kinsta.<\/p>\n<p>Voc\u00ea j\u00e1 tentou exibir c\u00f3digo no WordPress antes? Se sim, qual m\u00e9todo funcionou melhor para voc\u00ea? Deixe-nos saber na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aprender a exibir c\u00f3digos no WordPress \u00e9 fundamental para blogueiros e criadores de conte\u00fado que publicam c\u00f3digos on-line de forma consistente para que seus leitores possam &#8230;<\/p>\n","protected":false},"author":199,"featured_media":59562,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1026,1037],"class_list":["post-59561","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-desenvolvimento-wordpress","topic-dicas-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como Exibir C\u00f3digo no WordPress (E Torn\u00e1-lo mais Atraente) - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Saiba como usar o WordPress para exibir c\u00f3digos, com plugins, c\u00f3digos de acesso e at\u00e9 mesmo ferramentas de codifica\u00e7\u00e3o. Tamb\u00e9m exploraremos o uso do software markdown.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Exibir C\u00f3digo no WordPress (E Torn\u00e1-lo mais Atraente)\" \/>\n<meta property=\"og:description\" content=\"Saiba como usar o WordPress para exibir c\u00f3digos, com plugins, c\u00f3digos de acesso e at\u00e9 mesmo ferramentas de codifica\u00e7\u00e3o. Tamb\u00e9m exploraremos o uso do software markdown.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-17T13:20:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-17T12:57:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-display-code.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Saiba como usar o WordPress para exibir c\u00f3digos, com plugins, c\u00f3digos de acesso e at\u00e9 mesmo ferramentas de codifica\u00e7\u00e3o. Tamb\u00e9m exploraremos o uso do software markdown.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-display-code.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"40 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Como Exibir C\u00f3digo no WordPress (E Torn\u00e1-lo mais Atraente)\",\"datePublished\":\"2023-05-17T13:20:36+00:00\",\"dateModified\":\"2025-01-17T12:57:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/\"},\"wordCount\":6267,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-display-code.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/\",\"name\":\"Como Exibir C\u00f3digo no WordPress (E Torn\u00e1-lo mais Atraente) - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-display-code.jpg\",\"datePublished\":\"2023-05-17T13:20:36+00:00\",\"dateModified\":\"2025-01-17T12:57:11+00:00\",\"description\":\"Saiba como usar o WordPress para exibir c\u00f3digos, com plugins, c\u00f3digos de acesso e at\u00e9 mesmo ferramentas de codifica\u00e7\u00e3o. Tamb\u00e9m exploraremos o uso do software markdown.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-display-code.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-display-code.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dicas WordPress\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/dicas-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Exibir C\u00f3digo no WordPress (E Torn\u00e1-lo mais Atraente)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Exibir C\u00f3digo no WordPress (E Torn\u00e1-lo mais Atraente) - Kinsta\u00ae","description":"Saiba como usar o WordPress para exibir c\u00f3digos, com plugins, c\u00f3digos de acesso e at\u00e9 mesmo ferramentas de codifica\u00e7\u00e3o. Tamb\u00e9m exploraremos o uso do software markdown.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/","og_locale":"pt_PT","og_type":"article","og_title":"Como Exibir C\u00f3digo no WordPress (E Torn\u00e1-lo mais Atraente)","og_description":"Saiba como usar o WordPress para exibir c\u00f3digos, com plugins, c\u00f3digos de acesso e at\u00e9 mesmo ferramentas de codifica\u00e7\u00e3o. Tamb\u00e9m exploraremos o uso do software markdown.","og_url":"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-05-17T13:20:36+00:00","article_modified_time":"2025-01-17T12:57:11+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-display-code.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Saiba como usar o WordPress para exibir c\u00f3digos, com plugins, c\u00f3digos de acesso e at\u00e9 mesmo ferramentas de codifica\u00e7\u00e3o. Tamb\u00e9m exploraremos o uso do software markdown.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-display-code.jpg","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Jeremy Holcombe","Tempo estimado de leitura":"40 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Como Exibir C\u00f3digo no WordPress (E Torn\u00e1-lo mais Atraente)","datePublished":"2023-05-17T13:20:36+00:00","dateModified":"2025-01-17T12:57:11+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/"},"wordCount":6267,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-display-code.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/","url":"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/","name":"Como Exibir C\u00f3digo no WordPress (E Torn\u00e1-lo mais Atraente) - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-display-code.jpg","datePublished":"2023-05-17T13:20:36+00:00","dateModified":"2025-01-17T12:57:11+00:00","description":"Saiba como usar o WordPress para exibir c\u00f3digos, com plugins, c\u00f3digos de acesso e at\u00e9 mesmo ferramentas de codifica\u00e7\u00e3o. Tamb\u00e9m exploraremos o uso do software markdown.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-display-code.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/05\/wordpress-display-code.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/wordpress-display-codigo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Dicas WordPress","item":"https:\/\/kinsta.com\/pt\/topicos\/dicas-wordpress\/"},{"@type":"ListItem","position":3,"name":"Como Exibir C\u00f3digo no WordPress (E Torn\u00e1-lo mais Atraente)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/pt\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/59561","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=59561"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/59561\/revisions"}],"predecessor-version":[{"id":62989,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/59561\/revisions\/62989"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59561\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59561\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59561\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59561\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59561\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59561\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59561\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59561\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59561\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59561\/translations\/dk"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/59561\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/59562"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=59561"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=59561"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=59561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}