{"id":66003,"date":"2023-05-17T15:21:50","date_gmt":"2023-05-17T13:21:50","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=66003&#038;preview=true&#038;preview_id=66003"},"modified":"2025-01-17T13:57:29","modified_gmt":"2025-01-17T12:57:29","slug":"mostrar-codigo-en-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/","title":{"rendered":"C\u00f3mo Mostrar C\u00f3digo en WordPress (y que Quede Bonito)"},"content":{"rendered":"<p>Aprender a mostrar c\u00f3digo en WordPress es crucial para blogueros y creadores de contenidos que publican c\u00f3digo online constantemente para que lo utilicen sus lectores. El <a href=\"https:\/\/kinsta.com\/es\/blog\/editar-codigo-wordpress\/\">c\u00f3digo inform\u00e1tico<\/a>, por dise\u00f1o, 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\u00f3digo reales.<\/p>\n<p>Esto, sin embargo, plantea un problema para quienes escriben sobre desarrollo y dise\u00f1o, ya que necesitas una forma de mostrar adecuadamente el c\u00f3digo sin que haga su verdadero trabajo, como crear un bot\u00f3n o a\u00f1adir estilo a un bloque de p\u00e1rrafo.<\/p>\n<p>En pocas palabras, si escribes una entrada de blog y pones un ejemplo de fragmento de c\u00f3digo, deber\u00e1s evitar que el c\u00f3digo funcione realmente. De esta forma, los lectores pueden ver el c\u00f3digo en su forma original, verlo en un bloque bien formateado e incluso copiar su contenido para utilizarlo en su trabajo de desarrollo.<\/p>\n<p>En esta gu\u00eda, te mostraremos exactamente c\u00f3mo mostrar c\u00f3digo en WordPress (independientemente de <a href=\"https:\/\/kinsta.com\/es\/blog\/como-personalizar-tema-wordpress\/\">tu tema de WordPress<\/a>) utilizando varios m\u00e9todos diferentes, y te ayudaremos a decidir qu\u00e9 m\u00e9todo funciona mejor para tu flujo de trabajo.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>\u00bfQu\u00e9 Ocurre Cuando A\u00f1ades C\u00f3digo Normal en WordPress?<\/h2>\n<p>Puede que te preguntes qu\u00e9 pasar\u00eda si escribieras algo de c\u00f3digo en el editor visual de WordPress. Despu\u00e9s de todo, no utilizas los editores de texto o c\u00f3digo, as\u00ed que \u00bfno deber\u00eda funcionar bien tu fragmento de c\u00f3digo?<\/p>\n<p>Probablemente no.<\/p>\n\n<p>\u00c9stos son algunos de los resultados inusuales que pueden producirse:<\/p>\n<ul>\n<li>El c\u00f3digo aparece parcialmente, con trozos de c\u00f3digo que aparecen en el frontend de la entrada y otros que desaparecen. Esto parece poco profesional para los visitantes; significa que tu c\u00f3digo no es preciso.<\/li>\n<li>No aparece nada en absoluto, el c\u00f3digo desaparece completamente de la vista en el backend y no se muestra nada en el frontend de tu entrada.<\/li>\n<li>Se ve un formato extra\u00f1o \u2014 a menudo algo que no es f\u00e1cil de usar ni apto para ser publicado.<\/li>\n<li>Puede que el c\u00f3digo s\u00f3lo se muestre parcialmente<\/li>\n<\/ul>\n<p>Para ilustrar un par de estos resultados, vamos a utilizar el siguiente fragmento de <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-el-html\/\">c\u00f3digo HTML<\/a>:<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\n.cities {\nbackground-color: green;\ncolor: white;\nborder: 4px solid black;\nmargin: 10px;\npadding: 10px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;div class=\"cities\"&gt;\n&lt;h2&gt;Chicago&lt;\/h2&gt;\n&lt;p&gt;A nickname for Chicago is The City of Broad Shoulders.&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div class=\"cities\"&gt;\n&lt;h2&gt;Los Angeles&lt;\/h2&gt;\n&lt;p&gt;A nickname for Los Angeles is The City of Angels.&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div class=\"cities\"&gt;\n&lt;h2&gt;New York&lt;\/h2&gt;\n&lt;p&gt;A nickname for New York is The Big Apple.&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Este fragmento de c\u00f3digo concreto <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-html\/\">utiliza elementos de estilo HTML<\/a> para producir tres bloques de contenido verdes con encabezados y p\u00e1rrafos.<\/p>\n<figure id=\"attachment_151531\" aria-describedby=\"caption-attachment-151531\" style=\"width: 937px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151531 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/click-to-write-code.jpg\" alt=\"Haz clic para Escribir C\u00f3digo y mostrar el c\u00f3digo de WordPress\" width=\"937\" height=\"437\"><figcaption id=\"caption-attachment-151531\" class=\"wp-caption-text\">Haz clic para escribir el c\u00f3digo<\/figcaption><\/figure>\n<p>Sin embargo, nos gustar\u00eda mostrar el c\u00f3digo <em>sin procesar<\/em> en una entrada de blog, no que se renderizara realmente en esos bloques.<\/p>\n<p>Estos son los resultados si pegamos el c\u00f3digo directamente en el <a href=\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\">Editor de Bloques Gutenberg<\/a> de WordPress:<\/p>\n<figure id=\"attachment_151527\" aria-describedby=\"caption-attachment-151527\" style=\"width: 928px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151527 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Gutenberg-Editor-results-from-HTML-code.jpg\" alt=\"Resultados de Gutenberg para mostrar el c\u00f3digo de WordPress\" width=\"928\" height=\"752\"><figcaption id=\"caption-attachment-151527\" class=\"wp-caption-text\">Resultados del Editor Gutenberg a partir del c\u00f3digo HTML<\/figcaption><\/figure>\n<p>Como puedes ver, WordPress intenta utilizar el c\u00f3digo para su prop\u00f3sito principal: generar contenido \u2014 sin embargo, despoja al c\u00f3digo de su estilo, por lo que no proporciona el resultado que quer\u00edamos mostrar a los lectores.<\/p>\n<p>Para evitar situaciones como \u00e9sta, te recomendamos que utilices uno de los m\u00e9todos que se indican a continuaci\u00f3n para mostrar el c\u00f3digo.<\/p>\n<h2>C\u00f3mo Mostrar C\u00f3digo en Tu Sitio WordPress (6 M\u00e9todos)<\/h2>\n<p>Estos m\u00e9todos se enumeran de m\u00e1s f\u00e1cil a m\u00e1s dif\u00edcil, y tenemos algunos m\u00e9todos especiales para aquellos que disfrutan escribiendo c\u00f3digo y contenido en editores markdown y no en WordPress).<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"-1\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>M\u00e9todo 1: Usar el Editor de Bloques de Gutenberg (Predeterminado)<\/h3>\n<p>Para practicar la visualizaci\u00f3n de c\u00f3digo en WordPress, puedes utilizar el siguiente fragmento de c\u00f3digo, que <a href=\"https:\/\/kinsta.com\/es\/blog\/aprender-html\/\">utiliza HTML<\/a> y CSS interno para producir un resultado sencillo con un encabezado azul y un p\u00e1rrafo negro:<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;style&gt;\nbody {background-color: beige;}\nh1 {color: blue;}\np {color: black;}\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;h1&gt;Fun Facts About Otters&lt;\/h1&gt;\n&lt;p&gt;A group of otters in water is called a \"raft,\" since they all link arms to prevent from floating away.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Cuando se pone en acci\u00f3n, el c\u00f3digo muestra esto en el frontend:<\/p>\n<figure id=\"attachment_151528\" aria-describedby=\"caption-attachment-151528\" style=\"width: 979px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151528 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/html-code-rendering-fun-facts-about-otters.jpg\" alt=\"C\u00f3digo HTML con datos curiosos sobre las nutrias\" width=\"979\" height=\"359\"><figcaption id=\"caption-attachment-151528\" class=\"wp-caption-text\">Los resultados muestran un t\u00edtulo y un cuerpo de texto con estilo<\/figcaption><\/figure>\n<p>Pero si sigues este tutorial, aprender\u00e1s a mostrar el c\u00f3digo en bruto, no lo que se supone que debe mostrar el c\u00f3digo en el frontend.<\/p>\n<h4>Paso 1: A\u00f1adir un Bloque de C\u00f3digo en WordPress<\/h4>\n<p>El editor Gutenberg de WordPress ya tiene incorporado un bloque de C\u00f3digo, que te permite mostrar fragmentos de c\u00f3digo sin perder nada de su formato ni activar realmente el c\u00f3digo.<\/p>\n<p>Para empezar, abre una <a href=\"https:\/\/kinsta.com\/es\/blog\/encontrar-id-entradas-wordpress\/\">entrada o p\u00e1gina<\/a> en WordPress y haz clic en uno de los botones <strong>A\u00f1adir bloque<\/strong>.<\/p>\n<figure id=\"attachment_151529\" aria-describedby=\"caption-attachment-151529\" style=\"width: 941px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151529 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/add-block-buttons.jpg\" alt=\"Botones A\u00f1adir bloque\" width=\"941\" height=\"486\"><figcaption id=\"caption-attachment-151529\" class=\"wp-caption-text\">Botones A\u00f1adir bloque<\/figcaption><\/figure>\n<p>Haz clic en uno de los botones A\u00f1adir Bloque<\/p>\n<p>Esto muestra la colecci\u00f3n de bloques disponibles. Puedes buscar el bloque C\u00f3digo o escribir una palabra clave como \u00abc\u00f3digo\u00bb en la barra de b\u00fasqueda.<\/p>\n<p>Cuando veas el bloque <strong>C\u00f3digo<\/strong> (con iconos de corchetes), haz clic en \u00e9l para insertar un trozo de c\u00f3digo en la entrada.<\/p>\n<figure id=\"attachment_151530\" aria-describedby=\"caption-attachment-151530\" style=\"width: 939px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151530 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/popup-window-to-add-a-block-with-Code-block-option.jpg\" alt=\"Ventana emergente para a\u00f1adir un bloque, con la opci\u00f3n Bloque de c\u00f3digo\" width=\"939\" height=\"411\"><figcaption id=\"caption-attachment-151530\" class=\"wp-caption-text\">Ventana emergente para a\u00f1adir un bloque, con la opci\u00f3n Bloque de c\u00f3digo<\/figcaption><\/figure>\n<p>Ahora deber\u00edas ver un campo con la indicaci\u00f3n <strong>\u00abEscribir c\u00f3digo&#8230;\u00bb<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-151531 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/click-to-write-code.jpg\" alt=\"Haz clic para Escribir C\u00f3digo\" width=\"937\" height=\"437\"><\/p>\n<p>El editor Gutenberg de WordPress es compatible con markdown, por lo que tambi\u00e9n puedes encontrar e insertar el bloque C\u00f3digo escribiendo una barra inclinada (<code>\/<\/code>) en el editor y, a continuaci\u00f3n, empezar a escribir \u00abC\u00bb o \u00abC\u00f3digo\u00bb. WordPress mostrar\u00e1 entonces todos los bloques relevantes, ofreci\u00e9ndote una forma m\u00e1s r\u00e1pida de insertarlos.<\/p>\n<p>Es f\u00e1cil confundir el bloque C\u00f3digo y el bloque HTML personalizado. Sin embargo, el bloque HTML personalizado sirve para a\u00f1adir HTML personalizado que se mostrar\u00e1 en el frontend, no para a\u00f1adir c\u00f3digo sin procesar para su visualizaci\u00f3n.<\/p>\n<figure id=\"attachment_151532\" aria-describedby=\"caption-attachment-151532\" style=\"width: 933px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151532 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/using-markdown-to-call-the-Code-block.jpg\" alt=\"Utilizar markdown para llamar al bloque C\u00f3digo\" width=\"933\" height=\"380\"><figcaption id=\"caption-attachment-151532\" class=\"wp-caption-text\">Utilizar markdown para llamar al bloque C\u00f3digo<\/figcaption><\/figure>\n<h4>Paso 2: Pega el C\u00f3digo de Visualizaci\u00f3n en el Campo Bloque de C\u00f3digo<\/h4>\n<p>Ahora es el momento de copiar el c\u00f3digo que te gustar\u00eda mostrar y pegarlo en la casilla que dice <strong>\u00abEscribe el c\u00f3digo&#8230;\u00bb.<\/strong><\/p>\n<figure id=\"attachment_151533\" aria-describedby=\"caption-attachment-151533\" style=\"width: 936px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151533 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Write-or-Paste-in-Code-to-Display.jpg\" alt=\"Escribe o Pega en C\u00f3digo a Mostrar\" width=\"936\" height=\"405\"><figcaption id=\"caption-attachment-151533\" class=\"wp-caption-text\">Escribe o Pega en C\u00f3digo a Mostrar<\/figcaption><\/figure>\n<p>Tu c\u00f3digo aparece ahora dentro de la casilla.<\/p>\n<p>Lo bueno del bloque C\u00f3digo es que respeta todos los espacios y tabulaciones que ya ten\u00edas dentro del fragmento de c\u00f3digo. Como resultado, no deber\u00eda parecer diferente de la fuente de la que lo copiaste.<\/p>\n<figure id=\"attachment_151534\" aria-describedby=\"caption-attachment-151534\" style=\"width: 919px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151534 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Pasted-Snippet-in-the-Code-Block.jpg\" alt=\"Fragmento pegado en el Bloque de C\u00f3digo para mostrar el c\u00f3digo en WordPress\" width=\"919\" height=\"840\"><figcaption id=\"caption-attachment-151534\" class=\"wp-caption-text\">Fragmento de c\u00f3digo pegado en el bloque C\u00f3digo<\/figcaption><\/figure>\n<h4>Paso 3: Publicar y Ver los Resultados<\/h4>\n<p>Para mostrar tu c\u00f3digo en tu entrada o p\u00e1gina de WordPress, finaliza el proceso haciendo clic en el bot\u00f3n <strong>Publicar<\/strong>.<\/p>\n<p>Tambi\u00e9n puedes hacerte una idea de c\u00f3mo queda antes de publicarlo seleccionando <strong>Vista Previa<\/strong>.<\/p>\n<figure id=\"attachment_151535\" aria-describedby=\"caption-attachment-151535\" style=\"width: 929px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151535 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Click-Publish.jpg\" alt=\"Haz clic en Publicar para mostrar el c\u00f3digo en WordPress\" width=\"929\" height=\"499\"><figcaption id=\"caption-attachment-151535\" class=\"wp-caption-text\">Haz clic en Publicar<\/figcaption><\/figure>\n<p>Una vez que hayas pulsado el bot\u00f3n <strong>Publicar<\/strong>, visita la versi\u00f3n en producci\u00f3n de ese post para confirmar que tu trozo de c\u00f3digo se muestra como c\u00f3digo sin procesar.<\/p>\n<p>Como puedes ver, el bloque C\u00f3digo es bastante sencillo, pero proporciona la funcionalidad necesaria para mantener el formato al publicar c\u00f3digo en las entradas del blog.<\/p>\n<p>Echa un vistazo a la siguiente captura de pantalla. En nuestro ejemplo, no ha cambiado nada del fragmento de c\u00f3digo original; simplemente se ha presentado en el frontend en un recuadro gris.<\/p>\n<figure id=\"attachment_151536\" aria-describedby=\"caption-attachment-151536\" style=\"width: 1031px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151536 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/grey-box.jpg\" alt=\"Visualizaci\u00f3n del C\u00f3digo en el Frontend de WordPress\" width=\"1031\" height=\"1190\"><figcaption id=\"caption-attachment-151536\" class=\"wp-caption-text\">C\u00f3digo mostrado en el frontend<\/figcaption><\/figure>\n<h4>Paso 4: Considera la Posibilidad de dar Formato al Bloque de C\u00f3digo<\/h4>\n<p>Para que el bloque C\u00f3digo destaque un poco, piensa en cambiar su aspecto respecto al predeterminado.<\/p>\n<p>Para mostrar las opciones de estilo del bloque, selecciona el bloque <strong>C\u00f3digo<\/strong> y, a continuaci\u00f3n, elige el bot\u00f3n <strong>Configuraci\u00f3n<\/strong> (icono de engranaje). Esto abre la pesta\u00f1a <strong>Bloque<\/strong>, que s\u00f3lo muestra los ajustes de Bloque para tu bloque seleccionado \u2014 en este caso, el bloque C\u00f3digo.<\/p>\n<figure id=\"attachment_151537\" aria-describedby=\"caption-attachment-151537\" style=\"width: 1056px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151537 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Go-to-Block-Settings-for-Code-Formatting.jpg\" alt=\"Ir a Ajustes de Bloque para Formato de C\u00f3digo y para mostrar el c\u00f3digo de WordPress\" width=\"1056\" height=\"814\"><figcaption id=\"caption-attachment-151537\" class=\"wp-caption-text\">Ir a Ajustes de bloque para el formato de c\u00f3digo<\/figcaption><\/figure>\n<p>Puedes estilizar el bloque C\u00f3digo como quieras, con opciones para cambiar cosas como el texto y los colores de fondo.<\/p>\n<figure id=\"attachment_151538\" aria-describedby=\"caption-attachment-151538\" style=\"width: 1044px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151538 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Edit-Color-and-Background-Settings.jpg\" alt=\"Editar Ajustes de Color y Fondo\" width=\"1044\" height=\"758\"><figcaption id=\"caption-attachment-151538\" class=\"wp-caption-text\">Editar Ajustes de Color y Fondo<\/figcaption><\/figure>\n<p>Tambi\u00e9n puedes<\/p>\n<ul>\n<li>Cambiar el tama\u00f1o del texto<\/li>\n<li>A\u00f1adir relleno y m\u00e1rgenes a la caja de c\u00f3digo<\/li>\n<li>Incluir un borde con una anchura y color personalizados<\/li>\n<\/ul>\n<figure id=\"attachment_151539\" aria-describedby=\"caption-attachment-151539\" style=\"width: 1050px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151539 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Settings-for-size-dimensions-and-border.jpg\" alt=\"Ajustes de tama\u00f1o, dimensiones y borde\" width=\"1050\" height=\"806\"><figcaption id=\"caption-attachment-151539\" class=\"wp-caption-text\">Ajustes de tama\u00f1o, dimensiones y borde<\/figcaption><\/figure>\n<p>Como siempre, haz clic en el bot\u00f3n <strong>Publicar<\/strong> cuando hayas terminado de editar el bloque y, a continuaci\u00f3n, visualiza los resultados en el frontend de tu <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-tipos-de-postes-personalizados\/\">entrada de WordPress<\/a>.<\/p>\n<figure id=\"attachment_151540\" aria-describedby=\"caption-attachment-151540\" style=\"width: 1045px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151540 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Frontend-Results.jpg\" alt=\"Resultados del frontend para mostrar el c\u00f3digo en WordPress\" width=\"1045\" height=\"1340\"><figcaption id=\"caption-attachment-151540\" class=\"wp-caption-text\">Resultados del frontend<\/figcaption><\/figure>\n<h3>M\u00e9todo 2: Utilizar un Plugin<\/h3>\n<p>Otra forma de mostrar c\u00f3digo en WordPress es <a href=\"https:\/\/kinsta.com\/es\/blog\/como-instalar-wordpress-plugins\/\">instalando un plugin<\/a>.<\/p>\n<p>Este m\u00e9todo puede parecer un poco redundante teniendo en cuenta que WordPress ya tiene un bloque de C\u00f3digo 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\u00f3digo sean m\u00e1s bonitos de que lo que conseguir\u00edas con el bloque de C\u00f3digo est\u00e1ndar de Gutenberg.<\/p>\n<p>Adem\u00e1s, algunos usuarios del Editor cl\u00e1sico de WordPress pueden encontrar m\u00e1s f\u00e1cil trabajar con un plugin, ya que es un poco m\u00e1s complicado mostrar c\u00f3digo en el Editor cl\u00e1sico.<\/p>\n<p>Para empezar, debes elegir un plugin \u00abresaltador de sintaxis\u00bb, que es una forma elegante de decir que el plugin resaltar\u00e1 tu c\u00f3digo fuente y mantendr\u00e1 su formato intacto.<\/p>\n<p>Estos son algunos plugins de confianza para mostrar c\u00f3digo en WordPress:<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/enlighter\/\" target=\"_blank\" rel=\"noopener noreferrer\">Enlighter<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/syntaxhighlighter\/\" target=\"_blank\" rel=\"noopener noreferrer\">SyntaxHighlighter Evolved<\/a><\/li>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/code-prettify\/\" target=\"_blank\" rel=\"noopener noreferrer\">Code Prettify<\/a><\/li>\n<\/ul>\n<p>En este tutorial utilizaremos el plugin Enlighter, ya que ofrece opciones para etiquetar los tipos de c\u00f3digo que se muestran en los cuadros de c\u00f3digo, adem\u00e1s de muchas otras funciones de estilo. Sin embargo, puedes probar los dem\u00e1s, ya que todos hacen pr\u00e1cticamente lo mismo.<\/p>\n<h4>Paso 1: Instala un Plugin Resaltador de Sintaxis<\/h4>\n<p>Instala el plugin Enlighter &#8211; Resaltador de Sintaxis Personalizable en tu sitio de WordPress utilizando el <a href=\"https:\/\/kinsta.com\/es\/blog\/como-instalar-wordpress-plugins\/\">m\u00e9todo de instalaci\u00f3n de plugins<\/a> que prefieras.<\/p>\n<p>Tras la activaci\u00f3n, el plugin estar\u00e1 listo para insertar c\u00f3digo en cualquier entrada\/p\u00e1gina con un bloque Gutenberg o un bot\u00f3n <strong>Insertar<\/strong> del Editor Cl\u00e1sico.<\/p>\n<figure id=\"attachment_151541\" aria-describedby=\"caption-attachment-151541\" style=\"width: 945px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151541 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/The-Enlighter-Plugin.jpg\" alt=\"El plugin Enlighter para mostrar el c\u00f3digo en WordPress\" width=\"945\" height=\"309\"><figcaption id=\"caption-attachment-151541\" class=\"wp-caption-text\">El plugin Enlighter<\/figcaption><\/figure>\n<h4>Paso 2: Insertar el Bloque Enlighter Sourcecode en una Entrada<\/h4>\n<p>Si utilizas el Editor de Bloques Gutenberg de WordPress, abre una entrada en la que quieras mostrar c\u00f3digo. Haz clic en uno de los botones <strong>A\u00f1adir Bloque<\/strong> (icono +) para mostrar la colecci\u00f3n de bloques disponibles.<\/p>\n<p>Busca o escribe una palabra clave para el bloque <strong>Enlighten Sourcecode<\/strong>. Haz clic en ese bloque para insertarlo en la entrada.<\/p>\n<figure id=\"attachment_151542\" aria-describedby=\"caption-attachment-151542\" style=\"width: 997px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151542 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Enlighter-Sourcecode-Block.jpg\" alt=\"Bloque Enlighter Sourcecode para mostrar el c\u00f3digo en WordPress\" width=\"997\" height=\"575\"><figcaption id=\"caption-attachment-151542\" class=\"wp-caption-text\">Bloque de c\u00f3digo fuente de Enlighten<\/figcaption><\/figure>\n<h4>Paso 3: Pegar C\u00f3digo en el Bloque Resaltador de Sintaxis<\/h4>\n<p>El bloque <strong>Enlighter Highlighter<\/strong> aparecer\u00e1 entonces en el Editor de bloques, con un t\u00edtulo para\u00a0<strong>\u00abGeneric Highlighting\u00bb<\/strong> (Resaltador Gen\u00e9rico) y un campo para <strong>\u00abInsert Sourcecode\u2026\u00bb <\/strong>(Insertar c\u00f3digo fuente&#8230;)<\/p>\n<p>Toma el c\u00f3digo que quieras mostrar en WordPress y p\u00e9galo\/escr\u00edbelo en el campo \u00a0\u201c<strong>Insert Sourcecode\u2026<\/strong>\u201d<\/p>\n<figure id=\"attachment_151543\" aria-describedby=\"caption-attachment-151543\" style=\"width: 1022px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151543 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Use-the-Insert-Sourcecode-Field.jpg\" alt=\"Utiliza el Campo \"Insert Sourcecode\"\" width=\"1022\" height=\"381\"><figcaption id=\"caption-attachment-151543\" class=\"wp-caption-text\">Utiliza el Campo \u00abInsert Sourcecode\u00bb<\/figcaption><\/figure>\n<p>Como resaltador de sintaxis, el plugin conserva todas las opciones de formato y tabulaciones. Cuando est\u00e9s satisfecho con el resultado, haz clic en el bot\u00f3n <strong>Publicar<\/strong>.<\/p>\n<figure id=\"attachment_151544\" aria-describedby=\"caption-attachment-151544\" style=\"width: 991px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151544 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Click-Publish-1.jpg\" alt=\"Haz clic en Publicar para mostrar el c\u00f3digo en WordPress\" width=\"991\" height=\"849\"><figcaption id=\"caption-attachment-151544\" class=\"wp-caption-text\">Haz clic en Publicar<\/figcaption><\/figure>\n<h4>Paso 4: Vista Previa del C\u00f3digo en el Frontend<\/h4>\n<p>Con esto, puedes ver el frontend de tu entrada para ver lo que ven los visitantes del sitio.<\/p>\n<p>El plugin Enlighter ofrece un tema minimalista por defecto para la visualizaci\u00f3n del c\u00f3digo, con n\u00fameros de l\u00ednea que ayudan a organizarlo y referenciarlo.<\/p>\n<figure id=\"attachment_151545\" aria-describedby=\"caption-attachment-151545\" style=\"width: 1098px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151545 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.95cce0abcfa2479e9089506a78f9c684.jpg\" alt=\"Visualizaci\u00f3n del c\u00f3digo del frontend de WordPress\" width=\"1098\" height=\"728\"><figcaption id=\"caption-attachment-151545\" class=\"wp-caption-text\">Visualizaci\u00f3n en el frontend<\/figcaption><\/figure>\n<p>Como hemos mencionado, utilizar un plugin para mostrar c\u00f3digo en WordPress tiene sus ventajas sobre los otros m\u00e9todos. Por ejemplo, la versi\u00f3n frontend del plugin de sintaxis Enlighter resalta las l\u00edneas a medida que el usuario se desplaza por tu c\u00f3digo.<\/p>\n<figure id=\"attachment_151546\" aria-describedby=\"caption-attachment-151546\" style=\"width: 1035px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151546 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.ffec66ab73594f6a8fcfd86328515232.jpg\" alt=\"L\u00edneas de c\u00f3digo resaltadas\" width=\"1035\" height=\"512\"><figcaption id=\"caption-attachment-151546\" class=\"wp-caption-text\">L\u00edneas de c\u00f3digo resaltadas<\/figcaption><\/figure>\n<p>Tambi\u00e9n hay varios botones en la esquina superior derecha del cuadro de c\u00f3digo, incluido uno que presenta el c\u00f3digo en texto plano, sin los n\u00fameros de l\u00ednea.<\/p>\n<figure id=\"attachment_151547\" aria-describedby=\"caption-attachment-151547\" style=\"width: 1020px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151547 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.00b5c3fcfa414d76ae68c0827cb2228c.jpg\" alt=\"Bot\u00f3n Texto sin formato\" width=\"1020\" height=\"468\"><figcaption id=\"caption-attachment-151547\" class=\"wp-caption-text\">Bot\u00f3n Texto sin formato<\/figcaption><\/figure>\n<p>El segundo bot\u00f3n se llama <strong>Copiar<\/strong> <strong>al<\/strong> <strong>Portapapeles<\/strong>, que copia instant\u00e1neamente todo lo que hay dentro del cuadro de c\u00f3digo al portapapeles del usuario, que puede cogerlo y pegarlo en cualquier programa que desee.<\/p>\n<figure id=\"attachment_151548\" aria-describedby=\"caption-attachment-151548\" style=\"width: 946px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151548 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.6c9ec9750eef4aecbfceee51a4af1cc0.jpg\" alt=\"Bot\u00f3n Copiar al Portapapeles\" width=\"946\" height=\"466\"><figcaption id=\"caption-attachment-151548\" class=\"wp-caption-text\">Bot\u00f3n Copiar al Portapapeles<\/figcaption><\/figure>\n<p>Por \u00faltimo, el tercer bot\u00f3n abre el c\u00f3digo en una nueva ventana, present\u00e1ndolo en una versi\u00f3n de texto plano de la ventana de tu navegador.<\/p>\n<figure id=\"attachment_151549\" aria-describedby=\"caption-attachment-151549\" style=\"width: 986px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151549 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.777ac0e80acf4dcbb66107daddf8a3b7.jpg\" alt=\"Abrir C\u00f3digo en una Ventana Nueva\" width=\"986\" height=\"456\"><figcaption id=\"caption-attachment-151549\" class=\"wp-caption-text\">Abrir C\u00f3digo en una Ventana Nueva<\/figcaption><\/figure>\n<h4>Paso 5: Configura el Lenguaje y la L\u00ednea del Cuadro de C\u00f3digo<\/h4>\n<p>El plugin Enlighter viene con varios temas y potentes herramientas de personalizaci\u00f3n para que el cuadro de c\u00f3digo tenga el aspecto que t\u00fa quieras. Si prefieres no utilizar el tema predeterminado, vuelve a tu entrada dentro de WordPress y haz clic en el bloque <strong>Enlighter Sourcecode<\/strong> abierto en ese momento.<\/p>\n<p>Esto muestra la barra lateral del <strong>Bloque<\/strong> en WordPress. Si no aparece, aseg\u00farate de hacer clic en el bot\u00f3n <strong>Configuraci\u00f3n<\/strong> (icono de engranaje) en la esquina superior derecha de la ventana de WordPress.<\/p>\n<p>El primer ajuste a personalizar es el campo <strong>Lenguaje<\/strong> \u2014 esto indica al plugin en qu\u00e9 lenguaje se muestra el c\u00f3digo para que pueda ofrecer el formato y resaltado adecuados.<\/p>\n<figure id=\"attachment_151550\" aria-describedby=\"caption-attachment-151550\" style=\"width: 1148px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151550 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.f2c13dad8c56496597ac3b6a7c51be2c.jpg\" alt=\"Campo Lenguaje\" width=\"1148\" height=\"733\"><figcaption id=\"caption-attachment-151550\" class=\"wp-caption-text\">Campo Lenguaje<\/figcaption><\/figure>\n<p>Hay bastantes lenguajes de programaci\u00f3n entre los que elegir, as\u00ed que despl\u00e1zate por la lista y elige el m\u00e1s apropiado.<\/p>\n<figure id=\"attachment_151551\" aria-describedby=\"caption-attachment-151551\" style=\"width: 1171px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151551 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4e8a9a6a7c984e20b6bb154e04f75987.jpg\" alt=\"Elegir el lenguaje\" width=\"1171\" height=\"886\"><figcaption id=\"caption-attachment-151551\" class=\"wp-caption-text\">Elegir el lenguaje<\/figcaption><\/figure>\n<p>El campo <strong>Speciallines<\/strong>\u00a0resalta las l\u00edneas que especifiques. Para ello, escribe los n\u00fameros de l\u00ednea separados por comas.<\/p>\n<figure id=\"attachment_151552\" aria-describedby=\"caption-attachment-151552\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151552 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.17f5c662bffd4955a719bcd12d1afc82.jpg\" alt=\"Special lines\" width=\"1024\" height=\"700\"><figcaption id=\"caption-attachment-151552\" class=\"wp-caption-text\">Special lines<\/figcaption><\/figure>\n<p>Como resultado, los visitantes del sitio ver\u00e1n resaltadas todas las l\u00edneas que hayas especificado.<\/p>\n<figure id=\"attachment_151553\" aria-describedby=\"caption-attachment-151553\" style=\"width: 982px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151553 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.26424dd29a524fb5bb4e898efbc65609.jpg\" alt=\"L\u00edneas resaltadas en el frontend\" width=\"982\" height=\"477\"><figcaption id=\"caption-attachment-151553\" class=\"wp-caption-text\">L\u00edneas resaltadas en el frontend<\/figcaption><\/figure>\n<p>El campo <strong>Lineoffset <\/strong>es una forma de iniciar tu fragmento de c\u00f3digo en una l\u00ednea numerada espec\u00edfica, lo que resulta beneficioso si s\u00f3lo est\u00e1s mostrando un subconjunto de c\u00f3digo que forma parte de una colecci\u00f3n mayor de l\u00edneas.<\/p>\n<figure id=\"attachment_151554\" aria-describedby=\"caption-attachment-151554\" style=\"width: 1046px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151554 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.2fcdd0028fa949ba9294eeb90fee1f99.jpg\" alt=\"Campo Lineoffset\" width=\"1046\" height=\"447\"><figcaption id=\"caption-attachment-151554\" class=\"wp-caption-text\">Campo Lineoffset<\/figcaption><\/figure>\n<p>Como puedes ver, si escribes 10 en el campo <strong>Lineoffset<\/strong>\u00a0toda la caja de c\u00f3digo empezar\u00e1 en el n\u00famero 10.<\/p>\n<figure id=\"attachment_151555\" aria-describedby=\"caption-attachment-151555\" style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151555 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.29b010d935744289aac79f10b3b2eaf4.jpg\" alt=\"Iniciar el documento en una l\u00ednea espec\u00edfica\" width=\"900\" height=\"463\"><figcaption id=\"caption-attachment-151555\" class=\"wp-caption-text\">Iniciar el documento en una l\u00ednea espec\u00edfica<\/figcaption><\/figure>\n<h4>Paso 6: Elige un Tema<\/h4>\n<p>El tema Enlighter es el tema por defecto de este plugin. Sin embargo, el campo <strong>Theme<\/strong> (que sigue debajo del panel de configuraci\u00f3n del Bloque) presenta una amplia gama de temas integrados para elegir.<\/p>\n<figure id=\"attachment_151556\" aria-describedby=\"caption-attachment-151556\" style=\"width: 942px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151556 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.a6632b4168ee44ef843640a71644257f.jpg\" alt=\"Opciones de tema\" width=\"942\" height=\"771\"><figcaption id=\"caption-attachment-151556\" class=\"wp-caption-text\">Opciones de tema<\/figcaption><\/figure>\n<p>Por ejemplo, el tema Godzilla muestra el c\u00f3digo como si estuviera encima de un papel cuadriculado o de dibujo.<\/p>\n<figure id=\"attachment_151557\" aria-describedby=\"caption-attachment-151557\" style=\"width: 1007px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151557 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.ee85f0bb69e84d96a03ac4d623fd3453.jpg\" alt=\"El tema Godzilla\" width=\"1007\" height=\"563\"><figcaption id=\"caption-attachment-151557\" class=\"wp-caption-text\">El tema Godzilla<\/figcaption><\/figure>\n<p>Y el tema Atomic cambia el fondo a un tema oscuro mientras ofrece principalmente texto blanco y color rosa para las etiquetas de c\u00f3digo.<\/p>\n<figure id=\"attachment_151558\" aria-describedby=\"caption-attachment-151558\" style=\"width: 1063px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151558 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.ebf289e0059f4ac5a19fcfb6c2bfb589.jpg\" alt=\"Tema Atomic\" width=\"1063\" height=\"646\"><figcaption id=\"caption-attachment-151558\" class=\"wp-caption-text\">Tema Atomic<\/figcaption><\/figure>\n<p>Otro ejemplo es el tema Classic, que es una versi\u00f3n menos minimalista del tema Enlighter, con colores m\u00e1s vivos y l\u00edneas m\u00e1s definidas.<\/p>\n<figure id=\"attachment_151559\" aria-describedby=\"caption-attachment-151559\" style=\"width: 1020px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151559 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.6a3cbf74437e460ba4f884eb05cee863.jpg\" alt=\"Tema Classic\" width=\"1020\" height=\"660\"><figcaption id=\"caption-attachment-151559\" class=\"wp-caption-text\">Tema Classic<\/figcaption><\/figure>\n<h4>Paso 7: Considera la Posibilidad de Crear un Tema Personalizado<\/h4>\n<p>El plugin Enlighter proporciona una pesta\u00f1a dentro del <a href=\"https:\/\/kinsta.com\/es\/blog\/panel-control-administracion-wordpress\/\">panel de control de WordPress<\/a> para personalizar todos los aspectos del plugin y sus funciones destacadas.<\/p>\n<p>Para tener un control total sobre el dise\u00f1o y la visualizaci\u00f3n de tus cuadros de c\u00f3digo, ve a la pesta\u00f1a <strong>Enlighter<\/strong> (icono &lt;&gt;) y, a continuaci\u00f3n, elige <strong>Appearance<\/strong> o <strong>Theme<\/strong>\u00a0<strong>Customizer.<\/strong><\/p>\n<figure id=\"attachment_151560\" aria-describedby=\"caption-attachment-151560\" style=\"width: 903px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151560 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.dae7a301ff6c4263b7608ef0fa6d8266.jpg\" alt=\"Personalizador de temas\" width=\"903\" height=\"474\"><figcaption id=\"caption-attachment-151560\" class=\"wp-caption-text\">Personalizador de temas<\/figcaption><\/figure>\n<p>La pesta\u00f1a <strong>Appearance<\/strong>\u00a0te permite elegir un tema est\u00e1ndar a la vez que te da acceso a ajustar elementos como:<\/p>\n<ul>\n<li>Sangr\u00eda del c\u00f3digo<\/li>\n<li>Desbordamiento de texto<\/li>\n<li>Numeraci\u00f3n de l\u00edneas<\/li>\n<li>Efecto de salto de l\u00ednea<\/li>\n<li>C\u00f3digo RAW al hacer doble clic<\/li>\n<\/ul>\n<figure id=\"attachment_151561\" aria-describedby=\"caption-attachment-151561\" style=\"width: 1083px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151561 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.abcba1aae5c04c278f1b59b5768b3aa3.jpg\" alt=\"Secci\u00f3n Apariencia del personalizador de temas\" width=\"1083\" height=\"830\"><figcaption id=\"caption-attachment-151561\" class=\"wp-caption-text\">Secci\u00f3n Apariencia del personalizador de temas<\/figcaption><\/figure>\n<p>La secci\u00f3n <strong>Theme<\/strong>\u00a0<strong>Customizer<\/strong>\u00a0incluye una larga lista de pesta\u00f1as para crear un tema de resaltador de c\u00f3digo desde cero, con opciones para ajustar botones, expresiones, idiomas y mucho m\u00e1s.<\/p>\n<figure id=\"attachment_151562\" aria-describedby=\"caption-attachment-151562\" style=\"width: 987px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151562 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.e9cf6edb95b34a5ebb1771e2491ad782.jpg\" alt=\"Ajustes adicionales\" width=\"987\" height=\"865\"><figcaption id=\"caption-attachment-151562\" class=\"wp-caption-text\">Ajustes adicionales<\/figcaption><\/figure>\n<h4>Bonus: Usar Enlighter con el Editor Cl\u00e1sico<\/h4>\n<p>El plugin Enlighter funciona de forma ligeramente diferente para los que a\u00fan utilizan el Editor Cl\u00e1sico de WordPress.<\/p>\n<p>Una vez que hayas instalado el plugin Enlighter, ve a cualquier entrada o p\u00e1gina y busca el bot\u00f3n <strong>Insertar c\u00f3digo Enlighter<\/strong> en el panel de control del editor.<\/p>\n<figure id=\"attachment_151563\" aria-describedby=\"caption-attachment-151563\" style=\"width: 969px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151563 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.58a5cf5f681c4e638286491be211f678.jpg\" alt=\"Enlighter Code Insert\" width=\"969\" height=\"434\"><figcaption id=\"caption-attachment-151563\" class=\"wp-caption-text\">Enlighter Code Insert<\/figcaption><\/figure>\n<p>Aparecer\u00e1 una nueva ventana llamada <strong>Enlighter Code Insert<\/strong>.<\/p>\n<p>Pega el c\u00f3digo que quieras mostrar en el campo grande (sin etiquetar) de la parte inferior.<\/p>\n<figure id=\"attachment_151564\" aria-describedby=\"caption-attachment-151564\" style=\"width: 985px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151564 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.169682da2f0f4a80b61a2e195331cedf.jpg\" alt=\"Pega el c\u00f3digo\" width=\"985\" height=\"795\"><figcaption id=\"caption-attachment-151564\" class=\"wp-caption-text\">Pega el c\u00f3digo<\/figcaption><\/figure>\n<p>Haz clic en el men\u00fa desplegable del campo <strong>Lenguaje<\/strong> para seleccionar el lenguaje de programaci\u00f3n adecuado.<\/p>\n<figure id=\"attachment_151565\" aria-describedby=\"caption-attachment-151565\" style=\"width: 983px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151565 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.a9bc4bc75c3941d0a18f51012154c107.jpg\" alt=\"Elige un lenguaje\" width=\"983\" height=\"660\"><figcaption id=\"caption-attachment-151565\" class=\"wp-caption-text\">Elige un lenguaje<\/figcaption><\/figure>\n<p>Cuando hayas terminado, haz clic en el bot\u00f3n <strong>OK<\/strong>. Tambi\u00e9n puedes hacer ajustes en las otras caracter\u00edsticas de esa ventana, como a\u00f1adir sangr\u00eda de l\u00ednea.<\/p>\n<figure id=\"attachment_151566\" aria-describedby=\"caption-attachment-151566\" style=\"width: 980px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151566 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.34dcd4d4658c4c5b849bbc0271526d65.jpg\" alt=\"Ejemplo de sangr\u00eda de l\u00ednea\" width=\"980\" height=\"623\"><figcaption id=\"caption-attachment-151566\" class=\"wp-caption-text\">Ejemplo de sangr\u00eda de l\u00ednea<\/figcaption><\/figure>\n<p>Haz clic en el bot\u00f3n <strong>Publish<\/strong>\u00a0para la entrada y, a continuaci\u00f3n, visualiza los resultados en el frontend. El cuadro de c\u00f3digo por defecto del Editor cl\u00e1sico es un tema oscuro, pero puedes cambiar el aspecto de tu cuadro de c\u00f3digo e incluso crear tus propios temas.<\/p>\n<figure id=\"attachment_151567\" aria-describedby=\"caption-attachment-151567\" style=\"width: 922px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151567 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.3a8933d9ff7049568e8e0145998c0410.jpg\" alt=\"Versi\u00f3n publicada\" width=\"922\" height=\"743\"><figcaption id=\"caption-attachment-151567\" class=\"wp-caption-text\">Versi\u00f3n publicada<\/figcaption><\/figure>\n<h3>M\u00e9todo 3: Utilizar una Herramienta de Codificaci\u00f3n<\/h3>\n<p>Las herramientas de codificaci\u00f3n sirven como opciones alternativas cuando intentas mostrar c\u00f3digo en WordPress, especialmente si no tienes intenci\u00f3n de hacerlo tan a menudo (y prefieres no complicarte con un plugin).<\/p>\n<p>Los codificadores HTML preservan la integridad de los formatos de c\u00f3digo, en particular los que contienen caracteres especiales y tabulaciones. Los codificadores pueden manejar todo tipo de c\u00f3digo, pero luego traducen el c\u00f3digo insertado en c\u00f3digo listo para HTML que es f\u00e1cil de pegar en WordPress.<\/p>\n<p>No existen herramientas codificadoras fiables como plugins, pero muchas se ofrecen como aplicaciones web gratuitas de terceros. Ten en cuenta tambi\u00e9n que las herramientas de codificaci\u00f3n no ofrecen ninguna herramienta de estilo, por lo que s\u00f3lo recibir\u00e1s el c\u00f3digo tal y como se supone que debe mostrarse (sin recuadros extravagantes ni funciones de personalizaci\u00f3n de l\u00edneas).<\/p>\n<p>Algunas herramientas de codificaci\u00f3n fiables son:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3docs.com\/tools\/html-encoder\/\" target=\"_blank\" rel=\"noopener noreferrer\">Codificador HTML W3Docs<\/a><\/li>\n<li><a href=\"https:\/\/www.opinionatedgeek.com\/codecs\/htmlencoder\" target=\"_blank\" rel=\"noopener noreferrer\">Codificador HTML de Opinionated Geek<\/a><\/li>\n<li><a href=\"https:\/\/www.web2generators.com\/html-based-tools\/online-html-entities-encoder-and-decoder\" target=\"_blank\" rel=\"noopener noreferrer\">Codificador y Decodificador HTML Web2Generators<\/a><\/li>\n<\/ul>\n<p>Seg\u00fan nuestras pruebas, la herramienta de codificaci\u00f3n m\u00e1s eficaz es el Codificador HTML W3Docs, as\u00ed que lo utilizaremos para este tutorial.<\/p>\n<h4>Paso 1: Abrir el Codificador y Elegir la Configuraci\u00f3n<\/h4>\n<p>Ve al sitio web de W3Docs HTML Encoder.<\/p>\n<p>La p\u00e1gina muestra dos recuadros uno al lado del otro. El de la izquierda es donde debes pegar tu c\u00f3digo. El de la derecha muestra la versi\u00f3n codificada para copiar y pegar en WordPress.<\/p>\n<p>Sin embargo, primero debes establecer qu\u00e9 tipo de c\u00f3digo quieres conservar:<\/p>\n<ul>\n<li>Elige <strong>JavaScript unicode<\/strong> si pegas c\u00f3digo con elementos JavaScript.<\/li>\n<li>Elige <strong>HTML symbols<\/strong>\u00a0si utilizas HTML.<\/li>\n<\/ul>\n<figure id=\"attachment_151568\" aria-describedby=\"caption-attachment-151568\" style=\"width: 1155px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151568 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b4cf25bd90b44faea5a06da55310d33a.jpg\" alt=\"Elige HTML symbols \" width=\"1155\" height=\"718\"><figcaption id=\"caption-attachment-151568\" class=\"wp-caption-text\">Elige HTML symbols<\/figcaption><\/figure>\n<h4>Paso 2: Pega y Haz clic para Codificar<\/h4>\n<p>Pega el c\u00f3digo que quieras mostrar en WordPress en el campo de la izquierda. Luego busca y haz clic en el bot\u00f3n <strong>Encode<\/strong>\u00a0arriba a la derecha.<\/p>\n<figure id=\"attachment_151569\" aria-describedby=\"caption-attachment-151569\" style=\"width: 1147px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151569 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.be543787ffbc49ea966242ac15528658.jpg\" alt=\"Haz clic para codificar\" width=\"1147\" height=\"621\"><figcaption id=\"caption-attachment-151569\" class=\"wp-caption-text\">Haz clic para codificar<\/figcaption><\/figure>\n<h4>Paso 3: Copia el Resultado Descodificado<\/h4>\n<p>El producto final puede parecer confuso, pero en realidad es una combinaci\u00f3n de elementos HTML para conservar todos los aspectos del c\u00f3digo que has insertado, todo ello sin hacer que el c\u00f3digo se active y muestre otra cosa en el frontend.<\/p>\n<p>Haz clic en el bot\u00f3n <strong>Copy<\/strong>.<\/p>\n<figure id=\"attachment_151570\" aria-describedby=\"caption-attachment-151570\" style=\"width: 1156px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151570 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4a0e251ebf094c2da66953dcbb53bbf2.jpg\" alt=\"Copia el c\u00f3digo\" width=\"1156\" height=\"623\"><figcaption id=\"caption-attachment-151570\" class=\"wp-caption-text\">Copia el c\u00f3digo<\/figcaption><\/figure>\n<h4>Paso 4: Pega el HTML Codificado en el Editor de C\u00f3digo o de Texto de WordPress<\/h4>\n<p>Vuelve a WordPress y abre la entrada o p\u00e1gina deseada.<\/p>\n<p>Selecciona el elemento de men\u00fa <strong>Options<\/strong> (tres puntos verticales) en la esquina superior derecha. Haz clic en la opci\u00f3n <strong>Code<\/strong>\u00a0<strong>Editor<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>No intentes utilizar el bloque HTML personalizado para este proceso, ya que no parece funcionar.<\/p>\n<\/aside>\n\n<figure id=\"attachment_151571\" aria-describedby=\"caption-attachment-151571\" style=\"width: 1087px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151571 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4eb099a1c6eb417bb897b6a0eb5a333a.jpg\" alt=\"Ve al men\u00fa Options\" width=\"1087\" height=\"613\"><figcaption id=\"caption-attachment-151571\" class=\"wp-caption-text\">Ve al men\u00fa Options<\/figcaption><\/figure>\n<p>Ahora ver\u00e1s el <strong>Code<\/strong>\u00a0<strong>Editor<\/strong>\u00a0en lugar del Editor de Bloques visual. Busca el \u00e1rea en la que deseas mostrar el c\u00f3digo y pega tu HTML codificado en el editor.<\/p>\n<figure id=\"attachment_151572\" aria-describedby=\"caption-attachment-151572\" style=\"width: 901px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151572 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b5990861f47e46a3ab2b929258a7f630.jpg\" alt=\"Pegar HTML codificado\" width=\"901\" height=\"870\"><figcaption id=\"caption-attachment-151572\" class=\"wp-caption-text\">Pegar HTML codificado<\/figcaption><\/figure>\n<p>Si est\u00e1s utilizando el editor cl\u00e1sico de WordPress, debes ir a la pesta\u00f1a Texto, que es la misma que el Editor de c\u00f3digo del Editor de bloques de Gutenberg.<\/p>\n<figure id=\"attachment_151573\" aria-describedby=\"caption-attachment-151573\" style=\"width: 967px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151573 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b8d500e6d84b435a851a50cda8ea61c9.jpg\" alt=\"Pesta\u00f1a Texto\" width=\"967\" height=\"736\"><figcaption id=\"caption-attachment-151573\" class=\"wp-caption-text\">Pesta\u00f1a Texto<\/figcaption><\/figure>\n<h4>Paso 5: Publicar y Ver el C\u00f3digo<\/h4>\n<p>Haz clic en <strong>Actualizar<\/strong> o <strong>Publicar<\/strong> en la entrada y, a continuaci\u00f3n, navega hasta el frontend de esa entrada para ver c\u00f3mo queda.<\/p>\n<p>Deber\u00edas ver el c\u00f3digo original que se peg\u00f3 en el codificador, antes de que la herramienta a\u00f1adiera elementos de codificaci\u00f3n HTML. Como se ha mencionado, no hay ninguna funci\u00f3n de estilo con los codificadores, por lo que este es un m\u00e9todo maravilloso para una apariencia limpia y minimalista.<\/p>\n<figure id=\"attachment_151574\" aria-describedby=\"caption-attachment-151574\" style=\"width: 1083px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151574 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.321fb9938cf84a1c8308d32fc211b121.jpg\" alt=\"C\u00f3digo publicado\" width=\"1083\" height=\"808\"><figcaption id=\"caption-attachment-151574\" class=\"wp-caption-text\">C\u00f3digo publicado<\/figcaption><\/figure>\n<h3>M\u00e9todo 4: Utilizar un Shortcode Personalizado<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/es\/blog\/codigos-cortos-wordpress\/\">Crear un shortcode personalizado<\/a> hace el trabajo de insertar trozos de c\u00f3digo reutilizable sin que tengas que copiar y pegar. Por eso los shortcodes personalizados ofrecen una s\u00f3lida oportunidad para mostrar c\u00f3digo en WordPress.<\/p>\n<p>Estas son las ventajas de utilizar shortcodes personalizados para mostrar c\u00f3digo:<\/p>\n<ol>\n<li>Los c\u00f3digos cortos personalizados te permiten guardar c\u00f3digo complicado una vez, y luego reutilizarlo, eliminando la necesidad de escribir fragmentos de c\u00f3digo m\u00e1s largos cada vez.<\/li>\n<li>Puedes escribir tu propio estilo <a href=\"https:\/\/kinsta.com\/es\/blog\/buenas-practicas-css\/\">CSS<\/a> para los resaltadores de c\u00f3digo y los cuadros.<\/li>\n<li>Los shortcodes se pueden utilizar por cualquiera, de modo que otros colaboradores pueden aprovechar tus resaltadores y bloques de c\u00f3digo con s\u00f3lo pulsar un bot\u00f3n.<\/li>\n<\/ol>\n<p>Crear un shortcode personalizado requiere experiencia editando <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-un-tema-de-wordpress\/#whats-inside-those-wordpress-files\">archivos de temas de WordPress<\/a>, <a href=\"https:\/\/kinsta.com\/es\/blog\/php-editor\/\">trabajando con c\u00f3digo PHP<\/a> y, potencialmente, creando plugins de WordPress. Debido a estos requisitos, crear un shortcode personalizado para WordPress puede ser dif\u00edcil para los que no tienen conocimientos de PHP.<\/p>\n<p>Sin embargo, el producto final resulta una forma significativamente m\u00e1s f\u00e1cil de mostrar c\u00f3digo en WordPress.<\/p>\n<figure id=\"attachment_151575\" aria-describedby=\"caption-attachment-151575\" style=\"width: 1558px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151575 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.2e11bbe71e8244aaa8d5ecc5d61c3bab.jpg\" alt=\"Shortcode HTML\" width=\"1558\" height=\"842\"><figcaption id=\"caption-attachment-151575\" class=\"wp-caption-text\">Shortcode HTML<\/figcaption><\/figure>\n<p>Puedes dar al shortcode personalizado el nombre que quieras y crear varias opciones, como <code>[html] [\/html]<\/code> y <code>[css] [\/css]<\/code>, para diferentes lenguajes de programaci\u00f3n.<\/p>\n<figure id=\"attachment_151576\" aria-describedby=\"caption-attachment-151576\" style=\"width: 1647px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151576 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.85e96f67d4374def86be5d930973f276.jpg\" alt=\"Shortcode CSS\" width=\"1647\" height=\"714\"><figcaption id=\"caption-attachment-151576\" class=\"wp-caption-text\">Shortcode CSS<\/figcaption><\/figure>\n<p>Ten en cuenta que los shortcodes personalizados funcionan mejor para resaltar la sintaxis cuando utilizas el <strong>Editor de<\/strong> <strong>texto<\/strong> (en WordPress Cl\u00e1sico) o el cuadro de <strong>HTML<\/strong> <strong>personalizado<\/strong> cuando trabajas con el Editor de bloques de WordPress Gutenberg.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>El bloque Shortcode de Gutenberg es una opci\u00f3n, pero durante nuestras pruebas, algunos fragmentos de c\u00f3digo perdieron elementos de formato o caracteres clave.<\/p>\n<\/aside>\n\n<figure id=\"attachment_151577\" aria-describedby=\"caption-attachment-151577\" style=\"width: 1063px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151577 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b5305f76b1754513b54ee4fd2a41e41e.jpg\" alt=\"Editor de texto\" width=\"1063\" height=\"534\"><figcaption id=\"caption-attachment-151577\" class=\"wp-caption-text\">Editor de texto<\/figcaption><\/figure>\n<p>El objetivo es crear un shortcode personalizado en el que puedas escribir o pegar c\u00f3digo entre las etiquetas de apertura y cierre del shortcode.<\/p>\n<figure id=\"attachment_151578\" aria-describedby=\"caption-attachment-151578\" style=\"width: 1487px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151578 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.557a5f43cf8d4950ac2bc4212f6aa73b.jpg\" alt=\"C\u00f3digo pegado dentro de HTML shortcode para mostrar el c\u00f3digo en WordPress\" width=\"1487\" height=\"834\"><figcaption id=\"caption-attachment-151578\" class=\"wp-caption-text\">C\u00f3digo pegado dentro del shortcode HTML<\/figcaption><\/figure>\n<p>Una vez publicado, los ajustes de estilo y resaltado de tu shortcode personalizado se muestran en el frontend. Y el c\u00f3digo que has a\u00f1adido se muestra muy bien dentro del resaltador de sintaxis.<\/p>\n<figure id=\"attachment_151579\" aria-describedby=\"caption-attachment-151579\" style=\"width: 1357px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151579 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.1123bc1ac4c34faab9809ce3826b2cc9.jpg\" alt=\"Vista frontend para mostrar el c\u00f3digo en WordPress\" width=\"1357\" height=\"897\"><figcaption id=\"caption-attachment-151579\" class=\"wp-caption-text\">Vista frontend<\/figcaption><\/figure>\n<h3>M\u00e9todo 5: Usar Etiquetas <code><code><\/code>&lt;code&gt; and &lt;pre&gt;<\/code><\/h3>\n<p>Tal vez la forma m\u00e1s antigua \u2014 pero a\u00fan incre\u00edblemente fiable \u2014 de mostrar c\u00f3digo en WordPress sea simplemente a\u00f1adiendo etiquetas HTML espec\u00edficas alrededor del fragmento de c\u00f3digo. Este m\u00e9todo es el mejor para cuando trabajas con el editor cl\u00e1sico de WordPress, o en cualquier editor HTML.<\/p>\n<p>Hay dos opciones:<\/p>\n<ol>\n<li><strong><code>&lt;code&gt;<\/code> etiquetas:<\/strong> Lo mejor para mostrar una l\u00ednea corta de c\u00f3digo; se utiliza a menudo dentro de los p\u00e1rrafos<\/li>\n<li><strong><code>&lt;pre&gt;<\/code> etiquetas:<\/strong> Ideal para bloques de c\u00f3digo m\u00e1s largos, o cuando quieras m\u00e1s opciones de formato<\/li>\n<\/ol>\n<h4>Opci\u00f3n 1: Utiliza Etiquetas <code>&lt;code&gt;<\/code> para Fragmentos de C\u00f3digo Inline<\/h4>\n<p>Los creadores de contenidos que escriben sobre programaci\u00f3n no siempre quieren utilizar grandes bloques de c\u00f3digo. A veces tiene m\u00e1s sentido incluir un fragmento r\u00e1pido de c\u00f3digo dentro de un p\u00e1rrafo.<\/p>\n<p>Sin embargo, tienes que resaltar y conservar el formato de ese c\u00f3digo. Y cierto c\u00f3digo puede causar problemas con el contenido circundante si no se conserva adecuadamente.<\/p>\n<figure id=\"attachment_151580\" aria-describedby=\"caption-attachment-151580\" style=\"width: 908px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151580 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.103e5a059b524aa0aa00957a007800de.jpg\" alt=\"Una etiqueta &lt;br&gt;\" width=\"908\" height=\"371\"><figcaption id=\"caption-attachment-151580\" class=\"wp-caption-text\">Una etiqueta de interrupci\u00f3n<\/figcaption><\/figure>\n<p>Por ejemplo, la etiqueta <code>&lt;br&gt;<\/code> \u2014 sin las etiquetas <code>&lt;code&gt;<\/code>, simplemente a\u00f1adir\u00eda una salto a tu p\u00e1rrafo.<\/p>\n<figure id=\"attachment_151581\" aria-describedby=\"caption-attachment-151581\" style=\"width: 1020px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151581 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.a191cc69e4594c76acf394a546c9a1ed.jpg\" alt=\"Una salto no deseado\" width=\"1020\" height=\"390\"><figcaption id=\"caption-attachment-151581\" class=\"wp-caption-text\">Un salto no deseado<\/figcaption><\/figure>\n<p>Colocando la programaci\u00f3n dentro de estas etiquetas se obtiene un resultado mucho m\u00e1s limpio:<\/p>\n<pre><code class=\"language-html\"><code>&lt;code&gt; &lt;\/code&gt;<\/code><\/code><\/pre>\n<p>Para ello, abre una entrada de WordPress y activa el <strong>Editor de c\u00f3digo <\/strong>(para el Editor de bloques de Gutenberg) o el <strong>Editor de<\/strong> <strong>texto<\/strong> (si utilizas WordPress cl\u00e1sico).<\/p>\n<p>Pega o escribe estas etiquetas en alg\u00fan lugar del editor; no insertes todav\u00eda el c\u00f3digo que quieres mostrar. En su lugar, a\u00f1ade un espacio entre las etiquetas.<\/p>\n<p><code class=\"language-html\"><code>&lt;code&gt; &lt;\/code&gt;<\/code><\/code><\/p>\n<figure id=\"attachment_151582\" aria-describedby=\"caption-attachment-151582\" style=\"width: 1111px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151582 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.e37032a750ae40dbb0bae105f49375bc.jpg\" alt=\"Espacio entre etiquetas de c\u00f3digo\" width=\"1111\" height=\"313\"><figcaption id=\"caption-attachment-151582\" class=\"wp-caption-text\">Espacio entre etiquetas de c\u00f3digo<\/figcaption><\/figure>\n<p>Cambia al <strong>Editor<\/strong> <strong>Visual<\/strong> (independientemente de si est\u00e1s en Gutenberg o en WordPress cl\u00e1sico).<\/p>\n<p>Ver\u00e1s un peque\u00f1o espacio gris dentro del contenido visual. Haz clic para colocar el cursor dentro de ese espacio gris. Aqu\u00ed es donde puedes pegar o escribir el c\u00f3digo para la visualizaci\u00f3n.<\/p>\n<figure id=\"attachment_151583\" aria-describedby=\"caption-attachment-151583\" style=\"width: 988px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151583 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.749a378741b34258a4a3c94dcd4e5455.jpg\" alt=\"Espacio gris para escribir el c\u00f3digo\" width=\"988\" height=\"280\"><figcaption id=\"caption-attachment-151583\" class=\"wp-caption-text\">Espacio gris para escribir el c\u00f3digo<\/figcaption><\/figure>\n<p>A medida que escribes, el espacio gris se expande para acomodar el fragmento de c\u00f3digo. Pulsa el bot\u00f3n <strong>Publicar<\/strong> o <strong>Actualizar<\/strong> para esa entrada.<\/p>\n<figure id=\"attachment_151584\" aria-describedby=\"caption-attachment-151584\" style=\"width: 1019px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151584 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.132a0f507095471dbc4bf516bba70787.jpg\" alt=\"Escribir c\u00f3digo en el espacio gris\" width=\"1019\" height=\"367\"><figcaption id=\"caption-attachment-151584\" class=\"wp-caption-text\">Escribir c\u00f3digo en el espacio gris<\/figcaption><\/figure>\n<p>En el frontend de la entrada, ahora ver\u00e1s el c\u00f3digo conservado como debe ser, y sin ninguna actividad extra\u00f1a (como a\u00f1adir un salto a tu contenido).<\/p>\n<figure id=\"attachment_151585\" aria-describedby=\"caption-attachment-151585\" style=\"width: 1163px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151585 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.3034b84bc11f4511b65cb87a74b4e92d.jpg\" alt=\"La etiqueta de salto de l\u00ednea mostrada sin a\u00f1adir realmente un salto\" width=\"1163\" height=\"449\"><figcaption id=\"caption-attachment-151585\" class=\"wp-caption-text\">La etiqueta de salto de l\u00ednea mostrada sin a\u00f1adir realmente un salto<\/figcaption><\/figure>\n<p>El formato de estas etiquetas <code>&lt;code&gt;<\/code> suele ser b\u00e1sico, pero a menudo depende del estilo de tu tema. Por ejemplo, nuestro ejemplo s\u00f3lo cambia la fuente pero no incluye un fondo gris.<\/p>\n<h4>Opci\u00f3n 2: Utiliza Etiquetas <code>&lt;pre&gt;<\/code> para Bloques de C\u00f3digo m\u00e1s Largos<\/h4>\n<p>Los fragmentos de c\u00f3digo m\u00e1s largos merecen sus propios bloques, separados del contenido que est\u00e9s escribiendo en p\u00e1rrafos. Para ellos, te recomendamos que utilices las etiquetas <code>&lt;pre&gt;<\/code>.<\/p>\n<p>El proceso de a\u00f1adir una etiqueta <code>&lt;pre&gt;<\/code> es igual que con las etiquetas <code>&lt;code&gt;<\/code>, pero tienes m\u00e1s espacio para trabajar a la hora de insertar tu c\u00f3digo.<\/p>\n<p>Ve a una entrada y abre el editor de <strong>C\u00f3digo<\/strong> (Gutenberg) o de <strong>Texto<\/strong> (WordPress cl\u00e1sico). Pega o escribe el c\u00f3digo que quieras mostrar. A continuaci\u00f3n, rodea el c\u00f3digo con estas etiquetas:<\/p>\n<p><code>&lt;pre&gt; &lt;\/pre&gt;<\/code><\/p>\n<figure id=\"attachment_151586\" aria-describedby=\"caption-attachment-151586\" style=\"width: 1099px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151586 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.d24206ad63c045479f1ad67aa2e5ae5d.jpg\" alt=\"Etiquetas pre para mostrar el c\u00f3digo de WordPress\" width=\"1099\" height=\"596\"><figcaption id=\"caption-attachment-151586\" class=\"wp-caption-text\">Etiquetas pre para mostrar el c\u00f3digo de WordPress<\/figcaption><\/figure>\n<p>Cambia al editor <strong>Visual<\/strong> para ver qu\u00e9 aspecto tiene. Observar\u00e1s que la secci\u00f3n de texto tendr\u00e1 una etiqueta \u00bb <strong>Preformateado<\/strong> \u00ab, que es precisamente lo que pretende hacer la etiqueta <code>&lt;pre&gt;<\/code>.<\/p>\n<figure id=\"attachment_151587\" aria-describedby=\"caption-attachment-151587\" style=\"width: 1021px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151587 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.4bc9f2cabf7b45aeba2da63e5bd1f96f.jpg\" alt=\"Elige la opci\u00f3n preformateado\" width=\"1021\" height=\"450\"><figcaption id=\"caption-attachment-151587\" class=\"wp-caption-text\">Elige la opci\u00f3n preformateado<\/figcaption><\/figure>\n<p>Haz clic en <strong>Publicar<\/strong> o <strong>Actualizar<\/strong> y, a continuaci\u00f3n, cambia al frontend para ver tu c\u00f3digo en su forma original. Al igual que las etiquetas <code>&lt;code&gt;<\/code>, las etiquetas <code>&lt;pre&gt;<\/code> son p\u00e9simas con el formato, por lo que te quedas con el aspecto m\u00e1s simple posible. Sin embargo, hay formas de estilizarlas t\u00fa mismo.<\/p>\n<figure id=\"attachment_151588\" aria-describedby=\"caption-attachment-151588\" style=\"width: 1177px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151588 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.12b9304ed5de42298a6474f01813d716.jpg\" alt=\"Resultados del frontend para mostrar el c\u00f3digo en WordPress\" width=\"1177\" height=\"759\"><figcaption id=\"caption-attachment-151588\" class=\"wp-caption-text\">Resultados del frontend<\/figcaption><\/figure>\n<h5>Consejos para Estilizar las Etiquetas &lt;pre<\/h5>\n<p>Las etiquetas <code>&lt;pre&gt;<\/code> son menos estables que las etiquetas <code>&lt;code&gt;<\/code>, por lo que puedes encontrar dificultades dependiendo del tipo de c\u00f3digo que intentes mostrar.<\/p>\n<p>Utiliza estos consejos para mejorar su aspecto:<\/p>\n<ul>\n<li>Haz lo posible por eliminar, o evitar por completo, los saltos de l\u00ednea, ya que la etiqueta <code>&lt;pre&gt;<\/code> a menudo no los reconoce. En general, responde mal a demasiados saltos de l\u00ednea.<\/li>\n<li>Considera la posibilidad de a\u00f1adir una propiedad <code>overflow-x:auto;<\/code> en tu CSS para a\u00f1adir funcionalidad de desplazamiento al c\u00f3digo de la etiqueta <code>&lt;pre&gt;<\/code>. Esto ayuda con el contenido desbordante, ya que la etiqueta <code>&lt;pre&gt;<\/code> por s\u00ed misma deja que tu c\u00f3digo se salga de la p\u00e1gina.<\/li>\n<li>Utiliza fuentes monoespaciadas.<\/li>\n<\/ul>\n<p>Tambi\u00e9n puedes estilizar el formato del texto y la caja detr\u00e1s del c\u00f3digo. Aqu\u00ed tienes una plantilla de inicio que puedes <a href=\"https:\/\/kinsta.com\/es\/blog\/editar-codigo-wordpress\/\">a\u00f1adir a tu archivo CSS<\/a>:<\/p>\n<pre><code class=\"language-css\">article pre{\nbackground:#ffffff;\nborder:3px #eee solid;\nborder-top:30px #eee solid;\nfont-family:Consolas, courier;\nfont-size:0.8em;\nwhite-space:pre;\noverflow-x:auto;\n}<\/code><\/pre>\n<h3>M\u00e9todo 6: Utilizar un Editor Markdown que se Conecte a WordPress<\/h3>\n<p>Los editores Markdown ofrecen la posibilidad no s\u00f3lo de escribir y formatear m\u00e1s r\u00e1pido, sino que muchos de ellos se conectan directamente a WordPress para publicar al instante directamente desde el editor.<\/p>\n<p>Muchos escritores recurren a los editores Markdown debido a este r\u00e1pido proceso de creaci\u00f3n de contenidos. Y por suerte, algunos de esos editores ofrecen markdown para bloques de c\u00f3digo, lo que significa que puedes mostrar c\u00f3digo dentro del editor markdown, y luego enviarlo directamente a WordPress para su publicaci\u00f3n.<\/p>\n<p>Ten en cuenta que los <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-editores-texto\/\">editores de texto normales<\/a> (como <a href=\"https:\/\/kinsta.com\/es\/blog\/como-usar-sublime-text\/\">Sublime Text<\/a>) no preservan la integridad del c\u00f3digo cuando se transfiere para su publicaci\u00f3n en WordPress. Y los <a href=\"https:\/\/kinsta.com\/es\/blog\/editores-html-gratuitos\/\">editores HTML<\/a>, aunque son excelentes para escribir y almacenar c\u00f3digo, tampoco proporcionan las funciones de resaltado necesarias para preservar el c\u00f3digo para su publicaci\u00f3n en WordPress.<\/p>\n<p>Hay <a href=\"https:\/\/kinsta.com\/es\/blog\/editores-markdown\/\">muchos editores de markdown<\/a> entre los que elegir, pero las soluciones ideales comparten dos caracter\u00edsticas:<\/p>\n<ol>\n<li>Exportaci\u00f3n directa a WordPress<\/li>\n<li>Markdown para resaltar el c\u00f3digo<\/li>\n<\/ol>\n<p>Sin embargo, puedes optar por un editor markdown con exportaci\u00f3n HTML, si no te gusta la exportaci\u00f3n directa a WordPress.<\/p>\n<p>Los mejores editores de markdown con ambas funciones son:<\/p>\n<ul>\n<li><a href=\"https:\/\/ulysses.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ulysses<\/a> (Mac e iOS)<\/li>\n<li><a href=\"https:\/\/bywordapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">ByWord<\/a> (Mac e iOS)<\/li>\n<li><a href=\"https:\/\/obsidian.md\/\" target=\"_blank\" rel=\"noopener noreferrer\">Obsidian<\/a> (Mac, Windows, Linux y m\u00e1s)<\/li>\n<\/ul>\n<p>Ulysses y ByWord son aplicaciones de pago, mientras que Obsidian tiene versiones gratuitas y de pago.<\/p>\n<p>Para el siguiente tutorial, utilizaremos Ulysses.<\/p>\n<h4>Paso 1: A\u00f1adir un Bloque de C\u00f3digo Longform en Ulysses<\/h4>\n<p>Mientras redactas un documento en Ulysses, escribe <code>\"<\/code> markdown \u2014 eso son dos ap\u00f3strofes \u2014 siempre que quieras a\u00f1adir inmediatamente un bloque de resaltado de c\u00f3digo dentro de un documento.<\/p>\n<p>Este m\u00e9todo markdown es para bloques de c\u00f3digo m\u00e1s largos. No se puede utilizar en medio de un p\u00e1rrafo, por lo que debes crear una nueva l\u00ednea para que se active el marcado.<\/p>\n<figure id=\"attachment_151589\" aria-describedby=\"caption-attachment-151589\" style=\"width: 2000px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151589 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/Gif-for-code-block.14390a79e7064955b03f88869ec1ffee.gif\" alt=\"Marcador de c\u00f3digo Ulysses\" width=\"2000\" height=\"1126\"><figcaption id=\"caption-attachment-151589\" class=\"wp-caption-text\">Marcador de c\u00f3digo Ulysses<\/figcaption><\/figure>\n<p>Una vez que aparezca el resaltador de c\u00f3digo, puedes escribir o pegar en \u00e9l lo que quieras.<\/p>\n<figure id=\"attachment_151590\" aria-describedby=\"caption-attachment-151590\" style=\"width: 1015px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151590 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b5f94d159066484fb7b70b16a1c3c73a.jpg\" alt=\"Pegar para mostrar el c\u00f3digo en WordPress en el resaltador de Ulysses\" width=\"1015\" height=\"543\"><figcaption id=\"caption-attachment-151590\" class=\"wp-caption-text\">Pegar c\u00f3digo en el resaltador de Ulysses<\/figcaption><\/figure>\n<p>Otra forma de activar el bloque de c\u00f3digo es hacer clic en el elemento de men\u00fa <strong>Markdown<\/strong> (tres puntos horizontales) y seleccionar la opci\u00f3n <strong>C\u00f3digo<\/strong>.<\/p>\n<figure id=\"attachment_151592\" aria-describedby=\"caption-attachment-151592\" style=\"width: 937px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151592 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.81ab2e958f054c0798abc43d606aca57.jpg\" alt=\"Utiliza el men\u00fa Markdown para seleccionar la opci\u00f3n C\u00f3digo\" width=\"937\" height=\"398\"><figcaption id=\"caption-attachment-151592\" class=\"wp-caption-text\">Utiliza el men\u00fa Markdown para seleccionar la opci\u00f3n C\u00f3digo<\/figcaption><\/figure>\n<p>Despu\u00e9s de hacer clic en ese elemento del men\u00fa, el campo del resaltador de c\u00f3digo aparece donde haya estado el cursor por \u00faltima vez.<\/p>\n<figure id=\"attachment_151593\" aria-describedby=\"caption-attachment-151593\" style=\"width: 977px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151593 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.41e360b297fd4c60be68ccb8bcf0cccf.jpg\" alt=\"Resaltador de c\u00f3digo vac\u00edo\" width=\"977\" height=\"285\"><figcaption id=\"caption-attachment-151593\" class=\"wp-caption-text\">Resaltador de c\u00f3digo vac\u00edo<\/figcaption><\/figure>\n<p>Para colocar fragmentos de c\u00f3digo dentro de p\u00e1rrafos, recurrir\u00edas al marcado <code>``<\/code> (que parece casi lo mismo, pero en realidad son dos acentos agudos\/graves en lugar de ap\u00f3strofos).<\/p>\n<h4>Paso 3: Exportar a WordPress<\/h4>\n<p>Una vez que tengas listo tu documento, es hora de exportarlo todo a WordPress.<\/p>\n<p>Lo maravilloso de los editores markdown que se conectan con WordPress es que mantienen los bloques de c\u00f3digo durante toda la transferencia. As\u00ed, ver\u00e1s resaltadores de c\u00f3digo bien formateados y listos para publicar en WordPress.<\/p>\n<figure id=\"attachment_151594\" aria-describedby=\"caption-attachment-151594\" style=\"width: 996px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151594 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.59962c045f204e8990253665628656d0.jpg\" alt=\"El resaltador de c\u00f3digo sigue siendo el mismo en WordPress\" width=\"996\" height=\"723\"><figcaption id=\"caption-attachment-151594\" class=\"wp-caption-text\">El resaltador de c\u00f3digo sigue siendo el mismo en WordPress<\/figcaption><\/figure>\n<p>En Ulysses, ve a la parte superior del documento para encontrar la barra de herramientas. Haz clic en el bot\u00f3n <strong>Vista previa de publicaci\u00f3n<\/strong>.<\/p>\n<figure id=\"attachment_151595\" aria-describedby=\"caption-attachment-151595\" style=\"width: 981px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151595 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.927b4b9ed6d54119baebba453248cf41.jpg\" alt=\"Selecciona el bot\u00f3n Vista previa de publicaci\u00f3n para mostrar el c\u00f3digo en WordPress\" width=\"981\" height=\"618\"><figcaption id=\"caption-attachment-151595\" class=\"wp-caption-text\">Selecciona el bot\u00f3n Vista previa de publicaci\u00f3n<\/figcaption><\/figure>\n<p>Aparecer\u00e1 un men\u00fa desplegable para seleccionar una plataforma y un sitio web en el que publicar. Tambi\u00e9n puedes utilizar la opci\u00f3n <strong>Gestionar<\/strong> <strong>Cuentas<\/strong> de ese men\u00fa para iniciar sesi\u00f3n en un sitio web de WordPress antes de exportar.<\/p>\n<p>Una vez que tengas el sitio web adecuado, haz clic en el bot\u00f3n <strong>Publicar<\/strong>.<\/p>\n<figure id=\"attachment_151596\" aria-describedby=\"caption-attachment-151596\" style=\"width: 948px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151596 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.e00fbece9dc94fea8e8a5e63d1336717.jpg\" alt=\"Elige una cuenta y publica\" width=\"948\" height=\"704\"><figcaption id=\"caption-attachment-151596\" class=\"wp-caption-text\">Elige una cuenta y publica<\/figcaption><\/figure>\n<p>Rellena el t\u00edtulo de la publicaci\u00f3n, el horario y cualquier otra informaci\u00f3n que desees, como categor\u00edas, etiquetas e im\u00e1genes destacadas.<\/p>\n<p>La parte m\u00e1s importante, sin embargo, es establecer el <strong>Estado<\/strong> en <strong>Borrador<\/strong> para no publicar la entrada sin revisarla antes en WordPress.<\/p>\n<p>Haz clic en <strong>Aceptar<\/strong> para continuar.<\/p>\n<figure id=\"attachment_151597\" aria-describedby=\"caption-attachment-151597\" style=\"width: 915px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151597 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.b14f638aa5d94d789d323bfc861dafca.jpg\" alt=\"Elige un estado y haz clic en OK para mostrar el c\u00f3digo en WordPress\" width=\"915\" height=\"649\"><figcaption id=\"caption-attachment-151597\" class=\"wp-caption-text\">Elige un estado y haz clic en Aceptar<\/figcaption><\/figure>\n<p>En unos segundos, Ulysses coloca todo el documento en una nueva entrada de WordPress (puede que tengas que iniciar sesi\u00f3n en tu <a href=\"https:\/\/kinsta.com\/es\/blog\/panel-control-administracion-wordpress\/\">administrador de WordPress<\/a> cuando aparezca).<\/p>\n<p>Ver\u00e1s los bloques de c\u00f3digo ya configurados y listos para publicar. Haz clic en el bot\u00f3n <strong>Publicar<\/strong> para ponerlo en marcha.<\/p>\n<figure id=\"attachment_151598\" aria-describedby=\"caption-attachment-151598\" style=\"width: 1202px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151598 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.9b10519d98304e4b83dfefbefe2955fe.jpg\" alt=\"Bloques de c\u00f3digo en el editor de WordPress\" width=\"1202\" height=\"788\"><figcaption id=\"caption-attachment-151598\" class=\"wp-caption-text\">Bloques de c\u00f3digo en el editor de WordPress<\/figcaption><\/figure>\n<p>En el frontend, ver\u00e1s que los fragmentos de c\u00f3digo inline y los bloques de c\u00f3digo m\u00e1s grandes est\u00e1n bien resaltados, y se ha conservado el formato de ese c\u00f3digo.<\/p>\n<figure id=\"attachment_151599\" aria-describedby=\"caption-attachment-151599\" style=\"width: 916px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-151599 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/DraggedImage.7fe2b1887f1644d7a819d9a68d18481b.jpg\" alt=\"Resultados frontend para mostrar c\u00f3digo en WordPress\" width=\"916\" height=\"881\"><figcaption id=\"caption-attachment-151599\" class=\"wp-caption-text\">Resultados del frontend<\/figcaption><\/figure>\n\n<h2>Resumen<\/h2>\n<p>Existen varios m\u00e9todos para mostrar correctamente el c\u00f3digo en WordPress, y a menudo depende del editor de WordPress que se utilice, del lenguaje de c\u00f3digo que quieras mostrar y de c\u00f3mo quieras mostrar y formatear ese c\u00f3digo. Por ejemplo, optar por un plugin proporcionar\u00e1 sin duda una experiencia de formato m\u00e1s creativa que el bloque C\u00f3digo est\u00e1ndar del editor Gutenberg de WordPress.<\/p>\n<p>En este art\u00edculo, cubrimos muchos m\u00e9todos diferentes que ilustran c\u00f3mo mostrar c\u00f3digo en WordPress.<\/p>\n<p>Normalmente recomendamos empezar con el m\u00e9todo 1 e ir avanzando. El m\u00e9todo 2 te servir\u00e1 si buscas m\u00e1s opciones de estilo, y los m\u00e9todos 3-5 s\u00f3lo son \u00fatiles en situaciones concretas. El m\u00e9todo 6 es una especie de soluci\u00f3n extra, pensada para quienes prefieren los editores markdown a escribir directamente en WordPress.<\/p>\n<p>Independientemente del m\u00e9todo que elijas, un <a href=\"https:\/\/kinsta.com\/es\/wordpress-hosting\/\">proveedor de alojamiento fiable<\/a> puede ayudarte a pulir a\u00fan m\u00e1s tu sitio. Las <a href=\"https:\/\/kinsta.com\/es\/wordpress-hosting\/\">soluciones de Alojamiento WordPress de Kinsta<\/a> ofrecen <a href=\"https:\/\/kinsta.com\/es\/precios\/\">planes para sitios<\/a> de todas las formas y tama\u00f1os, y la plataforma f\u00e1cil de usar \u2014 <a href=\"https:\/\/kinsta.com\/es\/mykinsta\/\">MyKinsta<\/a>, un panel de administraci\u00f3n propio \u2014 hace que editar cualquier parte de tu sitio y sus archivos sea pan comido. Adem\u00e1s, obtendr\u00e1s las ventajas a\u00f1adidas de la <a href=\"https:\/\/kinsta.com\/es\/blog\/plataforma-en-la-nube-para-desarrolladores\/\">velocidad<\/a>, <a href=\"https:\/\/kinsta.com\/es\/integracion-cloudflare\/\">seguridad<\/a> y <a href=\"https:\/\/kinsta.com\/es\/soporte-kinsta\/\">soporte<\/a> de primera clase de Kinsta.<\/p>\n<p>\u00bfHas intentado mostrar c\u00f3digo en WordPress en el pasado? Si es as\u00ed, \u00bfqu\u00e9 m\u00e9todo te ha funcionado mejor? H\u00e1znoslo saber en la secci\u00f3n de comentarios m\u00e1s abajo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aprender a mostrar c\u00f3digo en WordPress es crucial para blogueros y creadores de contenidos que publican c\u00f3digo online constantemente para que lo utilicen sus lectores. El &#8230;<\/p>\n","protected":false},"author":199,"featured_media":66004,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1356,1345],"class_list":["post-66003","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-consejos-wordpress","topic-desarrollo-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00f3mo Mostrar C\u00f3digo en WordPress (y que Quede Bonito) - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprende a utilizar WordPress para mostrar c\u00f3digo, con plugins, shortcodes e incluso herramientas de codificaci\u00f3n. Tambi\u00e9n exploraremos el uso del software markdown.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo Mostrar C\u00f3digo en WordPress (y que Quede Bonito)\" \/>\n<meta property=\"og:description\" content=\"Aprende a utilizar WordPress para mostrar c\u00f3digo, con plugins, shortcodes e incluso herramientas de codificaci\u00f3n. Tambi\u00e9n exploraremos el uso del software markdown.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-17T13:21:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-17T12:57:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-display-code-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprende a utilizar WordPress para mostrar c\u00f3digo, con plugins, shortcodes e incluso herramientas de codificaci\u00f3n. Tambi\u00e9n exploraremos el uso del software markdown.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-display-code-2.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"40 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"C\u00f3mo Mostrar C\u00f3digo en WordPress (y que Quede Bonito)\",\"datePublished\":\"2023-05-17T13:21:50+00:00\",\"dateModified\":\"2025-01-17T12:57:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/\"},\"wordCount\":6273,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-display-code-2.jpg\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/\",\"name\":\"C\u00f3mo Mostrar C\u00f3digo en WordPress (y que Quede Bonito) - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-display-code-2.jpg\",\"datePublished\":\"2023-05-17T13:21:50+00:00\",\"dateModified\":\"2025-01-17T12:57:29+00:00\",\"description\":\"Aprende a utilizar WordPress para mostrar c\u00f3digo, con plugins, shortcodes e incluso herramientas de codificaci\u00f3n. Tambi\u00e9n exploraremos el uso del software markdown.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-display-code-2.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-display-code-2.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Consejos WordPress\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/consejos-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo Mostrar C\u00f3digo en WordPress (y que Quede Bonito)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior 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.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo Mostrar C\u00f3digo en WordPress (y que Quede Bonito) - Kinsta\u00ae","description":"Aprende a utilizar WordPress para mostrar c\u00f3digo, con plugins, shortcodes e incluso herramientas de codificaci\u00f3n. Tambi\u00e9n exploraremos el uso del software markdown.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo Mostrar C\u00f3digo en WordPress (y que Quede Bonito)","og_description":"Aprende a utilizar WordPress para mostrar c\u00f3digo, con plugins, shortcodes e incluso herramientas de codificaci\u00f3n. Tambi\u00e9n exploraremos el uso del software markdown.","og_url":"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2023-05-17T13:21:50+00:00","article_modified_time":"2025-01-17T12:57:29+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-display-code-2.jpg","type":"image\/jpeg"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Aprende a utilizar WordPress para mostrar c\u00f3digo, con plugins, shortcodes e incluso herramientas de codificaci\u00f3n. Tambi\u00e9n exploraremos el uso del software markdown.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-display-code-2.jpg","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Jeremy Holcombe","Tiempo de lectura":"40 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"C\u00f3mo Mostrar C\u00f3digo en WordPress (y que Quede Bonito)","datePublished":"2023-05-17T13:21:50+00:00","dateModified":"2025-01-17T12:57:29+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/"},"wordCount":6273,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-display-code-2.jpg","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/","url":"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/","name":"C\u00f3mo Mostrar C\u00f3digo en WordPress (y que Quede Bonito) - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-display-code-2.jpg","datePublished":"2023-05-17T13:21:50+00:00","dateModified":"2025-01-17T12:57:29+00:00","description":"Aprende a utilizar WordPress para mostrar c\u00f3digo, con plugins, shortcodes e incluso herramientas de codificaci\u00f3n. Tambi\u00e9n exploraremos el uso del software markdown.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-display-code-2.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/05\/wordpress-display-code-2.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/mostrar-codigo-en-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Consejos WordPress","item":"https:\/\/kinsta.com\/es\/secciones\/consejos-wordpress\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo Mostrar C\u00f3digo en WordPress (y que Quede Bonito)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior 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.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/66003","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=66003"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/66003\/revisions"}],"predecessor-version":[{"id":66136,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/66003\/revisions\/66136"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66003\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66003\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66003\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66003\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66003\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66003\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66003\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66003\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66003\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66003\/translations\/dk"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/66003\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/66004"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=66003"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=66003"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=66003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}