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.
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:
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:
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.
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.
Ahora deberías ver un campo con la indicación «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.
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…».
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.
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.
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.
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.
Puedes estilizar el bloque Código como quieras, con opciones para cambiar cosas como el texto y los colores de 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
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.
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.
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.
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…”
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.
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.
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.
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.
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.
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.
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.
Hay bastantes lenguajes de programación entre los que elegir, así que desplázate por la lista y elige el más apropiado.
El campo Speciallines resalta las líneas que especifiques. Para ello, escribe los números de línea separados por comas.
Como resultado, los visitantes del sitio verán resaltadas todas las líneas que hayas especificado.
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.
Como puedes ver, si escribes 10 en el campo Lineoffset toda la caja de código empezará en el número 10.
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.
Por ejemplo, el tema Godzilla muestra el código como si estuviera encima de un papel cuadriculado o de dibujo.
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.
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.
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.
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
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.
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.
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.
Haz clic en el menú desplegable del campo Lenguaje para seleccionar el lenguaje de programación adecuado.
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.
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.
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:
- Codificador HTML W3Docs
- Codificador HTML de Opinionated Geek
- Codificador y Decodificador HTML Web2Generators
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.
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.
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.
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.
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.
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.
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.
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:
- 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.
- Puedes escribir tu propio estilo CSS para los resaltadores de código y los cuadros.
- 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.
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.
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.
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.
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.
Método 5: Usar Etiquetas
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:
<code>etiquetas: Lo mejor para mostrar una línea corta de código; se utiliza a menudo dentro de los párrafos<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.
Por ejemplo, la etiqueta <br> — sin las etiquetas <code>, simplemente añadiría una salto a tu párrafo.
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>
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.
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.
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).
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>
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>.
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.
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:
- Exportación directa a WordPress
- 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.
Una vez que aparezca el resaltador de código, puedes escribir o pegar en él lo que quieras.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Deja una respuesta