DEV Community

Shiono Yoshihide
Shiono Yoshihide

Posted on

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!

Top comments (3)

Collapse
 
mauran profile image
Mauran Muthiah

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

Collapse
 
saltyshiomix profile image
Shiono Yoshihide

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