post editor zen coding

Post Editor Zen Coding

Ever since i released my plugin Advanced Code editor I get a question or a feature request to add support to the post content html editor, and well that is not the idea behind advanced code editor, So just because I do see the benefit of having a syntax highlighted html editor in the post edit screen and last week Chris Rault as pointed to me that the syntax highlighting engine i use (codemirror) has a zen coding extension I knew I had to create a new plugin just for that 🙂 so here you go and i gladly present Post Editor Zen Coding plugin.



Post Editor Zen Coding button Post Editor Zen Coding in action
Post Editor Zen Coding help


What does it do?

This plugin integrates the Codemirror Editor with the zen-coding extension into the WordPress native Editor, to let you edit your html in a syntax highlighted editor with line numbers and some other awesome features like an abbreviation engine which take a single line like this:


and turns it into a full page markup like this:

<div id="page">
  <div id="header">
    <ul id="nav">
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
  <div id="page">
  <div id="footer"></div>




  • Syntax highlighting.
  • Line numbers.
  • Abbreviation engine
  • Many "Hot Keys"
  • Very Very Easy to use.
  • Integrated Help popup



Download the latest Version from

Simple Installation steps:

  1. Extract the zip file and just drop the contents in the wp-content/plugins/ directory of your WordPress installation.
  2. Then activate the Plugin from Plugins page.
  3. Done!



Watch this video:

this is it for now, enjoy and any feedback is welcome, also make sure to submit bug if you find any.

Change Log:

  • 0.1
    • Initial release

Ohad Raz

WordPress Consultant, a WordPress Developer and a WordPress Freelancer With over 10 years experience in architecting web sites and applications. WordPress Development moderator and somethimes Plugin Developer.