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

markserv

v1.17.4

Published

๐Ÿ serve markdown as html (GitHub style), index directories, live-reload as you edit

Downloads

2,109

Readme

:checkered_flag: serve markdown as html (GitHub style), index directories, and live-reload as you edit

Gitter CHANGELOG Build Status Coverage Status All Contributors Npm Version XO code style Known Vulnerabilities

:sparkles: Features

  • Markdown content rendered as HTML
  • GitHub flavor CSS and Syntax Highlighting
  • Just in Time Templating: Markdown, HTML & LESS
  • LiveReload as you edit
  • Directory indexes
  • MIME Type file support

Supporting: MathJax, Chinese Characters, Table of Contents, Tables, Heading Anchors

:computer: Installation

# NPM
$ npm i -g markserv

# Yarn
$ yarn global add markserv

:joystick: Usage

To start Markserv from the CLI

# Open closest README.md
$ readme

# Open file
$ markserv README.md

# Open a directory
$ markserv node_modules

Start Markserv and open a file or directory.

# File
$ markserv ./path/to/file.md

# Directory
$ markserv ./

Start Markserv and open the closest README.md file in the browser:

$ readme

:zap: Live Reload

To see real-time updates as you save your markdown files, you will need to install the LiveReload plugin for your browser:

With the Live Reload plugin installed and turned on, you should see the page reloading as you save your Markdown file.

:link: Markdown Links

You can link to an external Markdown file in the same way that you use GitHub Wiki links. You can use the example code here to see how external links work.

Example code:

[Skateboarding Dog!](tests/Linked-Markdown-Example.md)

Example link:

Skateboarding Dog!

:stopwatch: Just in Time Templating

Markserv allows you to include nested content. Templates are fetched and rendered when you request them in your browser. The maxDepth of includes is set to 10.

If you would like to look at an example, you can look in the tests/templates directory of this repo.

To see the server output of this templating example:

$ git [email protected]/f1lt3r/markserv.git
$ cd markserv
$ markserv tests/templates/index.html

Include Markdown

Note: Any markdown files that you include will be transformed to HTML.

Where foo/bar/baz/qux.md equals:

## Qux

And Markserv renders the following content:

# Include Markdown
{markdown: foo/bar/baz/qux.md}

The server response will be:

<h1>Include Markdown</h1>
<h2>Foo Bar</h2>

Include HTML

Where foo/bar/baz/qux.html equals:

<h2>Qux</h2>

And Markserv renders the following content:

# Include Markdown
{html: foo/bar/baz/qux.html}

The server response will be:

<h1>Include Markdown</h1>
<h2>Qux</h2>

Include LESS

Note: Any LESS files that you include will be transformed to CSS.

Where foo/bar/baz/qux.css equals:

@link-color: green;
a {color: @link-color}

And Markserv renders the following content:

<style>{less: foo/bar/baz/qux.css}</style>

The server response will be:

<style>
a {
  color: #008000;
}
</style>

:crossed_flags: Flags

To list the options/flags for the markserv CLI tool:

$ markserv --help

Changing the HTTP Port

You can change the HTTP Port like this:

markserv -p 80

Making Markserv available to external networks

In some cases localhost might be the address on which the server is listening, in which case it is hard to make the site available to external networks even with the right IP. Use the following as an example to make sure the server is accessible from external networks:

markserv -p 8642 -a 0.0.0.0

Above example runs the server on port 8642 and it can be accessed from external networks using public IP of the machine on which the server is running. If you want the server to keep running in a seperate thread even when you log out, use this:

nohup markserv -p 8642 -a 0.0.0.0 &

This will make the server instance persistent and will be available to access even when you log out or even when your ssh session closes (in case you are accessing a remote machine through ssh to set up markserv server)

:cupid: Credits

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!