Writing Blog with Markdown, Atom Editor, Pandoc and Github

Table of Contents

• Series: Awesome Tips about Markdown
• TL;DR
• Why Blogger with Markdown
• Writing in Atom with Markdown
  • Atom Packages for Writing
  • Packages for Writing - Markdown
• Call Commands Faster
• Write Faster
  • No Need to Select
  • Case Change
  • Spell Check
  • Snippets
  • 2: Use Pandoc to Generate Html and Post it into Blogger
  • Proof-read
• Why Git/Github
• Bonus
  • How to Building Presentations with Reveal.js, Markdown and Github Pages
  • Related Posts

---

Series: Awesome Tips about Markdown

---

TL;DR

• How to write a blog faster in Atom with Markdown Syntax
• Publish it with Pandoc to Github.

Why Blogger with Markdown

• Focus on the content, easy to store/edit/read the content locally
  • Use plaintext to write rich formatted content with atom
• Flexible: easy to hide(Cmd+/) text, draft, or the text/explanation for you.
  • HTML minifier will remove the commented text for you.
• We can export the markdown files to html, pdf, ppt(Powerpoint or Google Sides), html slides(reveal.js)

Writing in Atom with Markdown

• Check here for must-have atom editor packages

Atom Packages for Writing

• Spell Check: Cmd+Shift+:
• Change Case
  • change-case:kebab/upperFirst/snake/constant
  • Shortcut from command palette: UF
  • Find all command by typing cc, CC or 'Change Case'
• title-case
  • solve the issue in change-case:title
  • Shortcut: type etc[Editor: Title Case] in command palette
• Document Outline
  • Shortcut: Ctrl-Cmd-T
  • Uncheck “Show by default” in its settings
  • Only use h4 or above for markdown

  'atom-workspace':
    'cmd-ctrl-t': 'document-outline:toggle'

• Delete Whitelines: Option+Shift+D
• linter-write-good

Packages for Writing - Markdown

• Markdown Writer
  • Execute command Markdown Writer: Create Default keymaps to add the recommended Keymaps.
  • snippet: b(bold), i, p(bullet point: -), l(link), code, t(todo), img

  ctrl-alt-[1-5]	switch among H1 to H5.
  cmd-’	code
  cmd-b	bold
  cmd-i	italic
  cmd-h	strike through
  cmd-shift+u	- unordered list
  shift-cmd-"	’‘’code block’’’
  0. ordered list	(shift-cmd-O)

• Markdown Table Editor
  • Hit tab to move to the next cell
  • Snippet: table
• markdown-preview-enhanced
  • Ctrl+Shift+M: toggle preview
  • Support: Scroll sync, automatically show and switch preview of markdown being edited
  • Support Code chunk, Presentation
  • Copy (part of) html content from the preview panel directly
  • Diagrams
    • Support PlantUML, mermaid, flow charts, sequence diagrams
  • Turn off “Open preview pane automatically when opening a markdown file” as it will steal Tree View focus.
  • Use Pandoc Parser
• markdown-preview-plus
  • Ctrl+Shift+M: toggle preview
  • Copy html: convert markdown to html and copy the output to clipboard
  • Enable “Preview Position Synchronization behavior”
  • support pandoc syntax
• atom-csv-markdown

---

Call Commands Faster

• Select Preserve Last Search at Packages -> Command Palette.
  • As we usually call same functions multiple times.
• Use shortcut, check the awesome tips about atom editor to learn commonly used shortcuts in Atom.
• Use Command Palette or Cmd+Shift+? - Help > Search to find command and learn its shortcut.
• In Command Palette, use abbreviation
  • type etc[Editor: Title Case] in command palette to format title: from package title-case.
  • uf for UpperFirst

Write Faster

No Need to Select

• When there is no text selected, the command may work on previous word or surrounding word: e.g: Case Change

Case Change

• by default, Atom supports: Upper(Lower) Case
• Install Change Case, it adds: kebab/upperFirst/snake/constant
• Install title-case which solve the issue in change-case:title
• change-case:title from Change Case will remove characters like -, It’s -> It S, but it can be used to get the title form url.
  • e.g. to get the lower case title awesome tips about chrome from awesome-tips-about-chrome.html:
  • change-case:title converts it to Awesome Tips About Chrome Html, then lc: Editor:lower case to lower case.
• kebab command to create url.

Spell Check

• Cmd+Shift+: to correct spelling

Snippets

• Add commonly used phrases or difficult typing phrase such as TL;DR
• Add links that are used frequently
• Add some other html/script block such as sections: Related Posts, Series.
• using """ for Multi-line Snippet Body

'.source.gfm':
  'Awesome Tips about Chrome':
    'prefix': 'l_chrome'
    'body': '(/2018/06/awesome-tips-about-chrome.html){target="blank"}'
  'TL;DR':
    'prefix': 'tldr'
    'body': '### TL;DR'
  'Related Posts':
    'prefix': 'related'
    'body': """
    ---
    #### [Related Posts](https://lifelongprogrammer.blogspot.com/search/label/Chrome)
    <script src="https://lifelongprogrammer.blogspot.com/feeds/posts/default/-/Chrome?orderby=updated&amp;alt=json-in-script&amp;callback=weightedRandomRelatedPosts&amp;max-results=20"></script>
    """

2: Use Pandoc to Generate Html and Post it into Blogger

• brew install pandoc
• go get github.com/tdewolff/minify/cmd/minify
• export "md=the_md_file""
  • Use Cmd+Shift+; in iTerm to quickly find and execute the command.

rmheadbody.sh

i=0
printf '<div dir="ltr" style="text-align: left;" trbidi="on"><div style="font-size: large;">\n'
while IFS= read -r line; do
  i=$((i+1))
    printf '%s\n' "$line"
  fi
done

printf '</div></div>'

Proof-read

• New line is very important in Markdown.
• check broken headers by searching ## or ```

- list
<!-- If without a new line, the html generated by pandoc will be broken -->
#### Header

---
<!-- new line need here -->
#### Header

• broken table

Why Git/Github

• Easier to figure out the recent change and publish it to blogger.
• e.g. github/jefferyyuan/blog

Bonus

How to Building Presentations with Reveal.js, Markdown and Github Pages

---