Preview your markdown with GitHub API in real time

saltyshiomix

Shiono Yoshihide

Posted on August 3, 2018

Preview your markdown with GitHub API in real time

Hello, I'm a TypeScript lover in Japan but in this article I'll show you how to preview markdown (as is, GitHub flavored markdown(GFM)) at my workspace.

TL;DR

# install gfm-preview
$ npm install --global gfm-preview

# preview your markdown
$ preview file.md
Enter fullscreen mode Exit fullscreen mode

Then you'll see a preview in your default browser like this:

gfm-preview-result

Background

When writing markdown, I always concern about the result of GitHub markdown rendering. So I often copy markdown and paste it to GitHub Gist then I see some typos and rewrite and copy-paste it...damn!

So I wrote gfm-preview today :)

My Writing markdown life CHANGE

A preview command automatically do this:

  • Launch a local preview server
  • Open a preview in your default browser
  • Render markdown by GitHub API
  • Watch changes and reload the preview
  • Close the local preview server when the preview is closed

Then my writing markdown scenario goes to:

$ touch file.md
$ preview file.md
Enter fullscreen mode Exit fullscreen mode

So fun! No stuff!

Support GitHub Enterprise

My workspace uses GitHub Enterprise, so I preview like this:

$ preview file.md --github-api-url https://ghe-host:port/api/v3
Enter fullscreen mode Exit fullscreen mode

Add an alias to ~./bashrc:

alias preview='preview --github-api-url https://ghe-host:port/api/v3'
Enter fullscreen mode Exit fullscreen mode

Then,

$ preview file.md # uses GHE API by alias
Enter fullscreen mode Exit fullscreen mode

Easy enough?

PRs are welcome

I'm new to OSS and want to communicate with contributors!

https://github.com/saltyshiomix/gfm-preview

Thank you for your reading my article!

💖 💪 🙅 🚩
saltyshiomix
Shiono Yoshihide

Posted on August 3, 2018

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related