Saturday, March 22, 2014

Blogging using Haroopad and Stackedit.io

I always wanted to blog with markdown but few things always hold me back. Either the blog site not support markdown or there’s no good editor tools with publishing utility. Finally there’re wonderfull tools now: Stackedit.io and Haroopad.

  • Stackedit.io is a full featured online markdown editor with synchronizing and publishing which i started bloggin with it first. Everything is good until I feel some sluggishness when working for hours with it. There is a setting to turn off the high cpu usage but I didn’t use it. Therefore I’m thinking of getting a desktop editor.

Stackedit.io

  • Haroopad seems like a great cross-platform opensource markdown editor from Korea. It supports Github Flavoured Markdown (GFM) and Highlights.js which also supported by Stackedit.io. However it does not have the publishing feature like Stackedit.io and also not support YAML.

Haroopad

  • The workflow I use to blog to blogspot.com.


1. Setup Centralized Storage

Back to TOC
Markdown (.md) file should always be kept as raw document of your blog. Stackedit.io has support to sync with DropBox and Google Drive so go ahead and get one of them.


2. Draft Locally

Back to TOC
Fire up Haroopad and start editing in markdown.

Markdown Basics

Back to TOC
* Commonly used markdown syntax:

# H1 or Blog Title
## H2 or Sub Title
### H3
#### H4

This is *Empasize*.
This is **Bold**.
This is ~~Strike~~.

[Link to this blog](http://www.zev23.com)

![Alt Text](http://media.zev23.com/img/logo.png "Logo Title")

List (-,*, number or alphabetic):
- First level
  - Second Level

   ```
   // Fenced Code Block
   sudo shutdown -h 0
   ```
  • The result.
    Markdown Example

  • Few more useful stuff:

    • [TOC] will auto-generate a table of content based on the #.. used just like the one above this post.
    • You can embbed any HTML tag if markdown does not meet your need.
  • Save the post as markdown file (.md) to your Dropbox or Google Drive folder on your machine and sync it online.

[Optional] Use image from external services

Back to TOC
I find it rather toublesome when inserting picture in my post if using blogger.com editor.

I have to create a blog post and upload the image to get an image shown. But this will break my workflow for using markdown because I will only know the location of the image after I upload it. This add extra work when writing the post.

The solution is to upload the image to external server like DropBox or host your own server like mine media.zev23.com hosted on Openshift.

Using service like Dropbox is easy as you can upload/sync online and then copy the url after sharing.

You can also store your custom css and js files too.


3. Get PostId

Back to TOC
It is recommended to create the post and set the desired permalink. If not, Stackedit.io will publish with title as default permalink and Blogger.com will make it uglier if you have link with the same first 4 or 5 words.

Create Blogger.com Post

Once you have created, go to the editing page, you will see the link on your broswer like this:

https://www.blogger.com/blogger.g?blogID=843863998211182996#editor/target=post;postID=2237555113254497257;onPublishedMenu=allposts;onClosedMenu=allposts;postNum=0;src=postname
  • Jot down the postID number. In this case is 2237555113254497257.
postID=2237555113254497257

4. Publishing

Back to TOC
We will use Stackedit.io to add YAML tags (title, tags, category, categories, postId) before publish out.

There are a number of more things that Stackedit.io editor has supported:

  1. Font-Awesome
    You can add Font-Awesome icon using <i class='icon-bookmark'></i> for version 3 or <i class='fa fa-bookmark'></i> for version 4. However, the previewer will only display version 3 icon.

  2. Google Prettify or Highlight.js
    Stackedit.io allows you to choose either one of them. Default is Google Prettify.

  3. Synchronizing
    Import and Export your markdown file to 3rd party service.

  4. Publishing
    The main feature I chose Stackedit.io in the first place. Easily publish post to a variety of blog sites.

Import Post

Back to TOC
* Click the # tab on the top-left corner and open up the side menubar.

You will find Google Drive and Dropbox under SYNCHRONIZE, click the one you using and choose Import from ….

Stackedit Import From Screenshot

  • Login to the service, grant permission and pick the markdown file you going to publish.

Prepare to publish

Back to TOC
* Add the following YAML tags to the beginning of your post.

---
title: This Blog Title
tags: [tag1, tag2. tag2]
category: [cat1, cat2, cat3]
categories: [cats1, cats2, cats3]
postId: 2237555113254497257
---

title is the title of the post

tags, category, categories are array of labels. Usually i put them the same for blogger.com.

postId is the one you jot down before.

Publish to Blogger.com

Back to TOC
* Go to the side menubar again and click on Publish On….

There are many providers to choose from.

Stackedit Publish

  • Choose Blogger for post.

  • Enter your blogspot.com url. The example here show using a custom url.

  • Enter The PostId. You will end up creating new post if this ommit.

Blogger Post

  • Click OK to publish.

5. Re-Sync and Re-Publish

Back to TOC
Whenever you done any update on Stackedit.io, remember to sync and publish your update with the 2 buttons on the top right corner.

Resync


6. Edit Blogger.com Template

Back to TOC
You may find that the post you have doesn’t look exactly what you expect. This is because Stackedit.io convert your markdown content to HTML format thus you need to have its style loaded.

In blogger.com, go to Template->Edit Html.

Add these to your html header.

    <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>
    <link href='http://media.zev23.com/css/stackeditio-base.css' rel='stylesheet'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/mathjax/2.3/MathJax.js?config=TeX-AMS_HTML' type='text/javascript'/>
  1. Version 4 Font-Awesome css.
  2. Modified CSS based on Stackedit default css.
  3. MathJax.js.

Final note

Back to TOC
It may seems strange that why do I need a desktop editor when online editor already has more features but I feel the browser are lagging when working with online editor long enough.

There are still some difference on how they handle html and markdown syntax. Using font-awesome <i class="icon-bookmark"> as example. In Stackedit.io double quotes works correctly but in Haroopad it doesn’t work. Both will handle single quote <i class='icon-bookmark'> nicely.

That’s it, this is how to use both tools to write blog post with markdown and publish it.






Copyright © Zev23.com 2014 All Rights Reserved. No part of this website may be reproduced without Zev23.com’s express consent.

No comments: