Format HTML Code Quickly for Blog Posts

When you write code in a blog post, you’ll want it to display as code, not be processed as part of the page.

This can be confusing in some editors. For example, WordPress interprets code differently in the Visual Editor and the Text editor:

  • If you paste HTML into the Visual Editor, WordPress will display it as text. By default, it uses the same fonts as everything around it. You can put it inside <code> tags (as I did there), but it will render in a pretty basic way. Creating CSS to display long code samples can take a lot of time.
  • If you paste it into the Text editor, it’ll interpret the HTML as part of your page’s code, and it will render or not display at all (depending on what the code is supposed to do.)

So if you aren’t used to putting code into blog posts, you can wind up with a mess pretty quickly.

If you’re struggling to get code to look right on your web page, you can use┬áto create a nicely formatted code snippet. The beauty of this tool is that it creates HTML containing code for any CMS or content editor — not just WordPress.

Here’s how it works: example

This form looks a little overwhelming, but there are three steps for basic usage:

  1. Type your code in the Source Code box.
  2. Using the Language drop-down list, select the language(s).
  3. Click the Highlight button. generates clean HTML that displays your code on the web page as you intended. Using the Style drop-down, you can change the color of the output.

The CSS field could certainly be more user-friendly. But once you have your code, it’s pretty easy to tweak. Alternatively, just delete all the CSS if you prefer to use the styles in your existing stylesheet.

If you do a lot of technical blogging or documentation work, will come in handy. There are dozens of language combinations to choose from, and it makes fast work of a task that many bloggers dread.








Leave a Reply

Your email address will not be published. Required fields are marked *