View markdown files offline

GithubMarkdownViewer

Github Problem Overview

Is there a way to display .md files offline so we know what it will look like once it's uploaded in Github? I'm referring to showing the README.md file as it would come out in Github, and not as for editing purposes.

Needs to work on Mac and Windows since I use both.

Github Solutions

Solution 1 - Github

There are a few Chrome plug-ins that work well. I've been using Markdown Preview Plus.

After install, enable "Allow access to file URLs" in Extensions (menu > More tools > Extensions or enter URL chrome://extensions/ instead).

enter image description here

Then drag-n-drop a Markdown file onto Chrome and use your favorite editor to edit.

Solution 2 - Github

I wrote Grip a while ago to do exactly this. It renders exactly like it does on GitHub and provides several additional options too:

  • In addition to READMEs, Grip can renders GitHub comments and issues
  • Click through local links to render other .md files
  • An API to use in your own projects
  • Export to an HTML file

Install with pip:

pip install grip

Then go to the directory that contains your README file and run:

grip

Pass -h for additional help and options.

Here's a screenshot of Grip rendering Grip's README:

Screenshot of Grip rendering Grip

Hope this helps. Check it out here.

Solution 3 - Github

Atom by Github. Gives you a side by side preview.

enter image description here

Solution 4 - Github

Visual Studio Code - the new editor by Microsoft also provides very good support for markdown editing.
You can download it from here.
The editor provides good support to toggle between the markdown code and the preview mode.
It also provides reasonably good intellisense support for all the markdown syntax.
The editor is free for use and is also cross platform (works on Linux, Windows and Mac).
For more details you can check on their website

enter image description here

Solution 5 - Github

Late to the party, but have a look at MarkdownPad.

Solution 6 - Github

See Python-Markdown-Editor

It is based on :

  • Python-Markdown
  • Pygments (code block syntax highlighting)
  • CodeMirror (javascript code editor)
  • Bottle

Install with pip :

$ pip install markdown-editor

It features when-you-type preview, code highlight, fenced code blocks, github style

it can be used by commandline :

$ markdown_edit 

$ markdown_edit README.md

$ markdown_edit -f readme.html README.md

enter image description here

I created this to build a tool for sending code reviews, it is easily extensible, by importing it as a module you can add custom actions.

Solution 7 - Github

I just installed https://github.com/ypocat/gfms. It does a very good job rendering github flavored markdown. It detects changes in your markdown, so you just put your browser and editor side-by-side. It is Node.js, so it should work fine on any platform.

If you have Node.js is installed, the installation is simple:

  1. sudo npm install -g gfms
  2. gfms --port 9999 (in your project directory)
  3. http://localhost:9999/ (open with any browser)

Solution 8 - Github

I found a way to view it in PHP. After doing some more snooping I found 2 solutions for offline and online viewing of .md files:

I recommend the offline version so you can do your editing even while you're doing your business on the throne. :)

Solution 9 - Github

There are people who does not use Google Chrome. There is a Firefox add-on called Markdown Viewer which is able to read Markdown files offline.

Solution 10 - Github

pandoc is a nice Text-To-Text conversion tool that solves the problem of offline visualization of your Markdown. Just issue:

pandoc -f markdown -t html README.md > README.html

Solution 11 - Github

have you tried ReText? It is a nice desktop Markdown editor

Solution 12 - Github

I found MarkView Google Chrome extension pretty useful, actually it's working like a charm:

> MarkView is a Chrome extention for editing and viewing markdown file with an outline view, support multiple table format styles, code block syntax highlight and Github Flavored Markdown.

> Features:

> 1. Editing and Viewing markdown file in web page style. 2. Auto reload local file when file is changed (Post-installation: select "Allow access to file URLs" option in chrome://extensions/) 3. Show outline beside the content in scrollable way 4. Have buttons for GoTop, ViewSource and GoBottom 5. Support Github Flavored Markdown table styles and code highlight.

  1. Highlight the code area for programming languages(eg. ```ruby)
  2. Support web pages printing with decent outlook(Chrome->File->Print...)
  3. Responsive: when the window size small than 940px, outline section will automatically hidden; resize bigger than 940px, outline section will display.
  4. MarkView will view all markdown files except those under raw.github.com because that subdomain only displays the source.

More features have been added to MarkView:

  1. WYSIWYG markdown editor

  2. Themes and Code Styling Selection

  3. Support Footnotes1 ↩

  4. Instant Slides Presentation

  5. Document Custom Styling

    • Add Theme CSS and Select
    • Add Code Style and Select
    • Write CSS, Save and Run

Solution 13 - Github

I like the vertical splitter in Downmarker, you can see the changes as you write!

Solution 14 - Github

You can use texts as a md viewer and md editor, its lightweight and neat. enter image description here

Solution 15 - Github

Geany has a plugin for markdown which does a fair job, giving you also a Markdown preview in the sidebar. It also runs on Linux, Mac OS X and Windows.

To use it, install geany, then install the package geany-plugin-markdown and select it from the plugin manager.

Solution 16 - Github

I just coded up an offline markdown viewer using the node.js file watcher and socket.io, so you point your browser at localhost and run ./markdownviewer /path/to/README.md and it streams it to the browser using websockets.

Solution 17 - Github

There is also StackEdit. It will work both online and offline (it uses your browser local storage).

You can also connect it with Dropbox or Google Drive to see files hosted on the cloud.

Solution 18 - Github

If you're a vim person, you can try the vim-preview plugin. Simply install it into your ~/.vim directory with your method of choice. Then you can open a Markdown file with vim and use the command :Preview which will open a new window in your browser and display the end result.

Solution 19 - Github

Consider Strapdown.

Strapdown is Javascript-based solution that renders the markdown content in the browser, which makes it great for offline-viewing. From their own description:

> Strapdown.js makes it embarrassingly simple to create elegant Markdown documents. No server-side compilation required.

So rename your .md markdown file to .html, and surround it with:

<xmp theme="united" style="display:none;">
# Markdown content here
…
</xmp>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>

and opening in any browser will show rendered HTML. Added bonus: you can easily change the theme.

Solution 20 - Github

For MAC I use Marked, for Windows I use Muto-Mark. Both support the GH stylesheet.

Solution 21 - Github

An easy solution for most situations: copy/paste the markdown into a viewer in the "cloud." Here are two choices:

  1. Dillinger.io
  2. Dingus

Nothing to install! Cross platform! Cross browser! Always available!

Disadvantages: could be hassle for large files, standard cloud application security issues.

Solution 22 - Github

For OS X, Mou is very nice, and it comes with two GitHub CSS themes.

Solution 23 - Github

Check out Haroopad. This is a really nice #markdown editor. It is free and available for multiple platforms. I've tried it on Mac OSX.

Solution 24 - Github

One of the simplest resources that works well on MacOSX is the Markdown Quick Look plugin found at InkMark. After installing this on OS X 10.9+, you simply select a markdown file in Finder and tap the space bar. I am not certain if the results are correlated 100% with Github but they are pretty good and make for a tiny unobtrusive offline viewer only solution. Mashable also wrote an article on 78 different tools if you'd like other options.

Makrdown-QuickLook-Preview

Solution 25 - Github

You can use extension called Markdown Syntax Highlighting for Notepad++. It is available on Github

enter image description here

After installation, new option in the Language dropdown will be appeared After installation, new option in the Language dropdown will be appeared

Solution 26 - Github

From now I use http://marxi.co/. Marxi.co has online and offline version.

Solution 27 - Github

Remarkable, certainly a great tool.

Note: Not available for Mac

Features:
  • Live preview
  • It's free.
  • Extremely lightweight
  • Export to HTML, PDF

Download: https://remarkableapp.github.io/

Edit 2022

I use and love Mark Text now. (https://marktext.app)

Solution 28 - Github

I frequently want portable applications. For this, I found

http://cloose.github.io/CuteMarkEd/ (I have just tried it briefly, and it seems to work fine).

http://markdownpad.com/faq.html#portable

Solution 29 - Github

RStudio can handle markdown files and convert them into html and pdf. If you already have it, you can use RStudio (it is an IDE for R programming language). It is free and open source, and works on Windows, Mac and Linux.

Solution 30 - Github

You may use Scribefire Next.

It's a Mozilla Firefox browser plugin. Just install the extension and fire up Firefox. Customize your toolbar and place the Scribefire shortcut to it. And since it's a browser plugin, you can use it in Mac, Linux and Windows.

When you want to write in Markdown mode, just click Edit Code from the Scribefire window.

Now to meet your purpose, go to Edit Code mode and copy all the texts and paste it to your .md file and upload.

There is no live preview feature for this, you have to toggle Edit Code and Edit Visually to preview your text.

I'm using it in my Linux Mint box:

enter image description here

enter image description here

Update:

It's year 2014, need to add some other awesome tool here for other readers and researchers. Just recently used Brackets + Markdown Preview Extension.

Solution 31 - Github

The popular Web Essentials plugin for Visual Studio offers a Markdown viewer and editor. It also supports the Github language syntax for adding code snippets.

http://vswebessentials.com/features/markdown

Solution 32 - Github

This php viewer come with responsive support and a numbers of option to customize.

Solution 33 - Github

You may use Firefox Markdown Viewer plugin that is so easy to install and use.

Solution 34 - Github

FYI, the Calibre ebook viewer does an OK job of parsing markdown files and displaying them.

Once calibre is installed, just ebook-viewer myfile.md.

Categories
Recommended Github Solutions
Recommended Markdown Solutions

Previous Solution:

How can I convert an image into Base64 string using JavaScript?

JavascriptBase64

Next Solution:

Are the days of passing const std::string & as a parameter over?

C++C++11

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionenchanceView Question on Stackoverflow
Solution 1 - GithubJim BergmanView Answer on Stackoverflow
Solution 2 - GithubJoeView Answer on Stackoverflow
Solution 3 - GithubMaximView Answer on Stackoverflow
Solution 4 - GithubsundeepView Answer on Stackoverflow
Solution 5 - GithubDavid BrabantView Answer on Stackoverflow
Solution 6 - GithubNicolas CornetteView Answer on Stackoverflow
Solution 7 - GithubpdueyView Answer on Stackoverflow
Solution 8 - GithubenchanceView Answer on Stackoverflow
Solution 9 - Githubair-dexView Answer on Stackoverflow
Solution 10 - GithubtonicebrianView Answer on Stackoverflow
Solution 11 - GithubNuno CostaView Answer on Stackoverflow
Solution 12 - GithubmariomaricView Answer on Stackoverflow
Solution 13 - GithubNathan DunnView Answer on Stackoverflow
Solution 14 - GithubHandsome NerdView Answer on Stackoverflow
Solution 15 - GithubAkronixView Answer on Stackoverflow
Solution 16 - GithubWilliam BudingtonView Answer on Stackoverflow
Solution 17 - GithubN AlexView Answer on Stackoverflow
Solution 18 - GithubPeter DiakumisView Answer on Stackoverflow
Solution 19 - GithubckhanView Answer on Stackoverflow
Solution 20 - GithubpseudomutoView Answer on Stackoverflow
Solution 21 - GithubaapView Answer on Stackoverflow
Solution 22 - GithubTachyonVortexView Answer on Stackoverflow
Solution 23 - GithubqmmrView Answer on Stackoverflow
Solution 24 - GithubTommie C.View Answer on Stackoverflow
Solution 25 - GithubnsvView Answer on Stackoverflow
Solution 26 - GithubfeeeperView Answer on Stackoverflow
Solution 27 - GithubIqbalView Answer on Stackoverflow
Solution 28 - Githubsancho.s ReinstateMonicaCellioView Answer on Stackoverflow
Solution 29 - GithubSaren TasciyanView Answer on Stackoverflow
Solution 30 - GithubGaryPView Answer on Stackoverflow
Solution 31 - GithubKyle B.View Answer on Stackoverflow
Solution 32 - GithubAzri JamilView Answer on Stackoverflow
Solution 33 - GithubMilad RahimiView Answer on Stackoverflow
Solution 34 - GithubRussView Answer on Stackoverflow