Home » Blog » How to embed HTML-code in the text of page on MODx Evolution post thumb

How to embed HTML-code in the text of page on MODx Evolution

By: Roman Kondrashov

For blogs related to programming, one often need to output code in the body of the post. For these purposes, several methods are best known:

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

For MODx Evolution, you'll have to output the code in the TinyMCE visual editor, then frame it with the code tag, and then add the pre tag NOT in the visual view. However, this method replaces the angle HTML brackets with mnemonic characters. It is not entirely convenient.

For WordPress there are plugins like crayon-syntax-highlighter, which cope with this task. But the situation is different with MODx Evolution, and none of the above methods works perfectly for HTML. Alternatives can be used if you do not use TinyMCE at all:

  1. <textarea>Put codes in the textarea tag</textarea>
  2. <math> <![CDATA[Put codes here]]> </math>;

The last option is the most cute and works great with Prettifier. Download and connect these 2 files: http://seofocus.pro/vendor/prettify.css, http://seofocus.pro/vendor/prettify.js.

Add an onload event to the body tag:<body onload="prettyPrint()">,and, in order for the code to be highlighted, we enclose the expression with CDATA with <pre class="prettyprint"></pre>.

Output example:

<meta property="og:image" content="http://seofocus.pro/assets/templates/thesite/images/ogimage.jpg" />

Some disadvantages: TinyMCE will destroy part of the code if you decide to save the post in this editor. And you will see the service code in the content, being logged in the admin panel, if you use the Quick Manager+ plugin. You say "duct tape"? Yes, it is. You know a better way or a plug-in? Welcome to comments.