npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@nichoth/vmd

v1.34.0

Published

Preview markdown files

Downloads

3

Readme

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
    • [x] 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