• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Cómo mostrar código en una web sin que se ejecute

Aprende en este tutorial a mostrar snippets de código en la web sin que se ejecuten.

Si tienes una web donde te gusta compartir (o guardar) snippets de código, seguramente te habrás dado cuenta de que la parte frontal muestra el resultado de código en lugar de mostrar los caracteres y letras del código.

El ejemplo más claro es el de un shortcode:

Si has creado un shortcode para mostrar las últimas entradas y escribes [ultimos_posts]en el editor de WordPress, en la parte frontal de la web vas a ver el resultado renderizado con las últimas entradas. De hecho, ese es el comportamiento que se espera.

Otro ejemplo puede ser el de un snippet de JavaScript del cual quieres mostrar el código (<script> código con la funcionalidad </script>) pero no te interesa que se ejecute el código.

Entonces, ¿cómo puedes mostrar en un tutorial el «código» en lugar de su resultado?

Vamos a ver cómo puedes conseguirlo.

Escapar caracteres especiales en código

Para evitar que se ejecute el código tienes que convertir los caracteres (por ejemplo, [, ], < o >) en entidades HTML. Estas son las sustituciones más habituales:

[ por &#91;
] por &#93;
< por &lt;
> por &gt;
" por &quot;
' por &#39;

En el ejemplo de JavaScript que comentaba antes en lugar de:

<script> código con la funcionalidad >/script>
usarías:
&lt;script&gt; código con la funcionalidad &lt;script&gt;

En este recurso puedes ver un listado de entidades HTML y herramientas que te ayudan a escapar el código. También puedes utilizar este.

Evitar que se rendericen los shortcodes

En el caso de los shortcodes tienes una opción aún más sencilla que la de escapar los caracteres y es utilizar un doble corchete.

En el ejemplo de antes tendrías que escribir [[ultimos_posts]] en el backend para que en la parte frontal se vea [ultimos_posts].

Otras recomendaciones

Si estás usando el editor de bloques para mostrar el código, te recomiendo que uses el bloque de código o la opción de aplicar formato de código integrado inline. Ambos utilizan la etiqueta <code>.

Opción de añadir formato de código inline desde el editor de bloques

También te puede servir de ayuda el bloque de preformateado que añade la etiqueta <pre>.

Obviamente todo este marcado HTML lo puedes modificar yendo a la opción de «Editar como HTML» en cualquier bloque (desde los tres puntos de arriba a la izquierda).

Conclusiones

Ahora ya sabes cómo puedes conseguir que un snippet de código o shortcode, se muestre en la parte frontal de una web, en lugar de ejecutarse.

Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.

Todo ventajas de ser suscriptor. 😉

HTML Javascript PHP WordPress

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes identificarte o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?