Como exibir trechos de código em destaque em seu site WordPress

Quase todo blogueiro de tecnologia, criador de conteúdo ou desenvolvedor precisa às vezes exibir trechos de código em destaque em seu blog. Isso pode ser uma dor de cabeça por si só. No entanto, destacar uma linha ou linhas dentro desse snippet também pode ser necessário e, infelizmente, esse recurso não faz parte da maioria das incorporações de código. Felizmente, o plugin SyntaxHighlighter Evolved existe. Vamos mostrar como usá-lo para manter o código o mais limpo e legível possível.

Inscreva-se no nosso canal no Youtube

SyntaxHighlighter Evolved

A instalação e ativação do plugin é simples. Você pode encontrá-lo no repositório de plug-ins WP.org, mas certifique-se de obter o feito por Alex Mills (Viper007Bond) . Existem muitos plug-ins com nomes e recursos semelhantes, mas sabemos que este é confiável e está atualizado. Além disso, este vem com um bloco especializado para o editor de Gutenberg. Sem falar em uma série de parâmetros que permitem personalizar sua experiência, o que o torna nossa escolha para esse tipo de tarefa.

No menu Configurações do painel do WordPress, você encontrará um novo item denominado SyntaxHighlighter . Vá em frente e clique nele. Lá, você pode ajustar cada pequena coisa que você precisa para incorporar os trechos de código em seu site WordPress.

Configurações do SyntaxHighlighter

A página de configurações do plugin é relativamente simples. Um elemento específico de que gostamos neste plug-in é que você obtém um bom número de personalizações em relação à forma como o código é exibido em seu site. Você pode adicionar classes CSS à incorporação, ajustar o preenchimento do número da linha, escolher temas de cores, usar guias inteligentes e quebra de linha e decidir como carregar o destaque de linguagem de codificação individual em uma escala de todo o site.

Queremos destacar três configurações específicas das quais achamos que a maioria das pessoas deve estar ciente.

Versão do plug-in, números de linha e tamanho da guia

A primeira é a versão do plugin que você carregou. Embora o próprio plugin seja atualizado no repo, dependendo de como você deseja exibir melhor o seu código, você pode escolher entre as versões 2.xe 3.x do plugin . Ambos são seguros, no entanto, cada um oferece recursos específicos que o outro não (no momento da redação deste artigo).

Se os usuários que copiam seu código for o mais importante, a versão 3.x será adequada. No entanto, se o seu é mais para exibição do que utilidade real, a quebra de linha da versão 2.x pode ser mais adequada para você porque evita a necessidade de barras de rolagem em grandes trechos de código.

Então você tem que exibir ou não os números das linhas. Para grandes trechos de código e tutoriais, os números de linha são inestimáveis. No entanto, quando você tem trechos curtos, não há necessidade de rotulá-los continuamente como linhas 1 e 2. Removê-los pode limpar bastante a aparência do código.

E depois há o tamanho da guia sempre controverso. A opção padrão é 4, mas você pode alterá-la para qualquer número que desejar. Incluindo o valor correto de 2. (Sim, percebemos que não há valor correto. Gostamos apenas de 2 espaços para tabulações.)

Seu código e códigos de acesso

Se você rolar até a parte inferior da página Configurações , verá uma grande visualização do código, bem como um grande número de parâmetros de código de acesso. Seu tempo seria bem gasto examinando-os, apenas para ver o que todo o plug-in pode fazer para destacar seus trechos de código. Além disso, todas as alterações feitas acima em como o código é exibido nas configurações acima serão refletidas aqui. Portanto, certifique-se de clicar em salvar após alterar qualquer uma das opções.

Embora algumas pessoas não sejam os maiores fãs de códigos de acesso porque podem vincular você a certos plug-ins, achamos que vale a pena usá-los porque são inteligentes e fáceis de lembrar. No mínimo, você precisa se lembrar de duas coisas para que o plugin funcione da melhor forma para você.

• ou

   or  or  or...well, you get it</li>
          <li>[highlight 5-9]</li>
  </ul>
  
  Or some variation thereof. If you can remember those, you're pretty solid for most things you will use the plugin for.
  
  While you can use the long-form language identifiers, the SyntaxHighlighter is built well enough to make things easy on you. Here on the ET blog, whenever you see a code snippet, we have a similar shortcode processor where we just use <strong>code written here

  , e é formatado e destacado.

  Usando os códigos curtos

  Em qualquer lugar onde você pode renderizar um shortcode, você pode usá-los. No Divi ou no editor clássico, você pode usar o módulo Texto ou o editor TinyMCE e apenas colar o código entre os códigos de acesso. Por causa do funcionamento da guia Visual, sugerimos que você use a guia Texto para manter a formatação de caracteres especiais.

  

  Se você for um usuário do Gutenberg / Block Editor, as coisas são tão simples quanto. Você pode, novamente, usar o bloco de texto para isso. Ainda mais fácil do que isso é o bloco de HTML personalizado. Exatamente como acima, cole o código dentro das tags shortcode.

  

  Ainda melhor do que isso, entretanto, é o próprio bloco SyntaxHighlighter Evolved. Incluído com a instalação do plugin está o seu próprio Bloco de Gutenberg para que, se você não for uma pessoa de shortcode e não quiser mexer com os parâmetros, você não precisa. Basta localizar o bloco em Formatação e inseri-lo em sua postagem ou página.

  

  Independentemente de como você insere o código, verá a mesma renderização no front end do seu site WordPress.

  

  Terminando

  Existem muitos motivos pelos quais você pode precisar apresentar trechos de código ao seu público. Talvez você escreva tutoriais ou poste correções para problemas comuns para o público ver e usar quando precisar. Mas às vezes uma incorporação do GitHub simplesmente não fornece o tipo exato de experiência que você deseja para seus usuários. É aí que você precisa de um plugin como SyntaxHighlighter Evolved. Com alguns cliques, um pouco de personalização e um bloco de Gutenberg ou um shortcode, seu público estará navegando pelo seu código sem nenhum problema.

  Que usos você poderia encontrar em seu site para destacar um código como este?

  Imagem de destaque do artigo por Adil Bouyghajden / shutterstock.com