¿Quieres añadir resaltado de sintaxis en los comentarios de WordPress?
Por defecto, WordPress no viene con ningún resaltado de sintaxis para comentarios, entradas o páginas. Esto puede ser un gran problema si escribes artículos acerca de código o programación en tu sitio web WordPress.
En este artículo, le mostraremos cómo añadir fácilmente el resaltado de sintaxis en los comentarios de WordPress.
¿Por qué y cuándo es necesario resaltar la sintaxis en los comentarios de WordPress?
El resaltado de sintaxis es una forma de mejorar el aspecto del código y facilitar su comprensión. Añade colores y números de línea a los fragmentos de código, haciéndolos más legibles. He aquí un ejemplo:
<html>
<head>
<title>My Awesome Website</title>
</head>
<body>
<h1>Welcome to My Homepage</h1>
</body>
</html>
Si tienes un blog en WordPress acerca de desarrollo web o código, activar el resaltado de sintaxis en los comentarios de WordPress es importante. De este modo, los lectores podrán escribir código fácilmente y de forma legible.
Esto les animará a hablar de código y a compartir sus propios fragmentos en los comentarios. Esto no solo hace que los comentarios sean más interesantes, sino que también fomenta la participación de la comunidad.
Además, si sus lectores necesitan ayuda, pueden insertar fácilmente el código en el comentario de una forma visualmente atractiva y fácil de entender para sus compañeros de comentario.
Con esto en mente, veamos cómo añadir resaltado de sintaxis en el formulario de comentarios de tu sitio web WordPress.
Instalación del plugin Syntax Highlighter Evolved
La forma más fácil de añadir resaltado de sintaxis en WordPress es con el plugin Syntax Highlighter Evolved. Es muy fácil de usar y te permite activar el resaltado de sintaxis en entradas, páginas y comentarios de WordPress.
En WPBeginner, usamos este plugin para insertar y mostrar fragmentos de código. Puedes leer nuestro artículo sobre por qué usamos Syntax Highlighter Evolved para más detalles.
En primer lugar, debes instalar y activar el plugin Syntax Highlighter Evolved. Para más información, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez hecho esto, ahora puede editar una entrada o página y añadir código utilizando el resaltador de sintaxis. Esto es lo que parece en el editor de bloques:
Puede obtener más información acerca del uso del plugin Syntax Highlighter Evolved en nuestro artículo sobre cómo mostrar código en WordPress.
Cómo utilizar el resaltado de sintaxis en los comentarios de WordPress
Por defecto, Syntax Highlighter Evolved permite a los visitantes añadir código en sus comentarios, pero ese código tiene que estar envuelto en shortcodes.
Estos shortcodes llevan los nombres de los lenguajes de programación y scripting más populares. Esto significa que el autor del comentario sólo tiene que encerrar su código entre corchetes con el nombre del idioma.
Por ejemplo, si desea publicar un comentario que contenga código PHP, utilice lo siguiente:
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]Del mismo modo, si quisieras publicar un código HTML como comentario, tendrías que incluirlo en el shortcode HTML:
Hey there! Could anyone check this code snippet? [html]<a href="https://example.com">Demo website>/a>[/html]Ahora, lo que hace esto difícil es que los usuarios no saben que pueden utilizar el resaltado de sintaxis con estos shortcodes. Por lo tanto, usted tiene que hacerles saber a través de un mensaje de aviso.
Añadir aviso de resaltado de sintaxis en el formulario de comentarios
Para informar a los comentaristas acerca de la característica de resaltado de sintaxis, debe añadir un mensaje de aviso encima del formulario de comentarios, como el siguiente
Puede hacerlo añadiendo un fragmento de código personalizado a su sitio de WordPress.
Si estás leyendo este tutorial porque tienes un blog de codificación, entonces lo más probable es que te sientas bastante cómodo con el código.
Aún así, puede ser difícil para los usuarios más avanzados hacer un seguimiento de todos sus fragmentos de código. Si no se gestionan correctamente, puede experimentar algunos errores comunes de WordPress o romper su sitio por completo.
Por eso recomendamos usar WPCode para insertar fragmentos de código personalizados. Es la forma más fácil y segura de añadir código personalizado en WordPress sin tener que editar ningún archivo del núcleo de WordPress.
Nota: Aunque la versión gratuita de W PCode está disponible, le recomendamos que utilice la versión Pro de WPCode, ya que le da acceso a la lógica condicional inteligente, acceso a una biblioteca en la nube de fragmentos de código, y mucho más.
Lo primero que tienes que hacer es instalar y activar el plugin WPCode. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activado, diríjase a Fragmentos de código ” Añadir fragmento.
Aquí verá todos los fragmentos de código listos para añadir a su sitio web de WordPress.
Como queremos añadir nuestro propio fragmento de código, pase el cursor por encima de “Añadir su código personalizado” y haga clic en “Usar fragmento de código”.
Para empezar, introduzca un título para el fragmento de código personalizado. Puede ser cualquier cosa que le ayude a identificar el fragmento de código.
A continuación, abra el menú desplegable “Tipo de código” y seleccione “Fragmento de código PHP”.
Ahora, basta con pegar el siguiente fragmento de código en el 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');
A continuación, abre el menú desplegable “Ubicación” y haz clic en “Ejecutar en todas partes”.
A continuación, desplácese a la parte superior de la pantalla y haga clic en el conmutador “Inactivo” para que cambie a “Activo”.
Por último, haga clic en “Guardar fragmento de código” para que el fragmento pase a la acción.
Este código simplemente muestra un aviso encima del campo de comentario en el formulario de comentarios de WordPress. Sin embargo, no verá este texto mientras esté conectado a su cuenta, por lo que tendrá que abrir una nueva ventana del navegador en modo incógnito o salir de su cuenta.
Si quieres comprobar si el shortcode funciona, visita tu sitio web en modo incógnito, comenta una entrada del blog y utiliza el shortcode. Cuando el comentario haya sido moderado y aprobado, deberías ver algo como esto:
Esperamos que este artículo te haya ayudado a añadir resaltado de sintaxis en los comentarios de WordPress. También puedes consultar nuestra guía sobre cómo añadir correctamente JavaScript y estilos en WordPress y nuestra selección de los mejores editores de código para Mac y Windows.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and 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