Rich Text Editing & Syntax Highlighting with Markdown

The title might seem vague but I had nothing else in mind to convey what I am about to say in this post.I have been smitten with ruby, and markdown has been a gift so valuable in my archive of programming goodies.

Recently, I was trying to blog in an ExpressionEngine powered site, Guess what!, ExpressionEngine's default text editor sucks. I had to find a way to make it suck less, but messing with it is a terrible idea, then i thought there had to be plugins or something out there but I had no control over the site.

The only way round is finding a workaround. Thank God there is at least an option for inputing raw html in that editor. So I had an idea,since i am so in love with Markdown,I'd write my post in markdown and convert it to html, copy and paste the html in the rich text editor and boom, the day is over, everyone is happy right?.

Motivation

I wanted to have a backup of my posts in github, and I enjoy markdown by the way (did i say that already?). I tried to look for different solutions beforehand, some were good others were not like what I wanted. but since, I’m having fun with ruby, this was like an excellent opportuninity to try writing something cool. So i decided to just write my own Ruby gem. blogdown

In my ideal conception I wanted the app to have Syntax highlighting and some sort of preview mechanism, because i wanted to see what I was doing and yes,i find reading from the browser a bit cool.

Blogdown

This is what I came up with, a solution to your sucking (rich/poor)-text editors, which for christ sake allow raw html inputs. This won’t be a tutorial about blogdown, its rather how i used the gem to create this post for my rich text editor.

The blog had no support for syntax highlighing, so if I had to inroduce syntax highlighting then I neeeded something to insert inline styles, thanks to coderay the gem has this feature covered.

Full source code for post is available at github( In markdown offf course).

Step 1 Install blogdown 

Blogdown is available as a ruby gem, I assume you have ruby 2.0 installed if not, then go ahead and install one.,then in your terminal run,

gem install blogdown

2 Prepare your project directory

$ mkdir site
$ cd site
$ mkdir posts

3 Create your first post

Lets say hello.md and save it inside the posts directory. now its time to add to version control git in our case.Inside our site directory, we run.

$ git init .
$ git add .
$ git commit -m "My first post"

You can go ahead and push your code wherever you want.

4 Building and serving

Well, we have one cool thing here Inside our site

$ blogdown server

Now, just visit this link in your browser http://localhost:4567 and see for yourself which files have been built, and click to any file to view the contents in a web page.

The real part

Up to this moment you might be wondering what exactly are we looking for. We are solery interested in the html files generated in the output folder. That is what blogdown build does for us.

Now, after generating your html post, you can do do the following.

  • Open the file in your favorite text editor
  • Highlight the whole text, and copy to clipboard
  • Go back to your browser where there is this empty rich text editor staring at you(in my case its an ExpressionEngine blog)
  • Choose html and paste the contents. Click again on html .However, in my case, there was a button saying view code which happens to show html part(so the same context)
  • Make some final edits, and publish.

I plan to improve blogdown with time, and If you have any idea you wish to contribute or help out, feel free to fork the repo on github.

Fork it https://github.com/gernest/blogdown/fork

About Author

Geofrey Ernest is a freelance web developer / programmer based in Mwanza Tanzania, He enjoys writing and experimenting with different programming languages.He is currently open to take new projects. X