684

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.

Jeroen
  • 60,696
  • 40
  • 206
  • 339
enchance
  • 29,075
  • 35
  • 87
  • 127

34 Answers34

477

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.

Jim Bergman
  • 5,207
  • 2
  • 17
  • 19
319

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

Check it out here.

starball
  • 20,030
  • 7
  • 43
  • 238
Joe
  • 16,328
  • 12
  • 61
  • 75
  • It is in fact really useful, but it does not render exactly like github (e.g. raw html, some syntax highlightning, etc). I found that [gfms](https://github.com/ypocat/gfms) solution (python based) gets the job done pretty well. – luchosrock Aug 01 '14 at 13:55
  • 3
    @luchosrock Could you post a gist of Markdown that doesn't render correctly? If there's any mismatch, then I'll file a bug and fix it. – Joe Aug 01 '14 at 17:56
  • 3
    @luchosrock I think you may be confusing the two though. From gfms's own docs, "the current implementation of GFMS doesn't color the source code blocks", whereas Grip does. Grip uses GitHub's own Markdown API and styles out-of-the-box, not a custom solution, which is what makes Grip so accurate. Also, gfms is *node* based, not Python. – Joe Aug 01 '14 at 18:04
  • yeah I must have confused. I never said it was a bad tool anyway. Thanks for writing it. – luchosrock Aug 02 '14 at 18:59
  • 3
    Unlike other solutions, works like a charm on Linux! Thanks! – akhmed Sep 15 '15 at 02:31
  • 1
    Note that links in github wikis dont work, ie you link to `[foo](foo)`, and it tries to open page `foo`, but it should open `foo.md` – Hugh Perkins Feb 16 '17 at 12:33
  • 5
    This is a useful tool, however it seems to use GitHub's API for actually rendering the page in the browser. When I refresh the page more than 30 times, I get a "GitHub Rate Limit Reached" error. It appears that Grip does not support Offline viewing. – Neha Karanjkar Oct 01 '18 at 10:10
117

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

enter image description here

BurnsBA
  • 4,347
  • 27
  • 39
Maxim
  • 7,268
  • 1
  • 32
  • 44
  • 2
    This is nice if you are editing many .md files. And instant preview, without having to toggle to another app is always a plus. – dval Oct 13 '15 at 14:12
  • There's even an auto-scroll package: https://github.com/mark-hahn/markdown-scroll-sync. Currently, you'd have to patch https://github.com/mark-hahn/markdown-scroll-sync/pull/66/files for it work with out warnings. – Dror May 22 '17 at 07:55
  • 1
    This is also a good suggestion as well. Instant preview with side-by-side pane is a bonus! No need to save and tab out constantly. – AnimNations Jun 08 '18 at 15:21
  • in Atom, "Packages -> Markdown Preview -> Toggle Preview" to actually see the rendered document – BurnsBA Jan 22 '21 at 01:11
  • Now that `Atom` has been sunset by Microsoft. Can someone recommend an alternative still endorsed by the GitHub team? – WeakPointer Jan 07 '23 at 14:03
92

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

sundeep
  • 1,792
  • 1
  • 15
  • 21
  • 6
    Cool, a solution I had installed already! I had two small things to figure out: To open the preview pane, right-click the file's tab along the top and select "Open Preview (Ctrl?Shift+V)". To invoke the intellisense that @sundeep mentions, press Ctrl+Space in the editor window. – Ada Richards Jan 20 '19 at 06:53
  • 6
    ctrl+k v to preview – aderchox May 17 '19 at 09:46
  • 2
    In case somebody's floundering for the macOS combination it's Cmd + Shift + v – Zoso Dec 14 '20 at 15:06
63

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

David Brabant
  • 41,623
  • 16
  • 83
  • 111
  • 21
    If you want to get support for github flavoured markdown you'll have to get MarkdownPad Pro - for ~15USD. I personally would pay maybe 5USD for it but for sure not 15USD. So if somebody can recommend something else please do so. – floriank Sep 09 '13 at 01:16
  • 4
    Just paid the $15 for the pro version, imho worth it, but would be nice if it ran under Mono so I could use it in linux/osx, which is where more of my dev is heading these days. – Tracker1 Nov 04 '13 at 19:05
  • MarkdownPad seemed to go into mothballs a while back, so I (Disclosure alert: Yes, I made & sell this) made [MarkUpDown](http://markupdown.com), which isn't too shabby at $15. Should be GitHub Markdown friendly, and if it isn't, let me know how it isn't & I'll get it fixed. – ruffin May 01 '17 at 14:36
44

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.

Nicolas Cornette
  • 772
  • 7
  • 11
  • Hello, this seems to be an great app, however I can not open two .md files at same time, since most of the time I just want it to be an viewer rather than editor. Will you extends this with such syntax as http://localhost:8000/ to make it able to view multiple .md files? – arcticfox Jun 20 '14 at 22:54
  • You can edit multiple files with `-p ` option – Nicolas Cornette Jun 16 '16 at 09:12
  • gives a Traceback error for me – aderchox May 17 '19 at 09:49
  • Works, but you need to check the latest issues w.r.t version of Python-Markdown is needed. e.g. this report "Installing with pip the installation goes fine, but when launching the editor from command line it throws the following error: ModuleNotFoundError: No module named 'pymdownx.extrarawhtml' Uninstalling pymdown-extensions and reinstalling a previous version e.g. pymdown-extensions==7.0 solved the issue for me. This happens because the requirement for installation is pymdown-extensions>=2.0 but can quickly be fixed by specifying exact version." – Goblinhack Jan 13 '21 at 09:33
29

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)
pduey
  • 3,706
  • 2
  • 23
  • 31
  • Unfortunately, ``gfms`` doesn't render line breaks the way that GFM does--it doesn't insert a
    when there's a single line break inside of a paragraph, as GFM does. But for "pure" Markdown rendering, it's fine.
    – Ed Ruder May 28 '14 at 18:09
  • 2
    There is an updated version of **gfms** ([github.com/pawel-wiejacha/gfms](https://github.com/pawel-wiejacha/gfms)) that uses better GFM Markdown backend (Marked) and inserts line breaks correctly. It also has improved directory listings and PDF export feature. – Pawel Wiejacha Jun 21 '14 at 11:23
  • 5
    I tried this because it sounded promising. Had to install node.js (expected) but also python. I gave up when it wanted a complete C++ developer toolchain. So depending on your platform it might be easy but if you are on Windows don't even try this suggestion. – Chase Jan 22 '15 at 02:06
  • Pretty much nothing written in NodeJS works on Windows. When a "install this software" guide starts with "npm install", I've learned the hard way to just walk away. NodeJS is not as cross-platform as developers would like people to believe. Golang and Python are similarly bad but not as bad as Node. The only scripting language that I know of that is truly cross-platform and works everywhere with minimal effort and doesn't require hundreds of MB of junk to be installed is PHP. The PHP CLI is a hidden gem - it's better as a command-line scripting language than anything else out there. – CubicleSoft May 19 '18 at 03:34
28

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. :)

enchance
  • 29,075
  • 35
  • 87
  • 127
23

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.

bcag2
  • 1,988
  • 1
  • 17
  • 31
air-dex
  • 4,130
  • 2
  • 25
  • 25
22

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
tonicebrian
  • 4,715
  • 5
  • 41
  • 65
20

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

Nuno Costa
  • 1,620
  • 17
  • 14
14

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.
  6. Highlight the code area for programming languages(eg. ```ruby)
  7. Support web pages printing with decent outlook(Chrome->File->Print...)
  8. Responsive: when the window size small than 940px, outline section will automatically hidden; resize bigger than 940px, outline section will display.
  9. 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
swcool
  • 1,003
  • 9
  • 10
mariomaric
  • 166
  • 2
  • 5
13

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

Nathan
  • 2,617
  • 1
  • 19
  • 27
11

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

Handsome Nerd
  • 17,114
  • 22
  • 95
  • 173
  • 1
    Looks good, but the installer is 13mb which makes me wonder what all it's installing. – Brian Aug 10 '13 at 11:42
  • 24
    Not free: http://www.texts.io/purchase/ – TN. Feb 23 '14 at 20:35
  • 5
    Also not available for Linux. – jameshfisher Apr 01 '14 at 16:56
  • 4
    I found this to render many md files quite poorly. – Zv_oDD Sep 26 '14 at 02:03
  • 2
    On the mac, it requires pre-installing some external tool "fandoc", which I don't know or trust, especially that it lies somewhere in my OS. The wrapper itself (Texts) weighs about 4MB which is far too big for an .md renderer, even without that external tool... well, not so impressive app. – Motti Shneor Jan 26 '16 at 14:42
  • 1
    Doesn't render images from git markdown. Forces you to install pandoc. – Dr Deo Feb 07 '16 at 09:11
  • I tried it. It tries to be WYSIWYG but it changes what I'm writing as I write and it feels awkward - I don't feel in control. I've worked with other Markdown tools I was more comfortable with. Also, as others have noted, it's not clear whether it's a trial or paid product. The Terms and Conditions sounded like a commercial product. – Carl Smotricz Apr 09 '23 at 08:45
11

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.

Akronix
  • 1,858
  • 2
  • 19
  • 32
9

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.

9

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.

N Alex
  • 1,014
  • 2
  • 18
  • 29
8

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.

Peter Diakumis
  • 3,942
  • 2
  • 28
  • 26
  • 1
    Thanks! Unfortunately, the plugin requires a builtin ruby interpreter and some gems. Too many dependencies for me... – xverges Jan 12 '15 at 14:07
  • 2
    Yeah, sorry about that - I had installed it a while ago so forgot to mention about the ruby gems (for future readers: the plugin's link I've included above describes how to tackle this if you're into that sort of ruby stuff). – Peter Diakumis Jan 13 '15 at 03:04
  • 1
    Another vim plugin, this one using javascript: https://github.com/suan/vim-instant-markdown – matiasg Jun 12 '15 at 18:53
7

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.

ckhan
  • 4,771
  • 24
  • 26
6

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

Tommie C.
  • 12,895
  • 5
  • 82
  • 100
5

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

pseudomuto
  • 266
  • 4
  • 3
5

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.

aap
  • 897
  • 11
  • 15
  • And, of course, You're sharing your pre-release docs with the whole wide world, before even being able to proof them... – Motti Shneor Jan 26 '16 at 13:58
4

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

TachyonVortex
  • 8,242
  • 3
  • 48
  • 63
  • Nice but buggy. E.g. you remove the header marks ###, but the WYSIWYG part still shows it as header. And so on and on, I think I found some 3 or 4 bugs in 2 minutes of using it. – mojuba Apr 30 '14 at 16:52
4

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.

qmmr
  • 502
  • 1
  • 5
  • 17
3

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

Walkman
  • 67
  • 1
  • 2
  • 8
Sarvar Nishonboyev
  • 12,262
  • 10
  • 69
  • 70
2

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

feeeper
  • 2,865
  • 4
  • 28
  • 42
2

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)

Iqbal
  • 2,094
  • 1
  • 20
  • 28
  • 2
    Only works in Linux. The Windows version is in progress. – Alvaro Montoro Jan 21 '16 at 14:22
  • Not really "Cross" platform. Linux and Windows only - no Mac. – Motti Shneor Jan 26 '16 at 13:57
  • For what it's worth, I use Mark Text on Mac, and it's the closest thing I've found to a plain viewer. – Oscar Feb 08 '22 at 23:04
  • Mark Text looks very promising and I expect it to be a better solution than the others mentioned so far. However, I didn't try it yet because the download is 149 MB (!). This is a little heavy for a simple editor. It's not that I am concerned about space consumption, but what ecosystem / underlying software stack would it install? If it's Java or something like that, I won't try it. – Binarus Feb 10 '22 at 11:15
2

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

2

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.

Saren Tasciyan
  • 454
  • 4
  • 15
1

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.

GaryP
  • 2,173
  • 1
  • 21
  • 28
1

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

Kyle B.
  • 5,737
  • 6
  • 39
  • 57
0

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

Azri Jamil
  • 2,394
  • 2
  • 29
  • 37
0

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

udondan
  • 57,263
  • 20
  • 190
  • 175
Milad Rahimi
  • 3,464
  • 3
  • 27
  • 39
0

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.

Russ
  • 1