Creating Blog for Google Blogger using Visual Studio Code, Markdown, and Syntax Highlighter

• Creating Blog for Google Blogger using Visual Studio, Markdown, and Syntax Highlighter
  • Introduction
  • Prequistics
  • Reference
  • Steps
    • 1. Download markdown-it components
    • 2. Add JS and CSS to google template
    • 3. Result
  • Summary

Introduction

I used StackEdit to convert a Markdown document to html and the format has some problem with recent template from Blogger. The steps I used were; 1. Create Markdown document from local computer using Visual Studio Code to store it to my Git Repository 2. Copy it to StackEdit to convert to HTML 3. Paste it to Blogger admin page. I wanted to simply to eliminate StackEdit process and tried to generate HTML document directly from Visual Studio Code, but had lots of problems.

The problem was that

• No extension to generate proper HTML document. There is pandoc component, but not working well with Blogger
• Set up Highlighter cdn to Blogger template

I wish this approach saves time to generate html document from Blogger

Prequistics

• Nodejs: npm and markdown-it
• Visual Studio Code
• Markdown TOC extension if needed

Reference

• Highlighter
• Markdown-it Syntax Highlighter

Steps

1. Download markdown-it components

I assume that everyone has nodejs command line and "npm" program path is stored as part of "PATH" variable. To check it run c:> npm -v from Terminal.

Once NPM is installed and the path is in the "PATH" variable, time to install "Markdown-it" javascript components Run following command npm install -g markdown-it from Terminal

The execution command format it

markdown-it input_md_file -o output_html_file

2. Add JS and CSS to google template

Go to template page and add following code between head section

    <link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/default.min.css' rel='stylesheet'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js'/>
 <script>hljs.initHighlightingOnLoad();</script>

3. Result

Summary

I spent couple of days to find out best way to generate HTML for markdown files and I believe this is best way to generate without any additional programs.