loading...

Preview your markdown with GitHub API in real time

saltyshiomix profile image Shiono Yoshihide ・1 min read

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

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

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

Add an alias to ~./bashrc:

alias preview='preview --github-api-url https://ghe-host:port/api/v3'

Then,

$ preview file.md # uses GHE API by alias

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!

Posted on by:

Discussion

markdown guide
 

This is great! I've been in the same situation way too many times!

 

Glad to hear that!
If you have any ideas, please contact me anytime!