Aprender a mostrar código en WordPress es crucial para blogueros y creadores de contenidos que publican código online constantemente para que lo utilicen sus lectores. El código informático, por diseño, muestra algo nuevo en el frontend de un sitio web en lugar de las etiquetas, barras y corchetes que se encuentran dentro de los fragmentos de código reales.

Esto, sin embargo, plantea un problema para quienes escriben sobre desarrollo y diseño, ya que necesitas una forma de mostrar adecuadamente el código sin que haga su verdadero trabajo, como crear un botón o añadir estilo a un bloque de párrafo.

En pocas palabras, si escribes una entrada de blog y pones un ejemplo de fragmento de código, deberás evitar que el código funcione realmente. De esta forma, los lectores pueden ver el código en su forma original, verlo en un bloque bien formateado e incluso copiar su contenido para utilizarlo en su trabajo de desarrollo.

En esta guía, te mostraremos exactamente cómo mostrar código en WordPress (independientemente de tu tema de WordPress) utilizando varios métodos diferentes, y te ayudaremos a decidir qué método funciona mejor para tu flujo de trabajo.

¿Qué Ocurre Cuando Añades Código Normal en WordPress?

Puede que te preguntes qué pasaría si escribieras algo de código en el editor visual de WordPress. Después de todo, no utilizas los editores de texto o código, así que ¿no debería funcionar bien tu fragmento de código?

Probablemente no.

Éstos son algunos de los resultados inusuales que pueden producirse:

  • El código aparece parcialmente, con trozos de código que aparecen en el frontend de la entrada y otros que desaparecen. Esto parece poco profesional para los visitantes; significa que tu código no es preciso.
  • No aparece nada en absoluto, el código desaparece completamente de la vista en el backend y no se muestra nada en el frontend de tu entrada.
  • Se ve un formato extraño — a menudo algo que no es fácil de usar ni apto para ser publicado.
  • Puede que el código sólo se muestre parcialmente

Para ilustrar un par de estos resultados, vamos a utilizar el siguiente fragmento de código HTML:

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: green;
color: white;
border: 4px solid black;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="cities">
<h2>Chicago</h2>
<p>A nickname for Chicago is The City of Broad Shoulders.</p>
</div>
<div class="cities">
<h2>Los Angeles</h2>
<p>A nickname for Los Angeles is The City of Angels.</p>
</div>
<div class="cities">
<h2>New York</h2>
<p>A nickname for New York is The Big Apple.</p>
</div>
</body>
</html>

Este fragmento de código concreto utiliza elementos de estilo HTML para producir tres bloques de contenido verdes con encabezados y párrafos.

Haz clic para Escribir Código y mostrar el código de WordPress
Haz clic para escribir el código

Sin embargo, nos gustaría mostrar el código sin procesar en una entrada de blog, no que se renderizara realmente en esos bloques.

Estos son los resultados si pegamos el código directamente en el Editor de Bloques Gutenberg de WordPress:

Resultados de Gutenberg para mostrar el código de WordPress
Resultados del Editor Gutenberg a partir del código HTML

Como puedes ver, WordPress intenta utilizar el código para su propósito principal: generar contenido — sin embargo, despoja al código de su estilo, por lo que no proporciona el resultado que queríamos mostrar a los lectores.

Para evitar situaciones como ésta, te recomendamos que utilices uno de los métodos que se indican a continuación para mostrar el código.

Cómo Mostrar Código en Tu Sitio WordPress (6 Métodos)

Estos métodos se enumeran de más fácil a más difícil, y tenemos algunos métodos especiales para aquellos que disfrutan escribiendo código y contenido en editores markdown y no en WordPress).

Método 1: Usar el Editor de Bloques de Gutenberg (Predeterminado)

Para practicar la visualización de código en WordPress, puedes utilizar el siguiente fragmento de código, que utiliza HTML y CSS interno para producir un resultado sencillo con un encabezado azul y un párrafo negro:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: beige;}
h1 {color: blue;}
p {color: black;}
</style>
</head>
<body>
<h1>Fun Facts About Otters</h1>
<p>A group of otters in water is called a "raft," since they all link arms to prevent from floating away.</p>
</body>
</html>

Cuando se pone en acción, el código muestra esto en el frontend:

Código HTML con datos curiosos sobre las nutrias
Los resultados muestran un título y un cuerpo de texto con estilo

