Code Monkey home page Code Monkey logo

vmd's Introduction

vmd

NPM version build status Downloads Codacy Badge

Preview markdown files in a separate window. Markdown is formatted exactly the same as on GitHub.

Features | Installation | Usage | Examples | Command-line options | Configuration

screenshot

Features

  • GitHub style: The markdown content is rendered as close to the way it's rendered on GitHub as possible.

  • File watching: Local files opened in vmd are watched for changes and the viewer will automatically update when a file has been changed. This makes it ideal for writing documents in your favorite text editor and get a live preview.

  • Standard input: View any markdown text from other programs by piping another program's output in to vmd. Check out the examples for cool use cases.

  • Drag & Drop: Drag files from your file browser or desktop on to a vmd window and render it. Hold the Shift key while dropping to open the file in a new window.

  • Navigation: Navigate within linked sections in a document, open relative links to other documents in the same window or in a new one (shift-click), and always be able to go back in the history. And open links to directories in your file manager and external links in your default browser.

  • Clipboard: Copy links and local file paths to the clipboard, and even copy images in binary format to paste them in to your image editing software.

  • Emoji: :bowtie: Displays emoji, such as :sweat_drops:. Take a look at the Emoji Cheat Sheet for a list of available emoji.

  • Checklists: Renders GitHub-style checklists.

     - [ ] List item 1
     - [x] List item 2
    
    • List item 1
    • List item 2
  • Search in page: Search within your markdown file and scroll to the results. Select "Edit -> Find" from the menu or hit Ctrl+F (or Cmd+F on OS X).

  • Customization: Select different themes and provide your own styles to make vmd look the way you want. Take a look at the Options for an overview of available customization options.

  • Front Matter: Renders Front Matter in YAML and, if enabled, in TOML and JSON so you can preview your Jekyll and Hugo content in vmd. See some examples.

Installation

$ npm install -g vmd

Usage

vmd [FILE] [OPTIONS]

If no FILE is provided it will try to read from standard input, or automatically look for "README.md" if in a TTY.

Examples

Read a file from disk:

$ vmd DOCUMENT.md

When no path to a document is supplied, "README.md" will be opened by default:

$ vmd

When a path to a directory is supplied, "directory/README.md" will be opened by default:

$ vmd node_modules/electron # opens node_modules/electron/README.md

It reads from stdin so you can pipe markdown text in to it:

$ cat README.md | vmd

For example, you can see the readme for browserify like so:

$ npm view browserify readme | vmd

Or from a GitHub project:

$ gh-rtfm substack/node-browserify | vmd

Options

  • -v, --version: Display the version number.

  • --versions: Display version numbers of different internal components such as Electron.

  • -h, --help: Display usage instructions.

  • -d, --devtools: Open with the developer tools open.

  • -z, --zoom=NUM: Set a zoom factor to make the content larger or smaller. For example --zoom=1.25

  • --document=FILENAME: vmd will look for "README.md" by default if no file path has been specified. This can be changed to something else.

  • --list-highlight-themes: Display a list of available syntax highlighting themes.

  • --styles-main=FILE: Provide a custom CSS file to display the content.

  • --styles-extra=FILE: Provide a custom CSS file to do additional styling. For example to override some CSS properties fr the default style.

  • --highlight-theme=NAME: Use a different syntax highlighting theme for code blocks. Run vmd --list-highlight-themes to get a list of available themes.

  • --highlight-stylesheet=FILE: Provide a custom CSS file for syntax highlighting in code blocks.

  • --window-preservestate=false: By default vmd preserves the window state for the next session, set this option to false to disable this.

  • --window-autohidemenubar=true: By default vmd always shows the menu bar. To hide it set this flag to true. The menu visibility can be toggled using the Alt key. Linux and Windows only.

  • --frontmatter-formats=FORMATS: A comma-separated list of Front Matter formats. By default only the YAML format is enabled. Supported formats are YAML, TOML and JSON.

  • --frontmatter-renderer=RENDERER: Specify how to render Front Matter. Can be “table”, “code” or “none”. If “none” is specified the Front Matter will not be rendered at all. Default is “table”.

Configuration

