Aprender a exibir códigos no WordPress é fundamental para blogueiros e criadores de conteúdo que publicam códigos on-line de forma consistente para que seus leitores possam utilizar. O código de computador, 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ódigo propriamente ditos.
Isso, no entanto, representa um problema para quem escreve sobre desenvolvimento e design, pois você precisa de uma maneira de exibir adequadamente o código sem que ele faça seu trabalho real, como criar um botão ou adicionar estilo a um bloco de parágrafos.
Simplificando, se você escrever um artigo e colocar um exemplo de snippet de código, você deve verificar se o código realmente funciona! Dessa forma, os leitores podem ver o código em sua forma bruta, visualizar o código em um bloco bem formatado e até mesmo copiar seu conteúdo para usar em seu trabalho de desenvolvimento.
Neste guia, mostraremos exatamente como exibir código no WordPress (independentemente do tema do WordPress) usando vários métodos diferentes e ajudaremos você a decidir qual método funciona melhor para o seu fluxo de trabalho.
O que acontece quando você adiciona código regular no WordPress?
Você pode se perguntar o que aconteceria se escrevesse algum código no editor visual do WordPress. Afinal de contas, você não está mexendo nos editores de texto ou de código, então seu snippet de código não deveria funcionar bem?
Provavelmente não.
Aqui estão alguns dos resultados incomuns que podem ocorrer:
- O código aparece parcialmente, com partes do código sendo exibidas no frontend do artigo e outras desaparecendo. Isso parece pouco profissional para os visitantes; significa que seu código não está correto.
- Não aparece nada, com o código desaparecendo completamente do backend e não mostrando nada no frontend da publicação.
- Você vê uma formatação estranha – geralmente algo que não é amigável ou publicável para um público.
- O código pode ser renderizado apenas parcialmente
Para ilustrar alguns desses resultados, usaremos o seguinte snippet de código HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>Esse snippet de código específico usa elementos de estilo HTML para produzir três blocos de conteúdo verde com cabeçalhos e parágrafos.
No entanto, gostaríamos de exibir o código bruto em um artigo de blog, e não que ele fosse realmente renderizado nesses blocos.
Aqui estão os resultados se você colar o código diretamente no Editor de Blocos do WordPress Gutenberg:
Como você pode ver, o WordPress tenta usar o código para sua finalidade principal: gerar conteúdo – no entanto, ele retira o estilo do código, de modo que não fornece o resultado que queríamos mostrar aos leitores.
Para evitar situações como essa, recomendamos que você use um dos métodos listados abaixo para exibir o código.
Como exibir código em seu site WordPress (6 métodos)
Esses métodos estão listados do mais fácil ao mais difícil, e temos alguns métodos especiais para aqueles que gostam de escrever código e conteúdo em editores de markdown (ao invés do WordPress).
Método 1: Usando o editor de blocos Gutenberg (padrão)
Para praticar a exibição de código no WordPress, você pode usar o seguinte snippet de código, que usa HTML e CSS interno para produzir um resultado simples com um cabeçalho azul e um parágrafo preto:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: beige;}
h1 {color: blue;}
p {color: black;}
</style>
</head>
<body>
<h1>Fun Facts About Otters</h1>
<p>A group of otters in water is called a "raft," since they all link arms to prevent from floating away.</p>
</body>
</html>Quando colocado em ação, o código mostrará isso no frontend:
Mas, ao seguir este tutorial, você aprenderá a exibir o código bruto em si, e não o que o código deve mostrar no frontend.
Etapa 1: Adicione um bloco de código no WordPress
O editor do WordPress Gutenberg já tem um bloco de código integrado, que permite que você exiba snippet de código sem perder a formatação ou ativar o código.
Para começar, crie um artigo ou página no WordPress e clique em um dos botões Add Block.
Clique em um dos botões Add Block
Isso revela a coleção de blocos disponíveis. Você pode procurar o bloco Code ou digitar uma palavra-chave como “code” na barra de pesquisa.
Quando você ver o bloco Code (com ícones de colchetes), clique nele para inserir um snippet de código na publicação.
Agora você deve ver um campo com o prompt “Write code…”.
O editor do WordPress Gutenberg é compatível com markdown, portanto você também pode encontrar e inserir o bloco Código digitando uma barra (/) no editor e, em seguida, escrever “C” ou “Code”. O WordPress mostrará todos os blocos relevantes, oferecendo a você uma maneira mais rápida de inseri-los.
É fácil confundir o bloco de código (Code block) e o bloco de HTML personalizado (Custom HTML block). No entanto, o bloco de HTML personalizado é usado para adicionar HTML personalizado para ser renderizado no frontend, não para adicionar código bruto para exibição.
Etapa 2: Cole o código de exibição no campo do bloco de código
Agora é hora de copiar o código que você gostaria de exibir e colá-lo na caixa que diz “Write Code…”.
Seu código agora aparecerá dentro da caixa.
O que é ótimo sobre o bloco de código é que ele respeita todos os espaços e tabulações que você já tinha dentro do snippet de código. Como resultado, ele não deve parecer diferente da fonte de onde você o copiou.
Etapa 3: Publique e visualize os resultados
Para exibir seu código no artigo ou na página do WordPress, conclua o processo clicando no botão Publish (Publicar).
Você também pode ter uma ideia da aparência do código antes de publicá-lo selecionando Preview (Visualizar).
Depois que você clicar no botão Publish (Publicar), visite a versão em tempo real do artigo para confirmar se o snippet de código está sendo exibido como código bruto.
Como você pode ver, o bloco de código é bastante simples, mas fornece a funcionalidade necessária para manter a formatação ao publicar código em artigos de blog.
Dê uma olhada na captura de tela abaixo. Em nosso exemplo aqui, nada foi alterado em relação ao snippet de código original; foi simplesmente apresentado no frontend em uma caixa cinza.
Etapa 4: Considere a formatação do bloco de código
Para fazer com que o bloco de código se destaque um pouco, pense em mudar sua aparência do padrão.
Para revelar as opções de estilo do bloco, selecione o bloco Code e, em seguida, escolha o botão Settings (ícone de engrenagem). Isso abrirá a aba Block (Bloco), que mostra apenas as configurações do bloco que você selecionou – nesse caso, o bloco de código.
Você pode estilizar o bloco de Código como quiser, com opções para alterar itens como texto e cores de fundo.
Você também pode:
- Alterar o tamanho do texto
- Adicionar preenchimento e margens à caixa de código
- Incluir uma borda com largura e cores personalizadas
Como sempre, clique no botão Publish quando você terminar de editar o bloco e, em seguida, veja os resultados no frontend da publicação do WordPress.
Método 2: Usando um plugin
Outra maneira de exibir código no WordPress é instalando um plugin.
Esse método pode parecer um pouco redundante, considerando que o WordPress já tem um bloco de código integrado, mas alguns plugins oferecem recursos adicionais e ferramentas de formatação que fazem valer a pena trabalhar com um plugin. Em resumo, você pode tornar seus blocos de código mais bonitos do que o que obteria com o bloco de código padrão do Gutenberg.
Além disso, alguns usuários do Editor Clássico do WordPress podem achar mais fácil trabalhar com um plugin, pois é um pouco mais complicado exibir o código no Editor Clássico.
Para começar, você deve escolher um plugin de “syntax highlighter”, que é uma maneira elegante de dizer que o plugin realçará seu código-fonte e manterá sua formatação intacta.
Aqui estão alguns plugins de boa reputação para exibição de código no WordPress:
Usaremos o plugin Enlighter neste tutorial, pois ele oferece opções para marcar os tipos de código que você exibe nas caixas de código, além de muitos outros recursos de estilo. No entanto, você é mais do que bem-vindo para experimentar os outros, pois todos eles fazem a mesma coisa.
Etapa 1: Instale o plugin Enlighter
Instale o plugin Enlighter – Customizable Syntax Highlighter em seu site WordPress usando o método de instalação de plugin que você preferir.
Após a ativação, o plugin estará pronto para inserir código em qualquer artigo/página com um bloco do Gutenberg ou botão Inserir do Editor Clássico.
Etapa 2: Insira o bloco de código-fonte do Enlighter em um artigo
Se você estiver usando o Editor de Blocos do WordPress Gutenberg, abra um artigo na qual gostaria de exibir o código. Clique em um dos botões Add Block (ícone +) para revelar a coleção de blocos disponíveis.
Procure ou digite uma palavra-chave para o bloco Enlighten Sourcecode. Clique nesse bloco para inseri-lo no artigo.
Etapa 3: Cole o código no bloco Enlighter Highlighter
O bloco Enlighter Highlighter aparecerá no Editor de Blocos, com um título para “Generic Highlighting” e um campo para “Insert Sourcecode…”
Pegue o código que você gostaria de exibir no WordPress e cole/digite no campo “Insert Sourcecode…“.
Como um destacador de sintaxe, o plugin preserva todas as opções de formatação e tabulações. Quando você estiver satisfeito com o resultado, clique no botão Publish (Publicar).
Etapa 4: Visualize o código no frontend
Com isso, você pode visualizar o frontend do seu artigo para ver o que os visitantes do site veem.
O plugin Enlighter oferece um tema padrão minimalista para exibição de código, com números de linha para ajudar na organização e na referência.
Como mencionamos, o uso de um plugin para exibir código no WordPress tem suas vantagens em relação aos outros métodos. Por exemplo, a versão frontend do plugin de sintaxe Enlighter destaca as linhas à medida que o usuário rola o código.
Há também vários botões no canto superior direito da caixa de código, incluindo um que apresenta o código em texto simples, sem os números de linha.
O segundo botão chama-se Copy To Clipboard (Copiar para área de transferência), que copia instantaneamente tudo o que está na caixa de código para a área de transferência do usuário, que pode copiar e colar em qualquer programa que desejar.
Por fim, o terceiro botão abre o código em uma nova janela, apresentando em uma versão de texto simples da janela do navegador.
Etapa 5: Defina as configurações de linguagem e linha para a bloco de código
O plugin Enlighter vem com vários temas e ferramentas de personalização poderosas para fazer com que a bloco de código tenha a aparência desejada. Se você preferir não usar o tema padrão, volte ao seu artigo no WordPress e clique no bloco Enlighter Sourcecode que está aberto no momento.
Isso abrirá a barra lateral do bloco no WordPress. Se ela não abrir, certifique-se de clicar no botão Settings (ícone de engrenagem) no canto superior direito da janela do WordPress.
A primeira configuração a ser personalizada é o campo Language (linguagem) – isso informa ao plugin qual linguagem de código é exibido para que ele possa oferecer a formatação e o destaque adequados.
Há várias linguagens de código para você escolher, portanto, percorra a lista e escolha a mais adequada.
O campo Speciallines destaca todas as linhas que você especificar. Para que isso aconteça, digite os números das linhas separados por vírgulas.
Como resultado, os visitantes do site verão linhas destacadas para todas as que você especificou.
O campo Lineoffset é uma maneira de iniciar o snippet de código em uma linha numerada específica, o que é vantajoso se você estiver exibindo apenas um subconjunto de código que faz parte de um conjunto maior de linhas.
Como você pode ver, ao digitar “10” no campo Lineoffset, o código completo começa a partir do número 10.
Etapa 6: Escolha um tema
O tema Enlighter é o tema padrão desse plugin. No entanto, o campo Theme (ainda abaixo do painel de configurações do bloco) apresenta uma ampla gama de temas incorporados que você pode escolher.
Por exemplo, o tema Godzilla exibe o código como se ele estivesse em cima de um gráfico ou papel de rascunho.
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ódigo.
Outro exemplo é o tema Classic, que é uma versão menos minimalista do tema Enlighter, com cores mais vivas e linhas mais definidas.
Etapa 7: Considere a possibilidade de criar um tema personalizado
O plugin Enlighter oferece um guia no painel do WordPress para que você personalize todos os aspectos do plugin e seus recursos de destaque.
Para obter controle total sobre o design e a exibição de suas caixas de código, vá para a aba Enlighter (ícone <>) e escolha Appearance (Aparência) ou Theme Customizer (Personalizador de tema).
A aba Appearance (Aparência) permite que você escolha um tema padrão e, ao mesmo tempo, dá acesso para ajustar elementos como:
- Recuo de código
- Estouro de texto
- Numeração de linha
- Efeito de projeção de linha
- Código RAW ao clicar duas vezes
A seção Theme Customizer inclui uma longa lista de guias para criar um tema highlighter de código do zero, com opções para ajustar botões, expressões, linguagens e muito mais.
Bônus: uso do Enlighter com o editor clássico
O plugin Enlighter funciona de forma ligeiramente diferente para aqueles que ainda usam o Editor clássico do WordPress.
Depois que você instalar o plugin Enlighter, vá para qualquer artigo ou página e encontre o botão Enlighter Code Insert no painel de controle do editor.
Isso abrirá uma nova janela chamada Enlighter Code Insert.
Cole o código que você gostaria de exibir no campo grande (sem rótulo) na parte inferior.
Clique no menu suspenso do campo Language (linguagem) para selecionar a linguagem de codificação correto.
Quando você tiver terminado, clique no botão OK. Você também pode fazer ajustes nos outros recursos dessa janela, como adicionar recuo de linha.
Clique no botão Publish para o artigo e, em seguida, veja os resultados no frontend. A caixa de código padrão do Editor clássico é um tema escuro, mas você pode alterar a aparência da sua caixa de código e até mesmo criar seus próprios temas.
Método 3: Usando uma ferramenta de codificação
As ferramentas de codificação servem como opções alternativas ao tentar exibir código no WordPress, especialmente se você não pretende fazer isso com frequência (e prefere não mexer em um plugin).
Os codificadores HTML preservam a integridade dos formatos de código, principalmente aqueles com caracteres especiais e tabulações. Os codificadores podem lidar com todos os tipos de código, mas eles traduzem o código inserido em um código pronto para HTML que é fácil de colar no WordPress.
Não existem ferramentas de codificação confiáveis como plugins, mas muitas são oferecidas como aplicativos da web gratuitos de terceiros. Observe também que as ferramentas de codificação não oferecem nenhuma ferramenta de estilo, portanto, você só receberá o código como ele deve ser exibido (sem caixas sofisticadas ou recursos de personalização de linha).
Algumas ferramentas de codificação confiáveis incluem:
Com base em nossos testes, a ferramenta de codificação mais eficaz é o W3Docs HTML Encoder, portanto, vamos usá-la neste tutorial.
Etapa 1: Abra o codificador e escolha as configurações
Vá para o site do W3Docs HTML Encoder.
A página mostra dois campos de caixa lado a lado. O da esquerda é onde você deve colar seu código. O da direita exibe a versão codificada que você deve copiar e colar no WordPress.
No entanto, você deve primeiro definir o tipo de código que deseja preservar:
- Escolha unicode JavaScript se você estiver colando código com elementos JavaScript.
- Escolha símbolos HTML quando você estiver usando HTML.
Etapa 2: Cole e clique para Codificar
Cole o código que você gostaria de exibir no WordPress no campo à esquerda. Em seguida, localize e clique no botão Encode (Codificar) acima, à direita.
Etapa 3: Copie o resultado decodificado
O produto final pode parecer confuso, mas na verdade é uma combinação de elementos HTML para preservar todos os aspectos do código que você inseriu, tudo sem fazer com que o código seja ativado e mostre outra coisa no frontend.
Clique no botão Copy para copiar.
Etapa 4: Cole o HTML codificado no código do WordPress ou no editor de texto
Volte para o WordPress e abra o artigo ou a página desejada.
Selecione o item de menu Options (Opções) (três pontos verticais) no canto superior direito. Clique na opção Code Editor.
Agora você verá o Code Editor em vez do visual do Editor de Blocos. Localize a área em que você gostaria de exibir o código e cole o HTML codificado no editor.
Se você estiver usando o editor clássico do WordPress, deverá ir para a aba Text (Texto), que é igual ao Code Editor (Editor de Código) do Gutenberg Block Editor.
Etapa 5: Publique e visualize o código
Clique em Update (Atualizar) ou Publish (Publicar) para o artigo e, em seguida, navegue até o frontend desse artigo para ver como ela está.
Você deverá ver o código original que foi colado no codificador, antes da ferramenta adicionar elementos de codificação HTML. Conforme mencionado, não há nenhum recurso de estilo nos codificadores, portanto, esse é um método maravilhoso para que você tenha uma aparência limpa e minimalista.
Método 4: Ese um shortcode personalizado
A criação de um shortcode personalizado faz o trabalho de inserir partes de código reutilizável sem que você precise copiar e colar. É por isso que os códigos de acesso personalizados oferecem uma oportunidade sólida para a exibição de código no WordPress.
Aqui estão os benefícios de usar códigos de acesso personalizados para exibir códigos:
- Os códigos de acesso personalizados permitem que você salve códigos complicados uma vez e depois os reutilize, eliminando a necessidade de digitar snippet de código mais longos todas as vezes.
- Você pode escrever seu próprio CSS de estilo para os marcadores de código e as caixas.
- Os códigos de acesso podem ser usados por qualquer pessoa, de modo que outros colaboradores possam aproveitar os marcadores de código e os blocos que você criou clicando em um botão.
Para criar um shortcode personalizado, você precisa ter experiência em editar arquivos de temas do WordPress, trabalhar com código PHP e, possivelmente, criar plugins do WordPress. Devido a esses requisitos, criar um shortcode personalizado para o WordPress pode ser difícil para quem não tem experiência com PHP.
No entanto, o produto final resulta em uma maneira significativa mais fácil de exibir código no WordPress.
Você pode nomear o shortcode personalizado como quiser e criar várias opções, como [html] [/html] e [css] [/css], para diferentes linguagens de codificação.
Lembre-se de que os códigos de acesso personalizados funcionam melhor para realce de sintaxe ao usar o Editor de texto (no editor Clássico do WordPress ) ou a caixa HTML personalizado ao trabalhar com o Editor de blocos do WordPress Gutenberg.
O objetivo é criar um shortcode personalizado em que você possa digitar ou colar código entre as tags de abertura e fechamento do shortcode.
Após publicado, as configurações de estilo e destaque do shortcode personalizado são exibidas no frontend. E o código que você adicionou é exibido de forma agradável no realçador de sintaxe.
Método 5: Usando as tags
Talvez a maneira mais antiga, porém ainda incrivelmente confiável, de exibir código no WordPress seja simplesmente adicionar tags HTML específicas ao snippet de código. Esse método é melhor para quando você trabalha com o editor clássico do WordPress ou em qualquer editor de HTML.
Há duas opções:
<code>tags: Melhor para exibir uma linha curta de código; geralmente usado em parágrafos<pre>tags: Ideal para blocos de código mais longos ou quando você quiser mais opções de formatação
Opção 1: Use as tags <code> para snippets de código em linha
Os criadores de conteúdo que escrevem sobre codificação nem sempre querem usar grandes blocos de código. Às vezes, faz mais sentido incluir um pequeno snippet de código em um parágrafo.
No entanto, você ainda precisa destacar e preservar a formatação do código. E alguns códigos podem causar problemas com o conteúdo ao redor se não forem preservados adequadamente.
Vejamos a tag <br>, por exemplo – sem as tags <code>, ela simplesmente adicionaria uma quebra ao parágrafo.
Ao colocar a codificação dentro dessas tags, você obtém um resultado muito mais limpo:
<code> </code>Para fazer isso, abra um artigo do WordPress e ative o Code Editor (para o Editor de blocos do Gutenberg) ou o Text Editor (ao usar o editor Clássico do WordPress).
Cole ou digite essas tags em algum lugar do editor; não insira o código que você deseja exibir ainda. Em vez disso, adicione um espaço entre as tags.
<code> </code>
Mude para o Visual Editor (independentemente de você estar no Gutenberg ou no WordPress clássico).
Você verá um pequeno espaço cinza dentro do conteúdo visual. Clique para posicionar seu cursor dentro desse espaço cinza. É aqui que você pode colar ou digitar o código para exibição.
À medida que você digita, o espaço cinza se expande para acomodar o snippet de código. Clique no botão Publish ou Update para esse artigo.
No frontend do artigo, você verá o código preservado como deveria estar e sem nenhuma atividade estranha (como adicionar uma quebra ao conteúdo).
A formatação dessas tags <code> geralmente é simples, mas muitas vezes depende do estilo do seu tema. Por exemplo, nosso exemplo altera apenas a fonte, mas não inclui um fundo cinza.
Opção 2: Use as tags <pre> para blocos de código mais longos
Snippets de código mais longos merecem seus próprios blocos, separados do conteúdo que você está escrevendo em parágrafos. Para esses casos, recomendamos que você use as tags <pre>.
O processo de adição de uma tag <pre> é igual ao das tags <code>, mas você tem mais espaço para trabalhar quando se trata de inserir seu código.
Vá para um artigo e abra o editor de código (Gutenberg) ou de texto (WordPress clássico). Cole ou digite o código que você gostaria de exibir. Em seguida, envolva o código com essas tags:
<pre> </pre>
Mude para o editor Visual para ver como fica. Você notará que a seção de texto terá um rótulo “Preformatted”, que é exatamente o que a tag <pre> deve fazer.
Clique em Publish ou Update e, em seguida, vá para o frontend para ver o código em sua forma original. Da mesma forma que a tag <code>, e a tag <pre> são péssimas em termos de formatação, de modo que você fica com a aparência mais simples possível. Entretanto, há maneiras de você mesmo estilizá-las.
Dicas para estilizar as tags <pre>
As tags <pre> são menos estáveis do que as tags <code>, portanto, você pode ter dificuldades dependendo do tipo de código que está tentando mostrar.
Use estas dicas para melhorar a aparência:
- Faça o possível para remover ou evitar completamente as quebras de linha, pois a tag
<pre>geralmente não as reconhece. Em geral, ela responde mal a muitas quebras de linha. - Considere adicionar uma propriedade
overflow-x:auto;em seu CSS para adicionar a funcionalidade de rolagem ao código da tag<pre>. Isso ajuda com o excesso de conteúdo, já que a tag<pre>, por si só, permite que seu código saia da página. - Use fontes com espaçamento simples.
Você também pode estilizar a formatação do texto e a caixa atrás do código. Aqui está um modelo inicial que você pode adicionar ao seu arquivo CSS:
article pre{
background:#ffffff;
border:3px #eee solid;
border-top:30px #eee solid;
font-family:Consolas, courier;
font-size:0.8em;
white-space:pre;
overflow-x:auto;
}Método 6: Use um editor Markdown que se conecta ao WordPress
Os editores Markdown oferecem a capacidade não apenas de digitar e formatar mais rapidamente, mas muitos deles se conectam diretamente ao WordPress para publicação instantânea diretamente do editor.
Muitos escritores recorrem a editores markdown devido a esse rápido processo de criação de conteúdo. E, felizmente, alguns desses editores oferecem markdown para blocos de código, o que significa que você pode exibir o código no editor markdown e enviá-lo diretamente ao WordPress para publicação.
Tenha em mente que os editores de texto normais (como o Sublime Text) não preservam a integridade do código quando transferido para publicação no WordPress. E os editores de HTML, embora excelentes para escrever e armazenar código, também não oferecem os recursos de destaque necessários para preservar o código para publicação no WordPress.
Há muitos editores de markdown para você escolher, mas as soluções ideais compartilham dois recursos:
- Exportação direta para o WordPress
- Markdown para destaque de código
Você pode, no entanto, optar por um editor de markdown com exportação de HTML, se não gostar de exportações diretas para o WordPress.
Os melhores editores de markdown com ambos os recursos são:
O Ulysses e o ByWord são aplicativos premium, enquanto o Obsidian tem versões gratuitas e premium.
No tutorial a seguir, usaremos o Ulysses.
Etapa 1: Adicione um bloco de código de formato longo no Ulysses
Ao redigir um documento no Ulysses, digite " markdown – ou seja, dois apóstrofos – sempre que você quiser adicionar imediatamente um bloco markdown de código em um documento.
Esse método markdown é para blocos de código mais longos. Ele não pode ser usado no meio de um parágrafo, portanto você deve criar uma nova linha para que o markdown seja ativado.
Quando o marcador de código aparecer, você poderá digitar ou colar o que quiser nele.
Outra maneira de ativar o bloco de código é clicando no item de menu Markdown (três pontos horizontais) e, em seguida, selecionando a opção Code.
Após clicar nesse item de menu, o campo do marcador de código aparecerá onde quer que o cursor estivesse por último.
Para colocar snippets de código dentro de parágrafos, você recorreria ao markdown `` (que tem quase a mesma aparência, mas na verdade são dois acentos agudos/graves em vez de apóstrofos).
Etapa 3: Exporte para o WordPress
Quando você tiver o documento pronto, é hora de exportar tudo para o WordPress.
A parte maravilhosa dos editores markdown que se conectam ao WordPress é que eles mantêm os blocos de código durante toda a transferência. Assim, você verá marcadores de código bem formatados e prontos para serem publicados no WordPress.
No Ulysses, vá até a parte superior do documento para localizar a barra de ferramentas. Clique no botão Publishing Preview.
Isso abrirá um menu suspenso para você selecionar uma plataforma e um site para publicação. Você também pode usar a opção Manage Accounts (Gerenciar contas) nesse menu para fazer login em um site do WordPress antes de exportar.
Quando você tiver o site certo, clique no botão Publish.
Preencha o título do artigo, a programação e qualquer outra informação que você queira, como categorias, tags e imagens em destaque.
A parte mais importante, no entanto, é definir o Status como Draft para que você não publique o artigo sem revisá-lo primeiro no WordPress.
Clique em OK para prosseguir.
Em alguns segundos, o Ulysses colocará todo o documento em um novo artigo do WordPress (talvez você tenha que fazer login no administrador do WordPress quando ele for exibido).
Você verá os blocos de código já configurados e prontos para serem publicados. Clique no botão Publish para torná-lo ativo.
No frontend, você verá que os snippets de código em linha e os blocos de código maiores estão bem destacados, e a formatação desse código foi preservada.
Resumo
Há vários métodos para exibir corretamente o código no WordPress, e isso geralmente depende do editor do WordPress que está sendo usado, da linguagem de código que você gostaria de exibir e de como você gostaria de exibir e formatar esse código. Por exemplo, ao optar por um plugin, você certamente terá uma experiência de formatação mais criativa do que o bloco de código padrão no editor do WordPress Gutenberg.
Neste artigo, abordamos vários métodos diferentes que ilustram como você pode exibir código no WordPress.
Em geral, recomendamos que você comece com o método 1 e vá avançando. O método 2 serve, se você estiver procurando por mais opções de estilo, e os métodos 3 , 4 e 5 são úteis apenas em situações específicas. O método 6 é uma espécie de solução bônus, destinada àqueles que preferem editores markdown em vez de escrever diretamente no WordPress.
Independentemente do método que você escolher, um provedor de hospedagem confiável pode ajudá-lo a aprimorar ainda mais o seu site. As soluções de hospedagem WordPress da Kinsta oferecem planos para sites de todos os tamanhos e formatos, e a platafprma MyKinsta, tem um painel de controle exclusivo que facilita a edição de qualquer parte do seu site e de seus arquivos. Além disso, você terá os benefícios adicionais de velocidade, segurança e suporte de classe mundial da Kinsta.
Você já tentou exibir código no WordPress antes? Se sim, qual método funcionou melhor para você? Deixe-nos saber na seção de comentários abaixo.
Deixe um comentário