Nicegist - a permanent gist.io alternative

writing for hackers · zero setup · publish in seconds

A pure JavaScript gist.io replacement, hosted on GitHub*.

* As long as GitHub exists, it will not die. Yay!

About

When I recognized that gist.io is dead, I stumbled upon a comment in gist.io's issue tracker, that suggested to build a pure JavaScript implementation to be hosted on GitHub pages.

I liked the idea. Thus, Nicegist was born.

Features

• 💥 Supports gist embedding (use <gist> tags, i.e. <gist>file.sh</gist>)
• Supports public and secret gists
• Supports CommonMark / GFM syntax
• Supports GFM task lists
• Automatic code block syntax highlighting
• Automatic headline anchors

Usage

1. Create a Gist on Github with one or more Markdown-syntax files.
2. Note the Gist ID at the end of the Gist URL.
   (It's a longish alpha-numberic string like dab5cf7977008e504213.)
3. View your writing presented nicely at nicegist.github.io/YOUR_GIST_ID

Examples

• Code blocks: Nicegist, Source
• Tables: Nicegist, Source
• 💥 Embedded gists: Nicegist, Source
• 💥 Embedded interactive map: Nicegist, Source
• GFM task list: Nicegist, Source
• Text formatting, images & more: Nicegist, Source
• Example writeup: Nicegist, Source

Content

The Gist's description field will be used as the title for your writing. You should structure your writing such that the highest-level heading is an H2, as the post title will be a first-level heading.

Your Markdown file(s) can contain relative links to anchors, which Nicegist will automatically create for each heading in your Markdown file(s).

You can also embed other files from your Gist in your Markdown file(s). Nicegist supports custom <gist> tags. Let's say your Gist contains two files. A example.md and a code.sh. You could then use the custom embed tag in your example.md as follows: <gist>code.sh</gist>. Nicegist will render these tags like in this example.

Check out the examples above for more clues on what you can and should do when writing for Nicegist.

Bookmarklet

Be lazy and drag the Nicegist bookmarklet to your bookmarks bar.
Click it when you’re on a gist page, and it will take you to the corresponding Nicegist page.

javascript:(function(){if(location.hostname==="gist.github.com"){var gistId=location.pathname.split("/").pop();if(location.pathname.split("/").length>2&&gistId.length)location.href="https://nicegist.github.io/"+gistId}})();

Support

Nicegist uses modern JavaScript and, thus, supports modern browsers only. (Also, IE11 should work. But no warranty.)

If you run into something broken, your markup isn't rendering, or you want to propose a new feature, please file a ticket.

Under the hood

• GitHub Gist API for fetching gists
• Chromium destilled webpage layout for optimized reading experience
• markdown-it for Markdown parsing
• markdown-it-anchor for automated header anchors
• markdown-it-task-list for GFM task list support
• highlight.js for code block syntax highlighting
• Some regex sugar and a hidden gist feature for gist embedding
• GitHub Pages SPA hack for pretty URLs

License

(c) 2019, Stephan Schmitz [email protected]
License: MIT, http://eyecatchup.mit-license.org
URL: https://nicegist.github.io/