Pero si sigues este tutorial, aprenderás a mostrar el código en bruto, no lo que se supone que debe mostrar el código en el frontend.

Paso 1: Añadir un Bloque de Código en WordPress

El editor Gutenberg de WordPress ya tiene incorporado un bloque de Código, que te permite mostrar fragmentos de código sin perder nada de su formato ni activar realmente el código.

Para empezar, abre una entrada o página en WordPress y haz clic en uno de los botones Añadir bloque.

Botones Añadir bloque
Botones Añadir bloque

Haz clic en uno de los botones Añadir Bloque

Esto muestra la colección de bloques disponibles. Puedes buscar el bloque Código o escribir una palabra clave como «código» en la barra de búsqueda.

Cuando veas el bloque Código (con iconos de corchetes), haz clic en él para insertar un trozo de código en la entrada.

Ventana emergente para añadir un bloque, con la opción Bloque de código
Ventana emergente para añadir un bloque, con la opción Bloque de código

Ahora deberías ver un campo con la indicación «Escribir código…».

Haz clic para Escribir Código

El editor Gutenberg de WordPress es compatible con markdown, por lo que también puedes encontrar e insertar el bloque Código escribiendo una barra inclinada (/) en el editor y, a continuación, empezar a escribir «C» o «Código». WordPress mostrará entonces todos los bloques relevantes, ofreciéndote una forma más rápida de insertarlos.

Es fácil confundir el bloque Código y el bloque HTML personalizado. Sin embargo, el bloque HTML personalizado sirve para añadir HTML personalizado que se mostrará en el frontend, no para añadir código sin procesar para su visualización.

Utilizar markdown para llamar al bloque Código
Utilizar markdown para llamar al bloque Código

Paso 2: Pega el Código de Visualización en el Campo Bloque de Código

Ahora es el momento de copiar el código que te gustaría mostrar y pegarlo en la casilla que dice «Escribe el código…».

Escribe o Pega en Código a Mostrar
Escribe o Pega en Código a Mostrar

Tu código aparece ahora dentro de la casilla.

Lo bueno del bloque Código es que respeta todos los espacios y tabulaciones que ya tenías dentro del fragmento de código. Como resultado, no debería parecer diferente de la fuente de la que lo copiaste.

Fragmento pegado en el Bloque de Código para mostrar el código en WordPress
Fragmento de código pegado en el bloque Código

Paso 3: Publicar y Ver los Resultados

Para mostrar tu código en tu entrada o página de WordPress, finaliza el proceso haciendo clic en el botón Publicar.

También puedes hacerte una idea de cómo queda antes de publicarlo seleccionando Vista Previa.

Haz clic en Publicar para mostrar el código en WordPress
Haz clic en Publicar

Una vez que hayas pulsado el botón Publicar, visita la versión en producción de ese post para confirmar que tu trozo de código se muestra como código sin procesar.

Como puedes ver, el bloque Código es bastante sencillo, pero proporciona la funcionalidad necesaria para mantener el formato al publicar código en las entradas del blog.

Echa un vistazo a la siguiente captura de pantalla. En nuestro ejemplo, no ha cambiado nada del fragmento de código original; simplemente se ha presentado en el frontend en un recuadro gris.

Visualización del Código en el Frontend de WordPress
Código mostrado en el frontend

Paso 4: Considera la Posibilidad de dar Formato al Bloque de Código

Para que el bloque Código destaque un poco, piensa en cambiar su aspecto respecto al predeterminado.

Para mostrar las opciones de estilo del bloque, selecciona el bloque Código y, a continuación, elige el botón Configuración (icono de engranaje). Esto abre la pestaña Bloque, que sólo muestra los ajustes de Bloque para tu bloque seleccionado — en este caso, el bloque Código.

Ir a Ajustes de Bloque para Formato de Código y para mostrar el código de WordPress
Ir a Ajustes de bloque para el formato de código

Puedes estilizar el bloque Código como quieras, con opciones para cambiar cosas como el texto y los colores de fondo.

Editar Ajustes de Color y Fondo
Editar Ajustes de Color y Fondo

También puedes

  • Cambiar el tamaño del texto
  • Añadir relleno y márgenes a la caja de código
  • Incluir un borde con una anchura y color personalizados
Ajustes de tamaño, dimensiones y borde
Ajustes de tamaño, dimensiones y borde

Como siempre, haz clic en el botón Publicar cuando hayas terminado de editar el bloque y, a continuación, visualiza los resultados en el frontend de tu entrada de WordPress.