All Options that contain a value can be persisted in configuration file in INI, YAML or JSON format. The configuration file can be in any of the following locations: $HOME/.vmdrc, $HOME/.vmd/config, $HOME/.config/vmd, $HOME/.config/vmd/config, /etc/vmdrc, or a custom location provided using the --config=FILE option.

If you wish to change some of the default settings create a config file called .vmdrc in your home directory or in ~/.config/vmd.

Here's a sample config file:

zoom = 1.2
highlight.theme = monokai
styles.extra = /my/custom/vmd/style-fixes.css

Options provided as command-line arguments will always have precedence over the values in the configuration file. So --zoom=1.5 will set the zoom factor to 1.5 regardless of what's in the config file.

Authors

Max Kueng, Yoshua Wuyts and contributors.

License

MIT

vmd's People

Contributors

alexandergugel avatar amovah avatar gibatronic avatar hackergrrl avatar harish2704 avatar jefftriplett avatar johannjacobsohn avatar josephfrazier avatar langpavel avatar mattdesl avatar maxkueng avatar monsterkodi avatar orbitbot avatar pavloo avatar philipbordallo avatar ralphtheninja avatar supercrabtree avatar vwal avatar waynezhang avatar yisibl avatar yoshuawuyts avatar zeke avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vmd's Issues

Default to README.md

Would be nice if it would default to README.md when no file name is supplied.

noop

derp, wrong repo haha

Add ability to pass a directory of .md files

Firstly, really cool little app + tool- this is exactly something I've been wanting of late, as I have a similar folder like your knowledge repo 😉 However, I often find myself needing to toggle between a few .md files on a given topic, like git for instance!

The idea I have is adding the ability to pass vmd a directory of .md files. Upon doing this, vmd would create a sidebar containing a list of links of these files, which upon clicking on loads in the rendered view.

Sound useful to anyone else?

Set a proper window title

Currently the window title is "Atom Shell". Would be nice if it was something like "filename - vmd" instead.

Feature suggestion: default window

