Cómo agregar resaltado de sintaxis en los comentarios de WordPress

¿Quiere agregar resaltado de sintaxis en los comentarios de WordPress? De forma predeterminada, WordPress no viene con resaltado de sintaxis para comentarios, publicaciones o páginas.

Si tiene artículos sobre 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 es necesario resaltar la sintaxis en los comentarios de WordPress

WordPress no le permite pegar solo fragmentos de código dentro de sus publicaciones por razones de seguridad.

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

[enlazatom_show_links]

Después de eso, puede agregar su fragmento de código dentro del área 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 aparecerá en un bloque de texto muy simple y sin ningún resaltado de sintaxis.

Esto 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 que lo hacen fácil de entender.

A continuación se muestra un ejemplo de un fragmento de código con un resaltado de sintaxis. Tenga en cuenta los números de línea y los colores utilizados para resaltar 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, debe resaltar la sintaxis para mostrar correctamente el código dentro de sus publicaciones.

También puede querer que sus usuarios puedan utilizar la misma sintaxis resaltada en los comentarios, lo que hará que los comentarios sean más interesantes y atractivos para los usuarios.

Dicho esto, echemos un vistazo a cómo agregar resaltado de sintaxis en 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 el Resaltador de sintaxis avanzada. Es muy fácil de usar y le permite habilitar el resaltado de sintaxis en publicaciones, páginas y comentarios de WordPress.

Primero, necesitas instalar y activar el archivo. Resaltador de sintaxis avanzada conectar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de la activación, debe editar el mensaje o la página donde desea agregar el código. En la pantalla de edición de publicaciones, haga clic en el icono (+) para agregar un nuevo bloque, luego ingrese el bloque «SyntaxHighlighter Code» en el á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 la configuración del bloque en la columna de la derecha.

Desde aquí, puede seleccionar el lenguaje de programación para 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, ¿no?

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.

El resaltador de sintaxis evolucionada está habilitado para los comentarios de WordPress de forma predeterminada. Sin embargo, para usarlo en comentarios, el código debe estar envuelto alrededor de los 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.

Basta con encerrar el código entre corchetes con el nombre del idioma. Por ejemplo, si va a agregar código PHP, lo agregará así:

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

De manera similar, si desea agregar código HTML, lo envolverá alrededor del código corto HTML de la siguiente manera:

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

[/html]

Se agregó una advertencia de resaltado de sintaxis en forma de comentario

Si bien es fácil de usar el resaltado de sintaxis con códigos cortos, el problema es que sus usuarios no sabrían que podrían hacerlo.

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

Para ello, deberá agregar un fragmento de código personalizado a su sitio de WordPress. Si nunca ha hecho esto antes, consulte nuestra guía sobre cómo agregar código personalizado en WordPress.

Deberá agregar el siguiente código en el plugin de fragmentos de código, el archivo functions.php o el plugin específico del sitio.

function trucoswp_comment_text_before($arg) {

$arg['comment_notes_before'] .= "<p class="comment-notice">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', 'trucoswp_comment_text_before');

Este código simplemente muestra una advertencia justo antes del campo de comentarios en el formulario de comentarios de WordPress. Sin embargo, no muestra la advertencia para los usuarios registrados.

Ahora puede abrir una nueva ventana del navegador en modo incógnito o simplemente cerrar sesión en su área de administración de WordPress. Después de eso, puede visitar cualquier publicación de su blog para ver la sintaxis que resalta la advertencia 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, no dude en 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 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 su formulario de comentarios de WordPress.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *