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 [ ] por ] < por < > por > " por " ' por '
En el ejemplo de JavaScript que comentaba antes en lugar de:
<script> código con la funcionalidad >/script>
usarías:<script> código con la funcionalidad <script>
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>.
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. 😉