Given that drag'n'drop functionality for markdown files exist (#69), would it be feasible to have a default view for the app when started in a folder without an existing .md file?

Eg. something like this (just a single UX element without animations or simple text would work fine)
https://cdn.css-tricks.com/wp-content/uploads/2015/11/drag-drop-upload-1.gif

I'd be willing to work on a PR for this if you're interested, but am swamped with things at least the upcoming week, so if someone else is keen just go ahead.

Fresh install not working

Hmm, just started hitting this on a fresh global install. I cleared my ~/.electron cached downloads and tried again, same error.

screen shot 2016-01-19 at 4 17 13 pm

I'll poke around.

pipe stdin to vmd

e.g. be able to do this:

cat README.md | vmd

Doesn't make vmd a pager yet, but does allow for more unixy actions. Also maybe detect if in TTY to pipe to stdout. Not sure what the added value would be over something like cat, but playing ball with cli tools is a good thing imo.

vmd README.md | grep -C 3 foo > file.md

"About vmd" throws error on OSX

On OSX with a fresh install (just found out about this project today) the About vmd menu option throws an error:

screen shot 2016-04-03 at 23 27 58

This happens consistently (tried a few times).

git tags

I have retroactively added and pushed version tags to the corresponding commits so it's easier to check out the source at a specific version.

Enhancement: Vim Scrolling

I love this tool and use it almost every day while looking over READMEs in local node_modules. One thing that I personally would really enjoy—which is a bit of a pipe dream—would be keyboard scrolling with J and K keys. (It would also be nice to be able to use gg and G as well, not to mention searching for text with /).

Necessary feature: zoom

This pager is inaccessible to me, and others, without the ability to change the default text size or zoom.

Get rid of unnecessary / broken menu items

There are some unnecessary and broken menu items in the "vmd" menu. I believe they were just copy-pasted from Electron's menu template example and we should get rid of them.

  • At least on Linux all menu items except "Quit" are broken and result in an error (see screenshot at the bottom)
  • The "About" menu item could be fixed to provide some basic information about the package. But until there's a proper "About" dialog it should be removed or disabled.
  • The "Services" menu is empty.
  • The "Hide", "Hide others", "Show all" menus are unnecessary (and broken). Pretty much every OS comes with a window manager that already has convenient ways to show, hide, etc. a window.

vmd-menu

This is the error when clicking any of the menu items:

vmd-menu-error

Add archived version to releases?

Would be awesome if you guys added an archive to the releases so we wont have to download and run npm ourselfs. What do you think?

Syntax highlighting

Code inside the tripple-back-tick blocks ``` currently isn't highlighted.

Cannot load style node_modules/github-markdown-css/github-markdown.css with default usage

Hi,

I always get:

Cannot load style node_modules/github-markdown-css/github-markdown.css: no such file

error when using default, documented command line:

vmd README.md 

or:

vmd

or:

npm view browserify readme | vmd

The github-markdown-css is listed as dependency.

node --version
v4.2.4
npm --version
2.14.12
vmd --version
1.22.1

OS X/10.10.*

Thanks!

Drag files in to vmd

Would be cool if it was possible to drag files from the desktop or file manager in to vmd.
When vmd receives a file it would automatically render the new file and start watching it.
The functionality to change the file inside a vmd window is already implemented.

Bonus features

  • Dropping a file while holding the shift key would open the dropped file in a new window.
  • Ability to drop an URL to a markdown file and render it.

vmd crashes before start

I just updated vmd to version 1.25.1 and now it won't start anymore 😢

App threw an error when running [TypeError: Cannot read property 'on' of undefined]
A JavaScript error occurred in the main process
Uncaught Exception:
TypeError: Cannot read property 'on' of undefined
    at Object.<anonymous> (/usr/lib/node_modules/vmd/main/main.js:65:4)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:313:12)
    at loadApplicationPackage (/usr/lib/node_modules/vmd/node_modules/electron-prebuilt/dist/resources/default_app/main.js:257:23)
    at Object.<anonymous> (/usr/lib/node_modules/vmd/node_modules/electron-prebuilt/dist/resources/default_app/main.js:289:5)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)

I really love this app, so is there anything I can do to fix it?

Doesn't open a window

I tried to run vmd README.md and it does... nothing.

Does it perhaps not work on Linux?

fresh install displays contents of `main/main.js`

expected

After installing with npm -g vmd, running vmd readme.md will open a window with a markdown preview of my readme.

actual

running vmd readme.md or even vmd without arguments, I get the following:

screen shot 2016-08-08 at 1 23 45 pm

I can open a file to preview with the app menu (Command+O) after the program has opened, but initial state is always the contents of main/main.js from the vmd repo as far as I can tell. I haven't cloned it locally so it's definitely coming from inside the electron app.

Add a window icon

Would be cool to have a nice window icon that would be visible in the task bar & window title bar.

"vmd --help" doesn't work

A JavaScript error occurred in the main process
Uncaught Exception:
Error: ENOENT: no such file or directory, open '/home/max/projects/vmd/main/usage.txt'
    at Error (native)
    at Object.fs.openSync (fs.js:584:18)
    at Object.module.(anonymous function) [as openSync] (ATOM_SHELL_ASAR.js:153:20)
    at Object.fs.readFileSync (fs.js:431:33)
    at Object.fs.readFileSync (ATOM_SHELL_ASAR.js:401:29)
    at Object.<anonymous> (/home/max/projects/vmd/main/main.js:18:18)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:313:12)

Images are not loading

Images with a relative path to the Markdown file won't load.

It only works when inside the vmd repository and ./cli.js README.md. But it doesn't work with anything else.

Erro in install on OSX

Downloading electron-v0.30.6-darwin-x64.zip
[============================================>] 100.0% of 35.32 MB (780.66 kB/s)
/usr/local/lib/node_modules/vmd/node_modules/electron-prebuilt/install.js:15
throw err
^
Error: EACCES, rename '/usr/local/lib/node_modules/vmd/node_modules/electron-prebuilt/electron-tmp-download-4550-1441578968203/electron-v0.30.6-darwin-x64.zip'
at Error (native)
npm ERR! Darwin 14.5.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "-g" "vmd"
npm ERR! node v0.12.4
npm ERR! npm v2.10.1
npm ERR! code ELIFECYCLE

npm ERR! [email protected] postinstall: node install.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'node install.js'.
npm ERR! This is most likely a problem with the electron-prebuilt package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node install.js
npm ERR! You can get their info via:
npm ERR! npm owner ls electron-prebuilt
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/jonatasfreitas/npm-debug.log

Image tags no longer showing

I just updated to latest vmd and <img> tags don't seem to be showing anymore. Screenshot attached:

(look near the bottom)

screen shot 2016-01-06 at 11 48 29 am

No longer working

I installed the latest (1.21.0) and can't seem to use it any more. Error attached.
screen shot 2016-01-06 at 11 37 29 am

node v4
npm 2.14.2

upgrade base settings

var marked = require('marked');
marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: true,
  smartLists: true,
  smartypants: false
});

console.log(marked('I am using __markdown__.'));

Create AUR package

I'm planning on packaging vmd for Arch Linux. But "vmd" is already taken as a package name in the Arch User Repository (AUR) by a program that does "Visual Molecular Dynamics".

Is there a preferred alternative name that I should use? Any suggestions?

"File" -> "Open" dialog

Open a file in vmd by selecting it from the file system.

Menu structure:

  • File
    • Open
    • Open in new window
    • Print

Show/hide/enable/disable menu items based on context

Some menu items in both the context menu and the application menu should only be enabled when certain conditions are met, others should be hidden.

Examples:

  • Edit -> Copy should only be visible when some text is selected
  • History -> Back should only be enabled if it's possible to go back
  • History -> Forward should only be enabled if it's possible to go forward

RPC call to scroll to search text (scroll syncing)

here's the idea:

  1. I create a very light weight plugin for my editor (vi, sublime text, emacs, atom, whatever)
  2. all the plugin does is vmd scroll-to <current text buffer> either on save, or perhaps when the text buffer changes, or perhaps polling - where <current text buffer> is literally the text being displayed by the editor
  3. vmd renders the text buffer to html, and searches for that html, if there's a match then scroll to the beginning of the text

This is easier than trying to exactly co-ordinate scroll positions between an editor and the vmd window, and would make editor plugin creation trivial

Only consideration could be how heavy this is - probably not that heavy, how big is a text buffer, couple of hundred bytes?

Missing background on Highlight.js themes

For most Highlight.js themes background is pretty much part of the theme. However, background is currently missing with vmd.

npm v browserify readme |vmd --highlight-theme=solarized-dark

should be:

previous + ad-hoc hacks

Some themes are really ugly without a proper background:

npm v browserify readme |vmd --highlight-theme=far

Fixing this issue requires applying a hljs class on pre element or containing div. Unfortunately, it isn't that simple because of a higher-specificity rule in github-markdown-css. I don't really know how to solve that. Any ideas?

Search within document

Would be nice to be able to search within a document.

I was thinking about the following functionality, similar to how it works in browsers:

  • Press Control/Cmd+F or select "Search" from a menu, type search query.
  • Highlight all results (preferably as you type).
  • Jump back and forth between results.
  • Press Esc to hide search input and clear results.

Things to check out:

  • webContents.findInPage(text[, options]) (docs)
  • webContents.stopFindInPage(action) (docs)

Open links in external browser

Some thoughts and opinions on what links inside the rendered markdown document should do.

  • Links to external sites should open in the default desktop browser.
  • Links to sections within the same document (e.g. #my-section-title) should load in the same window.
  • Debatable: Relative links to other markdown documents in (e.g. ./CHANGELOG.md)
  • Debatable: Links to external markdown documents (e.g. github.com/other/project/README.md)
  • Thinkable: How does one get back after opening a link that opens in the same window?

atom-shell has the shell module that could help with this. It also provides shell.openExternal(url).

Support html/pdf generation

Being able to generate html/pdf files from the terminal would be great.

vmd readme.md > readme.html
vmd readme.md > readme.pdf

Stylesheet

It would be nice to be able to modify the defaults stylesheets to use alternative one.

vmd README.md --style=/folderCss/styles.css"

or with a config file vmd.conf in the .md directory

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.