Resultados del frontend para mostrar el código en WordPress
Resultados del frontend

Método 2: Utilizar un Plugin

Otra forma de mostrar código en WordPress es instalando un plugin.

Este método puede parecer un poco redundante teniendo en cuenta que WordPress ya tiene un bloque de Código incorporado, pero algunos plugins ofrecen funciones adicionales y herramientas de formato que hacen que merezca la pena trabajar con un plugin. En resumen, puedes hacer que tus bloques de código sean más bonitos de que lo que conseguirías con el bloque de Código estándar de Gutenberg.

Además, algunos usuarios del Editor clásico de WordPress pueden encontrar más fácil trabajar con un plugin, ya que es un poco más complicado mostrar código en el Editor clásico.

Para empezar, debes elegir un plugin «resaltador de sintaxis», que es una forma elegante de decir que el plugin resaltará tu código fuente y mantendrá su formato intacto.

Estos son algunos plugins de confianza para mostrar código en WordPress:

En este tutorial utilizaremos el plugin Enlighter, ya que ofrece opciones para etiquetar los tipos de código que se muestran en los cuadros de código, además de muchas otras funciones de estilo. Sin embargo, puedes probar los demás, ya que todos hacen prácticamente lo mismo.

Paso 1: Instala un Plugin Resaltador de Sintaxis

Instala el plugin Enlighter – Resaltador de Sintaxis Personalizable en tu sitio de WordPress utilizando el método de instalación de plugins que prefieras.

Tras la activación, el plugin estará listo para insertar código en cualquier entrada/página con un bloque Gutenberg o un botón Insertar del Editor Clásico.

El plugin Enlighter para mostrar el código en WordPress
El plugin Enlighter

Paso 2: Insertar el Bloque Enlighter Sourcecode en una Entrada

Si utilizas el Editor de Bloques Gutenberg de WordPress, abre una entrada en la que quieras mostrar código. Haz clic en uno de los botones Añadir Bloque (icono +) para mostrar la colección de bloques disponibles.

Busca o escribe una palabra clave para el bloque Enlighten Sourcecode. Haz clic en ese bloque para insertarlo en la entrada.

Bloque Enlighter Sourcecode para mostrar el código en WordPress
Bloque de código fuente de Enlighten

Paso 3: Pegar Código en el Bloque Resaltador de Sintaxis

El bloque Enlighter Highlighter aparecerá entonces en el Editor de bloques, con un título para «Generic Highlighting» (Resaltador Genérico) y un campo para «Insert Sourcecode…» (Insertar código fuente…)

Toma el código que quieras mostrar en WordPress y pégalo/escríbelo en el campo  “Insert Sourcecode…

Utiliza el Campo "Insert Sourcecode"
Utiliza el Campo «Insert Sourcecode»

Como resaltador de sintaxis, el plugin conserva todas las opciones de formato y tabulaciones. Cuando estés satisfecho con el resultado, haz clic en el botón Publicar.

Haz clic en Publicar para mostrar el código en WordPress
Haz clic en Publicar

Paso 4: Vista Previa del Código en el Frontend

Con esto, puedes ver el frontend de tu entrada para ver lo que ven los visitantes del sitio.

El plugin Enlighter ofrece un tema minimalista por defecto para la visualización del código, con números de línea que ayudan a organizarlo y referenciarlo.

Visualización del código del frontend de WordPress
Visualización en el frontend

Como hemos mencionado, utilizar un plugin para mostrar código en WordPress tiene sus ventajas sobre los otros métodos. Por ejemplo, la versión frontend del plugin de sintaxis Enlighter resalta las líneas a medida que el usuario se desplaza por tu código.

Líneas de código resaltadas
Líneas de código resaltadas

También hay varios botones en la esquina superior derecha del cuadro de código, incluido uno que presenta el código en texto plano, sin los números de línea.

Botón Texto sin formato
Botón Texto sin formato

El segundo botón se llama Copiar al Portapapeles, que copia instantáneamente todo lo que hay dentro del cuadro de código al portapapeles del usuario, que puede cogerlo y pegarlo en cualquier programa que desee.

Botón Copiar al Portapapeles
Botón Copiar al Portapapeles

Por último, el tercer botón abre el código en una nueva ventana, presentándolo en una versión de texto plano de la ventana de tu navegador.

