¿Desea agregar resaltado de sintaxis en los comentarios de WordPress? De forma predeterminada, WordPress no ofrece ningún resaltado de sintaxis para comentarios, publicaciones o páginas. Si tiene artículos de codificación o programación en su sitio web, a veces sus usuarios pueden querer dejar ejemplos de código en los comentarios. En este artículo, le mostraremos cómo agregar fácilmente resaltado de sintaxis en los comentarios de WordPress.

Por qué y cuándo necesita resaltar la sintaxis en los comentarios de WordPress

WordPress no le permite simplemente pegar fragmentos en sus publicaciones por razones de seguridad. Puede ver ejemplos de código agregando el bloque de código en su artículo o páginas usando el editor de bloques.

Después de eso, puede agregar su fragmento de código en el cuadro de texto del bloque de código.

Ahora puede guardar los cambios en su publicación o página y obtener una vista previa para ver su código en acción. Dependiendo de su tema de WordPress, generalmente se mostrará en un bloque de texto muy simple y sin ningún resaltado de sintaxis.

No se ve bien y no es muy útil para sus usuarios. El resaltado de sintaxis es un formato de estilo comúnmente utilizado para mostrar código. Agrega números de línea y colores para resaltar los patrones de código, lo que facilita su comprensión. Aquí hay un fragmento de código de muestra con resaltado de sintaxis. Tenga en cuenta los números de línea y los colores utilizados para resaltar diferentes elementos del código:

Bienvenido a mi página de inicio

Ahora, si está ejecutando un blog de programación o codificación de WordPress, necesita resaltado de sintaxis para mostrar correctamente el código en sus publicaciones. Es posible que también desee que sus usuarios puedan usar la misma sintaxis resaltada en los comentarios, lo que hará que los comentarios sean más interesantes y atractivos para los usuarios. Dicho esto, veamos cómo agregar resaltado de sintaxis en los comentarios, publicaciones y páginas de WordPress.

Agregar un resaltador de sintaxis en WordPress

La forma más fácil de agregar resaltado de sintaxis en WordPress es usar Syntax Highlighter Evolved. Es muy fácil de usar y le permite habilitar el resaltado de sintaxis en publicaciones, páginas y comentarios de WordPress. En primer lugar, debe instalar y activar el plugin Syntax Highlighter Evolved. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress. Tras la activación, debe editar la publicación o la página a la que desea agregar el código. En la pantalla de edición de publicaciones, haga clic en el icono (+) para agregar un nuevo bloque, luego inserte el bloque 'SyntaxHighlighter Code' en su área de contenido.

Ahora verá un nuevo bloque de código en el editor de publicaciones donde puede ingresar su código. Después de agregar el código, debe seleccionar los parámetros del bloque en la columna de la derecha.

Desde allí, puede seleccionar el lenguaje de programación de su código, mostrar u ocultar números de línea, hacer que se pueda hacer clic en los enlaces y más. Una vez que haya terminado, continúe y guarde su publicación o página. Ahora puede visitar su sitio web para ver su código con resaltado de sintaxis.

Fue fácil, ¿verdad? Sin embargo, los comentarios de WordPress no son compatibles con el editor de bloques. Veamos cómo sus usuarios pueden usar Syntax Highlighter Evolved con sus comentarios.

Se agregó resaltado de sintaxis en los comentarios de WordPress.

Syntax Highlighter Evolved está habilitado de forma predeterminada para los comentarios de WordPress. Sin embargo, para poder usarlo en comentarios, el código debe estar envuelto en códigos cortos. El plugin viene con varios códigos cortos que llevan el nombre de todos los lenguajes de programación y scripting populares. Simplemente envuelva su código entre corchetes con el nombre del idioma. Por ejemplo, si va a agregar código PHP, lo agregará así:
[php]función privada get_time_tags () {
$ tiempo = get_the_time ('d M, Y');
return $ time;
}
?>
[/php]

Del mismo modo, si desea agregar código HTML, lo envolverá alrededor del código corto HTML de esta manera:
[html]Sitio de demostración
[/html]

Se agregó un aviso de resaltado de sintaxis en forma de comentario

Si bien es fácil usar el resaltado de sintaxis con códigos cortos, el problema es que sus usuarios no sabrían que pueden hacerlo. Afortunadamente, existe una forma rápida de hacerles saber que pueden usar el resaltado de sintaxis con códigos cortos. Para eso, deberá agregar un fragmento de código personalizado a su sitio de WordPress. Si aún no lo ha hecho, consulte nuestra guía sobre cómo agregar código personalizado en WordPress. Deberá agregar el siguiente código en el plugin de fragmentos, el archivo functions.php o un plugin específico del sitio. function wpbeginner_comment_text_before ($ arg) {$ arg['comment_notes_before'] . = "

Puede utilizar códigos cortos para resaltar la sintaxis al agregar código. Por ejemplo, [php][/php] o [html][/html]

"; return $ arg;} add_filter ('comment_form_defaults', 'wpbeginner_comment_text_before'); Este código simplemente muestra una revisión justo antes del campo de comentarios en el formulario de comentarios de WordPress. Sin embargo, no muestra el aviso a los usuarios. Ahora puede abrir un nueva ventana del navegador en modo incógnito o simplemente cierre la sesión de su área de administración de WordPress. Después de eso, puede visitar cualquier publicación en su blog para ver lo más destacado de la sintaxis en acción.

También puede agregar CSS personalizado para diseñar este texto. Usamos el siguiente código CSS personalizado en nuestro sitio de demostración, siéntase libre de usarlo como punto de partida. p.comment-notice {tamaño de fuente: 14px; color: # 555; altura de la fila: 1,5; } Esperamos que este artículo le haya ayudado a agregar resaltado de sintaxis en los comentarios de WordPress. También puede consultar nuestra guía sobre cómo permitir que los usuarios carguen imágenes en los comentarios de WordPress y algunos consejos útiles para diseñar el formulario de comentarios de WordPress. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.