How to use Markdown in Blogger

Markdown becomes the most popular documenting language in any technical documentation nowadays. The benefit of using Markdown is getting formatted and highlighted sentences in the short typing. However, Blogger doesn't support Markdown natively at the time going. In order to use Markdown in Blogger, I googled it online and found there is a useful framework built by `cs905s` on https://github.com/cs905s/md-in-blogger. In this post, I will list down how to implement this and a sample to show if the Markdown still working on this post. The following way works on my Blogger as you see on this post. If it doesn't work on your Blogger, please feel free to leave a comment or visit https://github.com/cs905s/md-in-blogger.

1. Go to Theme
1. Click Customise -> Edit HTML
1. Paste the following code before `</head>` 
```html
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css" rel="stylesheet"></link>
```
1. Paste the following code before `</html>`
```html
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/showdown/1.6.2/showdown.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<script src="//mxp22.surge.sh/markdown-highlight-in-blogger.js" type="text/javascript"></script>
```

Once you have configured the template, you can use Markdown in `HTML view` by click `<>` at left hand side in the toolbox. However, it doesn't work in the `Compose view`. So please use `Preview` to see the result of rendering.

> Note: < and > are the preserved characters in HTML, please use & lt; and & gt; in your markdown.


In your each post, you just type markdown in the following section to render Markdown:
```html
<pre class="markdown">
</pre>
```

---
----- Mark Down Sample as follows -------
# This is header

# Unordered List
- List 1
  - List 1-1
- List 2

# Ordered list
1. Number 1
  1.1. Number 1.1
  1.1. Number 1.2
1. Number 2

# Table
| To Left | Centre | To Right |
|:--------|:------:|---------:|
|(1,1)    | (1,2)  | (1,3)    |
|(2,1)    | (2,2)  | (2,3)    |

# Mermaid (Not supported Yet)
```mermaid
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
```

# Reference
-  https://github.com/cs905s/md-in-blogger