Abrir Código en una Ventana Nueva
Abrir Código en una Ventana Nueva

Paso 5: Configura el Lenguaje y la Línea del Cuadro de Código

El plugin Enlighter viene con varios temas y potentes herramientas de personalización para que el cuadro de código tenga el aspecto que tú quieras. Si prefieres no utilizar el tema predeterminado, vuelve a tu entrada dentro de WordPress y haz clic en el bloque Enlighter Sourcecode abierto en ese momento.

Esto muestra la barra lateral del Bloque en WordPress. Si no aparece, asegúrate de hacer clic en el botón Configuración (icono de engranaje) en la esquina superior derecha de la ventana de WordPress.

El primer ajuste a personalizar es el campo Lenguaje — esto indica al plugin en qué lenguaje se muestra el código para que pueda ofrecer el formato y resaltado adecuados.

Campo Lenguaje
Campo Lenguaje

Hay bastantes lenguajes de programación entre los que elegir, así que desplázate por la lista y elige el más apropiado.

Elegir el lenguaje
Elegir el lenguaje

El campo Speciallines resalta las líneas que especifiques. Para ello, escribe los números de línea separados por comas.

Special lines
Special lines

Como resultado, los visitantes del sitio verán resaltadas todas las líneas que hayas especificado.

Líneas resaltadas en el frontend
Líneas resaltadas en el frontend

El campo Lineoffset es una forma de iniciar tu fragmento de código en una línea numerada específica, lo que resulta beneficioso si sólo estás mostrando un subconjunto de código que forma parte de una colección mayor de líneas.

Campo Lineoffset
Campo Lineoffset

Como puedes ver, si escribes 10 en el campo Lineoffset toda la caja de código empezará en el número 10.

Iniciar el documento en una línea específica
Iniciar el documento en una línea específica

Paso 6: Elige un Tema

El tema Enlighter es el tema por defecto de este plugin. Sin embargo, el campo Theme (que sigue debajo del panel de configuración del Bloque) presenta una amplia gama de temas integrados para elegir.

Opciones de tema
Opciones de tema

Por ejemplo, el tema Godzilla muestra el código como si estuviera encima de un papel cuadriculado o de dibujo.

El tema Godzilla
El tema Godzilla

Y el tema Atomic cambia el fondo a un tema oscuro mientras ofrece principalmente texto blanco y color rosa para las etiquetas de código.

Tema Atomic
Tema Atomic

Otro ejemplo es el tema Classic, que es una versión menos minimalista del tema Enlighter, con colores más vivos y líneas más definidas.

Tema Classic
Tema Classic

Paso 7: Considera la Posibilidad de Crear un Tema Personalizado

El plugin Enlighter proporciona una pestaña dentro del panel de control de WordPress para personalizar todos los aspectos del plugin y sus funciones destacadas.

Para tener un control total sobre el diseño y la visualización de tus cuadros de código, ve a la pestaña Enlighter (icono <>) y, a continuación, elige Appearance o Theme Customizer.

Personalizador de temas
Personalizador de temas

La pestaña Appearance te permite elegir un tema estándar a la vez que te da acceso a ajustar elementos como:

  • Sangría del código
  • Desbordamiento de texto
  • Numeración de líneas
  • Efecto de salto de línea
  • Código RAW al hacer doble clic
Sección Apariencia del personalizador de temas
Sección Apariencia del personalizador de temas

La sección Theme Customizer incluye una larga lista de pestañas para crear un tema de resaltador de código desde cero, con opciones para ajustar botones, expresiones, idiomas y mucho más.

Ajustes adicionales
Ajustes adicionales

Bonus: Usar Enlighter con el Editor Clásico

El plugin Enlighter funciona de forma ligeramente diferente para los que aún utilizan el Editor Clásico de WordPress.

Una vez que hayas instalado el plugin Enlighter, ve a cualquier entrada o página y busca el botón Insertar código Enlighter en el panel de control del editor.

Enlighter Code Insert
Enlighter Code Insert

Aparecerá una nueva ventana llamada Enlighter Code Insert.

Pega el código que quieras mostrar en el campo grande (sin etiquetar) de la parte inferior.

Pega el código
Pega el código

Haz clic en el menú desplegable del campo Lenguaje para seleccionar el lenguaje de programación adecuado.

Elige un lenguaje
Elige un lenguaje

Cuando hayas terminado, haz clic en el botón OK. También puedes hacer ajustes en las otras características de esa ventana, como añadir sangría de línea.

