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

@webdesigndecal/mark2html

v0.0.11

Published

A quick way to generate basic websites with your markdowns

Downloads

3

Readme

A quick way to generate basic websites with your markdowns

Usage

Your markdowns stay the same. For detailed notes about the markdown syntax (in GitHub flavor), please check showdown.

To generate HTML from a markdown file, run npx @webdesigndecal/mark2html [your markdown file]. (npx is a package runner for Node.js modules. It allows you to run npm command-line utilities like mark2html without installing it globally, and comes with npm. But you can also install mark2html normally, with npm i -g @webdesigndecal/mark2html, and use it by just running mark2html in your command line.)

For example, with instructions.md, we may run either:

npx @webdesigndecal/mark2html instructions.md
# outputs to ./instructions-mark2html-output/

npx @webdesigndecal/mark2html instructions.md ./dist/
# outputs to specified output dir, ./dist/

We can specify the optional output dir as the second command line argument; if there is none specified, it'll default to [your file name]-mark2html-output, as shown above.

Here are some exciting macros to enhance your experience,

Including

{.include relative/path/to/src/file}

The text from another file will be injected in the page. The file will be searched relative to the markdown file or relative to the build-in resources directory.

File linking

{.link relative/path/to/src/file}
{.link relative/path/to/src/file | optional-text}

The file will be copied to the output directory & the markdown will be generated [relative/path/to/dist/file](optional-text).

Since the syntax for image embedding is ![relative/path/to/src/image](alt-text), we can similarly embed the image with the macro,

!{.link relative/path/to/src/image | alt-text}

If wish to only generate the relative/path/to/dist/file, consider using

{.link* relative/path/to/src/file}

Modifiers

If you wish to zip the file after copying to the destination, try adding a :zip suffix,

{.link:zip relative/path/to/src/file | optional-text}

Variables

To set a variable,

{.let variable value}
{.let variable}value{./let}
{.let variable}
<!-- Value can span multiple lines -->
{./let}

To inject a variable value

{. variable}

A powerful action is that you may set the value of a variable as a range of markdown text and replay that range of text with injection.

Raw

{.raw}
<!-- Some HTML -->
{./raw}

Some of your text will be pruned while it's transformed into HTML. Wrapping your text with {.raw} will preserve its content. When writing some template, you would want to wrap <!doctype>, <head>, <body> with {.raw}.

Development

After cloning the repo, run npm install.

You may find some samples demoing the features under examples/. To generate a website, run bin/cli.js path/to/markdown.md; running bin/cli.js examples/assignment-sample/instructions.md will generate a website placed in the file's directory examples/assignment-sample/instructions-mark2html-output/.