¿Le gustaría agregar resaltado de sintaxis a sus comentarios de WordPress? De forma predeterminada, WordPress no proporciona ningún resaltado de sintaxis para comentarios, publicaciones o páginas.

Si su sitio tiene artículos sobre codificación o programación, 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.

Agregar resaltado de sintaxis en los comentarios de WordPress

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

Por razones de seguridad, WordPress no le permite pegar fragmentos de código en las publicaciones.

Puede mostrar algunos ejemplos de código agregando bloques de código a su publicación o página usando el editor de bloques.

añadir bloque de código

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

Agregar código en bloques de código de WordPress

Ahora puede guardar los cambios en una publicación o página y obtener una vista previa para ver su código.

Dependiendo de su tema de WordPress, generalmente aparecerá en un bloque de texto muy simple sin ningún resaltado de sintaxis.

Un bloque de código predeterminado simple

Esto no se ve bien y no es muy útil para sus usuarios.

El resaltado de sintaxis es un formato de estilo que se usa a menudo para mostrar código. Agrega números de línea y colores para resaltar patrones de código, lo que facilita su comprensión.

Aquí hay un fragmento de código de ejemplo con algunos resaltados de sintaxis. Tenga en cuenta los números de línea y los colores utilizados para resaltar los diferentes elementos en el código:

<html>
	<head>
		<title>My Awesome Website</title>
	</head>
	<body>
		<h1>Welcome to My Homepage</h1>
	</body>
</html>

Ahora, si ejecuta un blog de WordPress sobre codificación o programación, entonces necesita resaltar la sintaxis para mostrar el código en la publicación correctamente.

También es posible que desee que sus usuarios puedan usar el mismo resaltado de sintaxis en los comentarios, lo que hará que los comentarios sean más interesantes y atractivos para los usuarios.

Habiendo dicho eso, veamos cómo agregar resaltado de sintaxis a los comentarios, publicaciones y páginas de WordPress.

Agregar 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.

Primero, debe instalar y activar el complemento Syntax Highlighter Evolved. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.

Una vez activado, debe editar la publicación o la página donde desea agregar el código. En la pantalla de edición de publicaciones, haga clic en el ícono (+) para agregar un nuevo bloque, luego inserte el bloque “SyntaxHighlighter Code” en su área de contenido.

Agregar bloques de código de resaltado de sintaxis en WordPress

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 la configuración del bloque en la columna de la derecha.

Configuración del bloque SyntaxHighlighter

Desde aquí, puede elegir el lenguaje de programación del código, mostrar u ocultar números de línea, hacer clic en los enlaces y más.

Cuando haya terminado, continúe y guarde su publicación o página. Ahora puede visitar su sitio web para ver el código con resaltado de sintaxis.

Resaltador de sintaxis habilitado en publicaciones

Eso es fácil, ¿no?

Sin embargo, los comentarios de WordPress no tienen soporte para el editor de bloques. Veamos cómo sus usuarios usan Syntax Highlighter Evolved en sus reseñas.

Agregar resaltado de sintaxis en los comentarios de WordPress

Syntax Highlighter Evolved está habilitado de forma predeterminada para los comentarios de WordPress. Sin embargo, para usarlo en un comentario, el código debe estar envuelto en un código abreviado.

El complemento viene con varios códigos cortos que llevan el nombre de todos los lenguajes de programación y secuencias de comandos populares.

Simplemente incluya su código entre corchetes con el nombre del idioma. Por ejemplo, si estuviera agregando código PHP, lo agregaría así:

[php]
<?php
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
[/php]

Del mismo modo, si desea agregar código HTML, envuélvalo en un código abreviado HTML como este:

[html]
<a href="https://example.com">Demo website</a>

[/html]

Agregue notificaciones de resaltado de sintaxis al formulario de comentarios

Si bien el resaltado de sintaxis con códigos abreviados es fácil, el problema es que los usuarios no saben que pueden hacerlo.

Afortunadamente, hay una forma rápida de hacerles saber que pueden usar el resaltado de sintaxis con códigos abreviados.

Para hacer esto, debe agregar fragmentos de código personalizados a su sitio de WordPress. Si no lo ha hecho antes, consulte nuestra guía sobre cómo agregar código personalizado en WordPress.

Debe agregar el siguiente código en su complemento de fragmento de código, archivo functions.php o complemento específico del sitio.

function wpbeginner_comment_text_before($arg) {

$arg['comment_notes_before'] .= "<p >You can use shortcodes for syntax highlighting when adding code. For example, [php][/php] or [html][/html]</p>";

return $arg;

}

add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');

Este código solo muestra una notificación antes del campo de comentarios en el formulario de comentarios de WordPress. Sin embargo, no muestra una notificación para los usuarios registrados.

Ahora puede abrir una nueva ventana del navegador en modo de incógnito, o simplemente cerrar sesión en su área de administración de WordPress. Después de eso, puede visitar cualquier publicación en su blog para ver las notificaciones de resaltado de sintaxis en acción.

Agregar resaltado de sintaxis antes de los campos de comentarios

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 {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

Esperamos que este artículo le haya ayudado a agregar resaltado de sintaxis a sus 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, así como algunos consejos útiles para diseñar su formulario de comentarios de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.