Ejemplo de sangría de línea
Ejemplo de sangría de línea

Haz clic en el botón Publish para la entrada y, a continuación, visualiza los resultados en el frontend. El cuadro de código por defecto del Editor clásico es un tema oscuro, pero puedes cambiar el aspecto de tu cuadro de código e incluso crear tus propios temas.

Versión publicada
Versión publicada

Método 3: Utilizar una Herramienta de Codificación

Las herramientas de codificación sirven como opciones alternativas cuando intentas mostrar código en WordPress, especialmente si no tienes intención de hacerlo tan a menudo (y prefieres no complicarte con un plugin).

Los codificadores HTML preservan la integridad de los formatos de código, en particular los que contienen caracteres especiales y tabulaciones. Los codificadores pueden manejar todo tipo de código, pero luego traducen el código insertado en código listo para HTML que es fácil de pegar en WordPress.

No existen herramientas codificadoras fiables como plugins, pero muchas se ofrecen como aplicaciones web gratuitas de terceros. Ten en cuenta también que las herramientas de codificación no ofrecen ninguna herramienta de estilo, por lo que sólo recibirás el código tal y como se supone que debe mostrarse (sin recuadros extravagantes ni funciones de personalización de líneas).

Algunas herramientas de codificación fiables son:

Según nuestras pruebas, la herramienta de codificación más eficaz es el Codificador HTML W3Docs, así que lo utilizaremos para este tutorial.

Paso 1: Abrir el Codificador y Elegir la Configuración

Ve al sitio web de W3Docs HTML Encoder.

La página muestra dos recuadros uno al lado del otro. El de la izquierda es donde debes pegar tu código. El de la derecha muestra la versión codificada para copiar y pegar en WordPress.

Sin embargo, primero debes establecer qué tipo de código quieres conservar:

  • Elige JavaScript unicode si pegas código con elementos JavaScript.
  • Elige HTML symbols si utilizas HTML.
Elige HTML symbols
Elige HTML symbols

Paso 2: Pega y Haz clic para Codificar

Pega el código que quieras mostrar en WordPress en el campo de la izquierda. Luego busca y haz clic en el botón Encode arriba a la derecha.

Haz clic para codificar
Haz clic para codificar

Paso 3: Copia el Resultado Descodificado

El producto final puede parecer confuso, pero en realidad es una combinación de elementos HTML para conservar todos los aspectos del código que has insertado, todo ello sin hacer que el código se active y muestre otra cosa en el frontend.

Haz clic en el botón Copy.

Copia el código
Copia el código

Paso 4: Pega el HTML Codificado en el Editor de Código o de Texto de WordPress

Vuelve a WordPress y abre la entrada o página deseada.

Selecciona el elemento de menú Options (tres puntos verticales) en la esquina superior derecha. Haz clic en la opción Code Editor.

Ve al menú Options
Ve al menú Options

Ahora verás el Code Editor en lugar del Editor de Bloques visual. Busca el área en la que deseas mostrar el código y pega tu HTML codificado en el editor.

Pegar HTML codificado
Pegar HTML codificado

Si estás utilizando el editor clásico de WordPress, debes ir a la pestaña Texto, que es la misma que el Editor de código del Editor de bloques de Gutenberg.

Pestaña Texto
Pestaña Texto

Paso 5: Publicar y Ver el Código

Haz clic en Actualizar o Publicar en la entrada y, a continuación, navega hasta el frontend de esa entrada para ver cómo queda.

Deberías ver el código original que se pegó en el codificador, antes de que la herramienta añadiera elementos de codificación HTML. Como se ha mencionado, no hay ninguna función de estilo con los codificadores, por lo que este es un método maravilloso para una apariencia limpia y minimalista.

Código publicado
Código publicado

Método 4: Utilizar un Shortcode Personalizado

Crear un shortcode personalizado hace el trabajo de insertar trozos de código reutilizable sin que tengas que copiar y pegar. Por eso los shortcodes personalizados ofrecen una sólida oportunidad para mostrar código en WordPress.

Estas son las ventajas de utilizar shortcodes personalizados para mostrar código:

  1. Los códigos cortos personalizados te permiten guardar código complicado una vez, y luego reutilizarlo, eliminando la necesidad de escribir fragmentos de código más largos cada vez.
  2. Puedes escribir tu propio estilo CSS para los resaltadores de código y los cuadros.
  3. Los shortcodes se pueden utilizar por cualquiera, de modo que otros colaboradores pueden aprovechar tus resaltadores y bloques de código con sólo pulsar un botón.

