David Wells

Full Stack Developer

Focused on UX/UI, Growth
& Product Development

Better Developer Blogging with Easy Markdown

Published on Edit this post

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

easy-markdown-logo

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

http://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!