Blogs

Inicio » Blog » Cómo insertar código HTML en el texto de la página en MODx Evolution post thumb

Cómo insertar código HTML en el texto de la página en MODx Evolution

By: Roman Kondrashov

Para los blogs relacionados con la programación, a menudo se necesita mostrar el código en el cuerpo de la publicación. Para estos fines, varios métodos son los más conocidos:

  • tag <pre></pre>;
  • tag <code></code>;
  • Google Code Prettifier;

Para MODx Evolution, tendrá que generar el código en el editor visual TinyMCE, luego enmarcarlo con el tag 'código' y luego agregar el tag 'pre' NO en la vista visual. Sin embargo, este método reemplaza los corchetes HTML de ángulo con caracteres mnemónicos. No es del todo conveniente.

Para WordPress hay complementos como crayon-syntax-highlighter, que hacen frente a esta tarea. Pero la situación es diferente con MODx Evolution, y ninguno de los métodos anteriores funciona perfectamente para HTML. Se pueden usar alternativas si no usa TinyMCE en absoluto:

  1. <textarea>Concluir códigos en el tag textarea</textarea>
  2. <math> <![CDATA[Pon aquí los códigos]]> </math>;

La última opción es la más linda y funciona muy bien con Prettifier. Descargue y conecte estos 2 archivos: http://seo-focus.cl/vendor/prettify.css, http://seo-focus.cl/vendor/prettify.js.

Agregar un evento de onload al body tag:<body onload="prettyPrint()">,y, para que el código se destaque, adjuntamos la expresión con CDATA con <pre class="prettyprint"></pre>.

Ejemplo de salida:


<meta property="og:image" content="http://seo-focus.cl/assets/templates/thesite/images/ogimage.jpg" />

Algunas desventajas: TinyMCE destruirá parte del código si decide guardar la publicación en este editor. Y verá el código de servicio en el contenido, que se registra en el panel de administración, si usa el complemento Quick Manager+. ¿Dice "cinta adhesiva"? Sí lo es. ¿Conoces una mejor manera o un complemento? Bienvenido a los comentarios.