Crear un shortcode personalizado requiere experiencia editando archivos de temas de WordPress, trabajando con código PHP y, potencialmente, creando plugins de WordPress. Debido a estos requisitos, crear un shortcode personalizado para WordPress puede ser difícil para los que no tienen conocimientos de PHP.

Sin embargo, el producto final resulta una forma significativamente más fácil de mostrar código en WordPress.

Shortcode HTML
Shortcode HTML

Puedes dar al shortcode personalizado el nombre que quieras y crear varias opciones, como [html] [/html] y [css] [/css], para diferentes lenguajes de programación.

Shortcode CSS
Shortcode CSS

Ten en cuenta que los shortcodes personalizados funcionan mejor para resaltar la sintaxis cuando utilizas el Editor de texto (en WordPress Clásico) o el cuadro de HTML personalizado cuando trabajas con el Editor de bloques de WordPress Gutenberg.

Editor de texto
Editor de texto

El objetivo es crear un shortcode personalizado en el que puedas escribir o pegar código entre las etiquetas de apertura y cierre del shortcode.

Código pegado dentro de HTML shortcode para mostrar el código en WordPress
Código pegado dentro del shortcode HTML

Una vez publicado, los ajustes de estilo y resaltado de tu shortcode personalizado se muestran en el frontend. Y el código que has añadido se muestra muy bien dentro del resaltador de sintaxis.

Vista frontend para mostrar el código en WordPress
Vista frontend

Método 5: Usar Etiquetas <code> and <pre>

Tal vez la forma más antigua — pero aún increíblemente fiable — de mostrar código en WordPress sea simplemente añadiendo etiquetas HTML específicas alrededor del fragmento de código. Este método es el mejor para cuando trabajas con el editor clásico de WordPress, o en cualquier editor HTML.

Hay dos opciones:

  1. <code> etiquetas: Lo mejor para mostrar una línea corta de código; se utiliza a menudo dentro de los párrafos
  2. <pre> etiquetas: Ideal para bloques de código más largos, o cuando quieras más opciones de formato

Opción 1: Utiliza Etiquetas <code> para Fragmentos de Código Inline

Los creadores de contenidos que escriben sobre programación no siempre quieren utilizar grandes bloques de código. A veces tiene más sentido incluir un fragmento rápido de código dentro de un párrafo.

Sin embargo, tienes que resaltar y conservar el formato de ese código. Y cierto código puede causar problemas con el contenido circundante si no se conserva adecuadamente.

Una etiqueta <br>
Una etiqueta de interrupción

Por ejemplo, la etiqueta <br> — sin las etiquetas <code>, simplemente añadiría una salto a tu párrafo.

Una salto no deseado
Un salto no deseado

Colocando la programación dentro de estas etiquetas se obtiene un resultado mucho más limpio:

<code> </code>

Para ello, abre una entrada de WordPress y activa el Editor de código (para el Editor de bloques de Gutenberg) o el Editor de texto (si utilizas WordPress clásico).

Pega o escribe estas etiquetas en algún lugar del editor; no insertes todavía el código que quieres mostrar. En su lugar, añade un espacio entre las etiquetas.

<code> </code>

Espacio entre etiquetas de código
Espacio entre etiquetas de código

Cambia al Editor Visual (independientemente de si estás en Gutenberg o en WordPress clásico).

Verás un pequeño espacio gris dentro del contenido visual. Haz clic para colocar el cursor dentro de ese espacio gris. Aquí es donde puedes pegar o escribir el código para la visualización.

Espacio gris para escribir el código
Espacio gris para escribir el código

A medida que escribes, el espacio gris se expande para acomodar el fragmento de código. Pulsa el botón Publicar o Actualizar para esa entrada.

Escribir código en el espacio gris
Escribir código en el espacio gris

En el frontend de la entrada, ahora verás el código conservado como debe ser, y sin ninguna actividad extraña (como añadir un salto a tu contenido).

La etiqueta de salto de línea mostrada sin añadir realmente un salto
La etiqueta de salto de línea mostrada sin añadir realmente un salto

El formato de estas etiquetas <code> suele ser básico, pero a menudo depende del estilo de tu tema. Por ejemplo, nuestro ejemplo sólo cambia la fuente pero no incluye un fondo gris.

