Use Markdown in Blogger

There are three ways to use markdown on Google Blogger

A. Markdown editor to HTML
B. Browser Markdown plugin
C. JavaScript Markdown plugin

The BEST way is method#A, edit markdown with StackEdit¹ and publish Plain HTML to Blogger.

A. Markdown editor to HTML

HOWTO
- Edit markdown with Markdown editor
- Converted markdown into HTML
- Copy/paste HTML into blogger
Pros
- Clean HTML code, no CSS Inline styles
- Good for SEO
Cons
- Preview is NOT what you get since different CSS styles
- Require basic knowledge of HTML/CSS
- Copy/paste HTML takes some effort

StackEdit

HOWTO
- Edit markdown with StackEdit
- publish to Blogger
  - with Plain HTML template (recommended)
    - Pros
      - less effort than Copy/paste HTML
      - Clean HTML code
    - Cons
      - Preview is NOT what you get
  - with Styled HTML template
    - Pros
      - less effort than Copy/paste HTML
      - Preview is what you get
    - Cons
      - garbage HTML code
Link

Additional

It's needed for Plain HTML template to install more plugin on Blogger to support Stackedit feature

highlight.js

<!-- highlight.js Additions START -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/ocean.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- highlight.js Additions END -->

KaTeX

<!-- KaTeX Additions START-->
<link href='https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.css' rel='stylesheet'/>
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.js'/>
<!-- To automatically render math in text elements, include the auto-render extension: -->        
<script src='https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/contrib/auto-render.min.js'/>
<script>
    renderMathInElement(document.body);
     [{left: &quot;$&quot;, right: &quot;$&quot;, display: false}]
    });
</script>
<!-- KaTeX Additions END-->

mermaid

<!-- Mermaid Additions START-->
<script  src=”https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.3.1/mermaid.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/mermaid/7.0.14/themes/mermaid.dark.css" />
<style>.section { opacity: 1; }</style>
<script>mermaid.initialize({startOnLoad:true});</script>
<!-- Mermaid Additions END-->

B. Browser Markdown plugin

HOWTO
- Install browser plugin for markdown MarkdownHere
- Edit markdown with Blogger editor directly
- Plugin converted markdown into HTML automatically
Pros
- Less effort than copy/paste HTML
- Preview is what you get
- Don’t need to understand HTML/CSS
Cons
- Too many garbage HTML code and Inline styles CSS
- Bad for google index robot

C. JavaScript Markdown plugin

HOWTO
- Edit markdown with Blogger editor
- Insert Markdown javascript plugin Showdown
- While page is loading, Showdown converts the markdown text content into html and injects that back into the post
Pros
- Easy
Cons
- BAD for SEO, since content is markdown text not HTML code
Link

showdown js script

<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js"></script>
<script>
var converter = new showdown.Converter();
var posts = document.querySelectorAll(".post-body,.snippet-item");
Array.prototype.forEach.call(posts, function(el, i){
  if(el.innerHTML.indexOf("markdown") <= 1){
    el.innerHTML = converter.makeHtml(el.innerHTML.replace("markdown",""));
  }
});
</script>

showdown - cdnjs.com - The best FOSS CDN for web related ...

Reference

Markdown HOWTO

The Ultimate Guide to Writing & Publishing with Markdown

Online Markdown Editor

Site	Pros	Cons
- https://stackedit.io	Publish to Blogger Have Preview Powerful Editor	Need to add plugin for Blogger
- https://pandoc.org/try/	Support many format Have header id Clean HTML code for <code></code>	No Preview
- https://markdowntohtml.co	Clean HTML code Have Preview	No header id
- https://markdowntohtml.com	Have header id Have Preview	Dirty HTML code for <code></code>
- https://dillinger.io/	Have Preview	Dirty HTML code

Search This Blog

Tech Noir