Post Top Ad

Your Ad Spot

sábado, 25 de julio de 2020

Cómo agregar resaltado de sintaxis en comentarios de WordPress

¿Desea agregar resaltado de sintaxis en los comentarios de WordPress? Por defecto, WordPress no viene con ningún 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.
Agregar 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 pegar fragmentos de código dentro de sus artículos por razones de seguridad.
Puede mostrar algunos ejemplos de código agregando el bloque de código en su publicación o páginas utilizando el editor de bloques .
Agregar bloque de código
Después de eso, puede agregar su fragmento de código dentro del área de texto del bloque de código.
Agregar código en el bloque de código de WordPress
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 resaltar la sintaxis.
Un simple bloque de código predeterminado
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 patrones de código, lo que facilita su comprensión.
Aquí hay un ejemplo de un fragmento de código con algo de resaltado de sintaxis. Observe los números de línea y los colores utilizados para resaltar diferentes elementos en el código:
1
2
3
4 4
5 5
6 6
7 7
8
<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 correctamente el código dentro de sus artículos.
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.
Dicho esto, echemos un vistazo a cómo agregar resaltado de sintaxis en 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 utilizando el resaltador de sintaxis evolucionado . Es súper 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 un complemento de WordPress .
Tras la activación, 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 y luego inserte el bloque 'SyntaxHighlighter Code' en su área de contenido.
Agregar bloque de código de resaltador 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 de bloque de la columna derecha.
Configuración de bloque de sintaxis
Desde aquí, puede seleccionar el lenguaje de programación para su código, mostrar u ocultar números de línea, hacer clic en 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.
Marcador de sintaxis habilitado en la publicación
Eso fue fácil, ¿no?
Sin embargo, los comentarios de WordPress no tienen soporte de editor de bloque. Veamos cómo sus usuarios pueden usar Syntax Highlighter Evolved con sus comentarios.

Agregar resaltado de sintaxis en los comentarios de WordPress

Syntax Highlighter Evolved está habilitado para los comentarios de WordPress de forma predeterminada. Sin embargo, para usarlo en los comentarios, el código debe estar envuelto en códigos cortos .
El complemento 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]
<?php
private function get_time_tags() {
$time = get_the_time('d M, Y');
return $time;
}
?>
[/php]
Del mismo modo, si desea agregar un código HTML, lo envolverá alrededor del código corto HTML de esta manera:
[html]
<a href="https://example.com">Demo website</a>
[/html]

Agregar aviso de resaltado de sintaxis en el formulario de comentarios

Si bien es fácil usar el resaltado de sintaxis con códigos cortos, el problema es que los usuarios no sabrán que pueden hacerlo.
Afortunadamente, hay 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 no ha hecho esto antes, eche un vistazo a nuestra guía sobre cómo agregar código personalizado en WordPress .
Deberá agregar el siguiente código en el complemento de fragmentos de código, el archivo functions.php o un complemento específico del sitio .
1
2
3
4 4
5 5
6 6
7 7
8
9
function wpbeginner_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', 'wpbeginner_comment_text_before');
Este código simplemente muestra un aviso justo antes del campo de comentarios en el formulario de comentarios de WordPress. Sin embargo, no muestra el aviso 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 en su blog para ver el aviso de resaltado de sintaxis en acción.
Agregar aviso de resaltador de sintaxis antes del campo de comentario
También puede agregar CSS personalizado para darle estilo a este texto. Hemos utilizado el siguiente código CSS personalizado en nuestro sitio de demostración, no dude en utilizarlo como punto de partida.
1
2
3
4 4
5 5
p.comment-notice {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}
Esperamos que este artículo te 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 te gustó este artículo, suscríbete a nuestro canal de YouTube para ver videos tutoriales de WordPress. También nos puede encontrar en Twitter y Facebook .

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas