TLDR; Write posts in WordPress using github flavored markdown without wanting to kill yourself.

Blogging about code in WordPress has historically been a HUGE pain in the ass.

TinyMCE and the WordPress visual editor garble your code like it’s their job.

I’ve tried every single syntax highlighter plugin in existence.

They all fell short in one way or another.

So like any good developer. I rolled my own.

Easy Markdown WordPress Plugin

https://www.youtube.com/watch?v=dRMow19g0VU

Download Easy Markdown Plugin

I made this with a focus on JavaScript and it supports ES6 javascript syntax highlighting and JSX for React code snippets.

Languages Supported:

• html
• css
• javascript (ES6)
• applescript
• bash
• git
• json
• less
• markdown
• jsx
• sass
• scss
• yaml

If you don’t see your language here, make a custom Prism build and replace the prism.js file.

Install:

1. Download
2. Install
3. Visit profile and check ‘Disable the visual editor when writing’ in the profile page of WP admin /wp-admin/profile.php

Prior Art

Syntax highlighting is handled by Prism.

The Markdown parser was shamelessly gutted from JetPack and Evan Solomon’s GitHub flavored markdown script

Thanks! =)

Examples:

// JavaScript!
var greeting = 'What up G'
alert(greeting)

// React BABY!
var ProductItem = React.createClass({
  render: function () {
    return (
      <tr>
        <td>{this.props.name}</td>
        <td>{this.props.price}</td>
      </tr>
    );
  }
});

// HTML!
<a href="http://davidwells.io">
  Wowza!!!!
</a>

/* CSS! */
.ninja {
 visibility: hidden;
}

// PHP!
<?php
  echo 'Derp';
?>

# Bash script
mkdir lololol && cd lololol

Customizing it

I’m not supporting custom use cases and styles.

You can fork the plugin and do this yourself!

To change CSS, edit the prism.css file

To change/customize prism edit the prism.js file.

To add support for more custom post types alter these lines.

Happy Blogging!