Markdown blog writer for blogger

CONTENTS

• • Why new blog writer
  • Workflow
    • Typora
    • StackEdit
  • Math Support
  • Complex Math
  • Icons are well supported
  • Flowcharts
  • Image support
  • Syntax Highlighter
  • Conclusion

Why new blog writer

I was curious to find a new blog writher after some experiments with MarsEdit 2 and the Blogo 2. But both of those tools haven’t fulfil my requirements of having

• table of contents
• support latex type math support (latex is special for me because that is the most familiar)
• standard icons
• flowchart

• Tips and Notes

  which were not supported in my blog for years now. I was curious to have these new features in my blogger.
  Fortunately, I found a very good Markdown writers StackEdit and Typora.

Workflow

Here is my blog writing workflow:

Typora

This is so far the best desktop editor WYSIWYG editor found to create the document including

• Tables
• $\LaTeX$ equations
• Code Fences
• Images
• Foot notes
• GFM code

After create and save the document as a markup document, either document can be copied as markup or imported to the StackEdit.

StackEdit

This is where I keep my blogs. The document can be save to the Google Driver as well as publish to the Blogger.

Currently only the StackEdit support the flowchart feature.

All the cleanup can be done in the stackedit.

Math Support

Math support is really good. For example here is how to represent an array using $\LaTeX$ :
Here the inline math $x<y$ example using following syntax:

$x < y$

This is how the array represent:

\begin{array}{cc}
  a & b \\
  c & c
\end{array}

and here the output
$\begin{array}{cc} a & b \\ c & c \end{array}$
Another example of writing equation:

\begin{equation}
   E = mc^2
\end{equation}

$\begin{equation} E = mc^2 \end{equation}$

Tip Math notations for $\LaTeX$ can be improved as shown in the mathjax documentation.

Complex Math

As I realize, If I am not a expert in $\LaTeX$, I have to use tools to form the equations otherwise I will be unproductive. I’ve found a really good chrome app to create math equations Daum WYSIWYG editor visually. This is really productive for the StackEditor.

Found another codecogs WYSIWYG online editor but not as above. Another web based handwriting tools is Web Equations handwriting which converts the handwriting to the $\LaTeX$.

Icons are well supported

Here the example for the as shown in the following code:

<i class="icon-cog"></i>

You can find more icons from the fontella demo.

Flowcharts

Simple flow charts are easy
As a first step need to define the symbol, then put the symbols to flow. Here the code has written for the above workflow flowchart:

The code as follows

    ``` flow
        st=>start: Start
        ed=>end: End
        typora_sub=>subroutine: Typora:>http://typora.io/
        if_doc_available=>condition: document available ?
        stackedit_sub=>subroutine: StackEdit:>http://stackedit.io
        if_doc_ready_to_pub=>condition: publish ready ?

        st->if_doc_available
        if_doc_available(no)->typora_sub(right)->if_doc_ready_to_pub(yes)->stackedit_sub->ed
        if_doc_available(yes)->if_doc_ready_to_pub
        if_doc_ready_to_pub(no)->typora_sub
        ```

Image support

You can embed the google album image to the blog as follows.

1. First login to the google
2. then visit the https://picasaweb.google.com/lh/myphotos?noredirect=1
3. Then select the required image and find the url
4. and embed as follows

Inline-style:

from the markdown:

![alt text](http://lh3.googleusercontent.com/-MrGDIATI7SQ/TK-cHggggF5lI/AAAAAA...AYg/Nknguokk... "Logo Title Text 1")

Syntax Highlighter

GitHub favored markdown (GFM) is supported as shown :

    ```java
     class HelloWorld
        {
            //exmaple
            public static void main(String[] args)
            {
                // program starts here
                System.out.println("Hello World!");
            }
        }
    ```

shown as

 class HelloWorld
    {
        //exmaple
        public static void main(String[] args)
        {
            // program starts here
            System.out.println("Hello World!");
        }
    }

You can totally ignore the highlighter using no-highlight class.

for example:

```no-highlight
 //exmaple
 class HelloWorld
    {
        //exmaple
        public static void main(String[] args)
        {
            // program starts here
            System.out.println("Hello World!");
        }
    }

is shown as:

 class HelloWorld
    {
        //exmaple
        public static void main(String[] args)
        {
            // program starts here
            System.out.println("Hello World!");
        }
    }

The id and the class provided in the yml. The string name of the Ace Mode used for highlighting.

Conclusion

Still I am adopting to the markdown way of blogging. There is more space to improve int he mathjax. However, this is a considerably advancement to my blog site. Thanks StackEdit.

Written with StackEdit.