Deseja adicionar realce de sintaxe nos comentários do WordPress?
Por padrão, o WordPress não vem com nenhum destaque de sintaxe para comentários, posts ou páginas. Isso pode ser um grande problema se você escrever artigos sobre codificação ou programação em seu site WordPress.
Neste artigo, mostraremos como adicionar facilmente o realce de sintaxe nos comentários do WordPress.
Por que e quando você precisa de realce de sintaxe nos comentários do WordPress?
O realce de sintaxe é uma forma de melhorar a aparência e facilitar a compreensão do código. Ele adiciona cores e números de linha aos trechos de código, tornando-os mais legíveis. Veja um exemplo:
<html>
<head>
<title>My Awesome Website</title>
</head>
<body>
<h1>Welcome to My Homepage</h1>
</body>
</html>
Se você tem um blog no WordPress sobre desenvolvimento web ou codificação, é importante ativar o realce de sintaxe nos comentários do WordPress. Com isso, os leitores podem facilmente escrever códigos de forma legível.
Isso os incentivará a falar sobre código e a compartilhar seus próprios trechos nos comentários. Isso não apenas torna os comentários mais interessantes, mas também cria um senso de envolvimento da comunidade.
Além disso, se seus leitores precisarem de ajuda, eles poderão inserir facilmente o código no comentário de uma forma visualmente atraente e fácil de entender para seus colegas comentaristas.
Com isso em mente, vamos ver como você pode adicionar realce de sintaxe no formulário de comentários do seu site WordPress.
Instalação do plug-in Syntax Highlighter Evolved
A maneira mais fácil de adicionar realce de sintaxe no WordPress é com o plug-in Syntax Highlighter Evolved. Ele é muito fácil de usar e permite que você ative o realce de sintaxe em posts, páginas e comentários do WordPress.
No WPBeginner, usamos esse plug-in para inserir e exibir trechos de código. Você pode ler nosso artigo sobre por que usamos o Syntax Highlighter Evolved para obter mais detalhes.
Primeiro, você precisa instalar e ativar o plug-in Syntax Highlighter Evolved. Para obter mais informações, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.
Feito isso, agora você pode editar um post ou uma página e adicionar código usando o marcador de sintaxe. Esta é a aparência no editor de blocos:
Você pode saber mais sobre como usar o plug-in Syntax Highlighter Evolved em nosso artigo sobre como exibir código no WordPress.
Como usar o destaque de sintaxe nos comentários do WordPress
Por padrão, o Syntax Highlighter Evolved permite que os visitantes adicionem código em seus comentários, mas esse código precisa ser agrupado em códigos de acesso.
Esses códigos de acesso têm o nome de todas as linguagens populares de programação e de script. Isso significa que o comentarista só precisa colocar seu código entre colchetes com o nome da linguagem.
Por exemplo, se você quisesse publicar um comentário contendo código PHP, usaria o seguinte:
Hi everyone. I need help with this PHP code: [php]
<?PHP
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
[/php]Da mesma forma, se você quisesse publicar algum código HTML como comentário, precisaria envolvê-lo no shortcode HTML:
Hey there! Could anyone check this code snippet? [html]<a href="https://example.com">Demo website>/a>[/html]Agora, o que torna isso complicado é que os usuários não sabem que podem realmente usar o realce de sintaxe com esses códigos de acesso. Portanto, você precisa informá-los por meio de uma mensagem de aviso.
Adição de aviso de destaque de sintaxe no formulário de comentários
Para informar os comentaristas sobre o recurso de realce de sintaxe, você precisa adicionar uma mensagem de aviso acima do formulário de comentários, como a seguir:
Você pode fazer isso adicionando um trecho de código personalizado ao seu site do WordPress.
Se você está lendo este tutorial porque tem um blog de codificação, é provável que esteja bastante familiarizado com a codificação.
Mesmo assim, pode ser difícil para os usuários mais avançados manter o controle de todos os trechos de código. Se não forem gerenciados adequadamente, podem ocorrer alguns erros comuns do WordPress ou o site pode ser completamente danificado.
É por isso que recomendamos o uso do WPCode para inserir trechos de código personalizados. É a maneira mais fácil e segura de adicionar código personalizado no WordPress sem precisar editar nenhum arquivo principal do WordPress.
Observação: embora a versão gratuita do WPCode esteja disponível, recomendamos o uso da versão Pro do WPCode, pois ela lhe dá acesso à lógica condicional inteligente, acesso a uma biblioteca em nuvem de trechos de código e muito mais.
A primeira coisa que você precisa fazer é instalar e ativar o plug-in WPCode. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.
Após a ativação, vá para Code Snippets “ Add Snippet.
Aqui, você verá todos os snippets prontos que podem ser adicionados ao seu site do WordPress.
Como queremos adicionar nosso próprio snippet, passe o mouse sobre “Add Your Custom Code” e clique em “Use snippet”.
Para começar, insira um título para o snippet de código personalizado. Pode ser qualquer coisa que ajude você a identificar o snippet.
Depois disso, abra a lista suspensa “Code Type” (Tipo de código) e escolha “PHP Snippet”.
Agora, basta colar o seguinte snippet no editor de código:
function wpbeginner_comment_text_before($arg) {
// Add a custom notice to inform users about using shortcodes for syntax highlighting
$arg['comment_notes_before'] .= "<p class='comment-notice'>You can use shortcodes for syntax highlighting when adding code. For example, or </p>";
// Return the modified comment arguments
return $arg;
}
// Add the filter to apply the custom comment modification function
add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');
Depois disso, abra o menu suspenso “Location” (Localização) e clique em “Run Everywhere” (Executar em todos os lugares).
Em seguida, você está pronto para rolar até a parte superior da tela e clicar no botão de alternância “Inactive” (Inativo) para que ele mude para “Active” (Ativo).
Por fim, clique em “Save Snippet” para ativar o snippet.
Esse código simplesmente mostra um aviso acima do campo de comentários no formulário de comentários do WordPress. No entanto, você não verá esse texto enquanto estiver conectado à sua conta, portanto, será necessário abrir uma nova janela do navegador no modo de navegação anônima ou fazer logout da sua conta.
Se quiser ver se o shortcode realmente funciona, basta acessar seu site no modo anônimo, comentar em uma publicação de blog e usar o shortcode. Quando o comentário tiver sido moderado e aprovado, você verá algo parecido com isto:
Esperamos que este artigo tenha ajudado você a adicionar realce de sintaxe nos comentários do WordPress. Talvez você também queira ver nosso guia sobre como adicionar JavaScript e estilos corretamente no WordPress e nossas escolhas de especialistas para os melhores editores de código para Mac e Windows.
Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
Thank you for demonstrating the possibility using a snippet. I already have quite a lot of plugins on the site that I need to run it and at the same time, since I have a technology blog, I wanted to allow users to highlight codes in comments. I use WP Code for other snippets that have an important role on the website, so the possibility to do this with a snippet is very useful. Thank you once again, I will save the snippet to my code library for other sites as well.
Yves says
Last update 9 months ago. Non tested with last WordPress version.
WPBeginner Support says
For that not tested warning, we would recommend taking a look at our article below:
https://www.wpbeginner.com/opinion/should-you-install-plugins-not-tested-with-your-wordpress-version/
Administrador
Seth says
Nice and very informative article. I just turned on update notifications. Good one guys.
WPBeginner Support says
Glad our article was helpful
Administrador