Opción 2: Utiliza Etiquetas <pre> para Bloques de Código más Largos

Los fragmentos de código más largos merecen sus propios bloques, separados del contenido que estés escribiendo en párrafos. Para ellos, te recomendamos que utilices las etiquetas <pre>.

El proceso de añadir una etiqueta <pre> es igual que con las etiquetas <code>, pero tienes más espacio para trabajar a la hora de insertar tu código.

Ve a una entrada y abre el editor de Código (Gutenberg) o de Texto (WordPress clásico). Pega o escribe el código que quieras mostrar. A continuación, rodea el código con estas etiquetas:

<pre> </pre>

Etiquetas pre para mostrar el código de WordPress
Etiquetas pre para mostrar el código de WordPress

Cambia al editor Visual para ver qué aspecto tiene. Observarás que la sección de texto tendrá una etiqueta » Preformateado «, que es precisamente lo que pretende hacer la etiqueta <pre>.

Elige la opción preformateado
Elige la opción preformateado

Haz clic en Publicar o Actualizar y, a continuación, cambia al frontend para ver tu código en su forma original. Al igual que las etiquetas <code>, las etiquetas <pre> son pésimas con el formato, por lo que te quedas con el aspecto más simple posible. Sin embargo, hay formas de estilizarlas tú mismo.

Resultados del frontend para mostrar el código en WordPress
Resultados del frontend
Consejos para Estilizar las Etiquetas <pre

Las etiquetas <pre> son menos estables que las etiquetas <code>, por lo que puedes encontrar dificultades dependiendo del tipo de código que intentes mostrar.

Utiliza estos consejos para mejorar su aspecto:

  • Haz lo posible por eliminar, o evitar por completo, los saltos de línea, ya que la etiqueta <pre> a menudo no los reconoce. En general, responde mal a demasiados saltos de línea.
  • Considera la posibilidad de añadir una propiedad overflow-x:auto; en tu CSS para añadir funcionalidad de desplazamiento al código de la etiqueta <pre>. Esto ayuda con el contenido desbordante, ya que la etiqueta <pre> por sí misma deja que tu código se salga de la página.
  • Utiliza fuentes monoespaciadas.

También puedes estilizar el formato del texto y la caja detrás del código. Aquí tienes una plantilla de inicio que puedes añadir a tu archivo CSS:

article pre{
background:#ffffff;
border:3px #eee solid;
border-top:30px #eee solid;
font-family:Consolas, courier;
font-size:0.8em;
white-space:pre;
overflow-x:auto;
}

Método 6: Utilizar un Editor Markdown que se Conecte a WordPress

Los editores Markdown ofrecen la posibilidad no sólo de escribir y formatear más rápido, sino que muchos de ellos se conectan directamente a WordPress para publicar al instante directamente desde el editor.

Muchos escritores recurren a los editores Markdown debido a este rápido proceso de creación de contenidos. Y por suerte, algunos de esos editores ofrecen markdown para bloques de código, lo que significa que puedes mostrar código dentro del editor markdown, y luego enviarlo directamente a WordPress para su publicación.

Ten en cuenta que los editores de texto normales (como Sublime Text) no preservan la integridad del código cuando se transfiere para su publicación en WordPress. Y los editores HTML, aunque son excelentes para escribir y almacenar código, tampoco proporcionan las funciones de resaltado necesarias para preservar el código para su publicación en WordPress.

Hay muchos editores de markdown entre los que elegir, pero las soluciones ideales comparten dos características:

  1. Exportación directa a WordPress
  2. Markdown para resaltar el código

Sin embargo, puedes optar por un editor markdown con exportación HTML, si no te gusta la exportación directa a WordPress.

Los mejores editores de markdown con ambas funciones son:

Ulysses y ByWord son aplicaciones de pago, mientras que Obsidian tiene versiones gratuitas y de pago.

Para el siguiente tutorial, utilizaremos Ulysses.

Paso 1: Añadir un Bloque de Código Longform en Ulysses

Mientras redactas un documento en Ulysses, escribe " markdown — eso son dos apóstrofes — siempre que quieras añadir inmediatamente un bloque de resaltado de código dentro de un documento.

Este método markdown es para bloques de código más largos. No se puede utilizar en medio de un párrafo, por lo que debes crear una nueva línea para que se active el marcado.

Marcador de código Ulysses
Marcador de código Ulysses

Una vez que aparezca el resaltador de código, puedes escribir o pegar en él lo que quieras.

Pegar para mostrar el código en WordPress en el resaltador de Ulysses
Pegar código en el resaltador de Ulysses

Otra forma de activar el bloque de código es hacer clic en el elemento de menú Markdown (tres puntos horizontales) y seleccionar la opción Código.

Utiliza el menú Markdown para seleccionar la opción Código
Utiliza el menú Markdown para seleccionar la opción Código

Después de hacer clic en ese elemento del menú, el campo del resaltador de código aparece donde haya estado el cursor por última vez.

Resaltador de código vacío
Resaltador de código vacío

Para colocar fragmentos de código dentro de párrafos, recurrirías al marcado `` (que parece casi lo mismo, pero en realidad son dos acentos agudos/graves en lugar de apóstrofos).

Paso 3: Exportar a WordPress

Una vez que tengas listo tu documento, es hora de exportarlo todo a WordPress.

Lo maravilloso de los editores markdown que se conectan con WordPress es que mantienen los bloques de código durante toda la transferencia. Así, verás resaltadores de código bien formateados y listos para publicar en WordPress.

El resaltador de código sigue siendo el mismo en WordPress
El resaltador de código sigue siendo el mismo en WordPress

En Ulysses, ve a la parte superior del documento para encontrar la barra de herramientas. Haz clic en el botón Vista previa de publicación.

Selecciona el botón Vista previa de publicación para mostrar el código en WordPress
Selecciona el botón Vista previa de publicación

Aparecerá un menú desplegable para seleccionar una plataforma y un sitio web en el que publicar. También puedes utilizar la opción Gestionar Cuentas de ese menú para iniciar sesión en un sitio web de WordPress antes de exportar.

Una vez que tengas el sitio web adecuado, haz clic en el botón Publicar.

Elige una cuenta y publica
Elige una cuenta y publica

Rellena el título de la publicación, el horario y cualquier otra información que desees, como categorías, etiquetas e imágenes destacadas.

La parte más importante, sin embargo, es establecer el Estado en Borrador para no publicar la entrada sin revisarla antes en WordPress.

Haz clic en Aceptar para continuar.

Elige un estado y haz clic en OK para mostrar el código en WordPress
Elige un estado y haz clic en Aceptar

En unos segundos, Ulysses coloca todo el documento en una nueva entrada de WordPress (puede que tengas que iniciar sesión en tu administrador de WordPress cuando aparezca).

Verás los bloques de código ya configurados y listos para publicar. Haz clic en el botón Publicar para ponerlo en marcha.

Bloques de código en el editor de WordPress
Bloques de código en el editor de WordPress

En el frontend, verás que los fragmentos de código inline y los bloques de código más grandes están bien resaltados, y se ha conservado el formato de ese código.

Resultados frontend para mostrar código en WordPress
Resultados del frontend

Resumen

Existen varios métodos para mostrar correctamente el código en WordPress, y a menudo depende del editor de WordPress que se utilice, del lenguaje de código que quieras mostrar y de cómo quieras mostrar y formatear ese código. Por ejemplo, optar por un plugin proporcionará sin duda una experiencia de formato más creativa que el bloque Código estándar del editor Gutenberg de WordPress.

En este artículo, cubrimos muchos métodos diferentes que ilustran cómo mostrar código en WordPress.

Normalmente recomendamos empezar con el método 1 e ir avanzando. El método 2 te servirá si buscas más opciones de estilo, y los métodos 3-5 sólo son útiles en situaciones concretas. El método 6 es una especie de solución extra, pensada para quienes prefieren los editores markdown a escribir directamente en WordPress.

Independientemente del método que elijas, un proveedor de alojamiento fiable puede ayudarte a pulir aún más tu sitio. Las soluciones de Alojamiento WordPress de Kinsta ofrecen planes para sitios de todas las formas y tamaños, y la plataforma fácil de usar — MyKinsta, un panel de administración propio — hace que editar cualquier parte de tu sitio y sus archivos sea pan comido. Además, obtendrás las ventajas añadidas de la velocidad, seguridad y soporte de primera clase de Kinsta.

¿Has intentado mostrar código en WordPress en el pasado? Si es así, ¿qué método te ha funcionado mejor? Háznoslo saber en la sección de comentarios más abajo.

Jeremy Holcombe Kinsta

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).