We need a better Markdown previewer.

Overview

logo

We need a better Markdown previewer.

travis

pen is a Markdown previewer written in JavaScript, aiming to just work.

There are literally tons of Markdown previewers out there. I love some of them, I even made one of them. Nevertheless, we always need a better one, don't we?

Using pen is super simple, we don't need to install any special editor or launch any GUI application. pen is just a tidy command-line tool. You can use your favourite editor and browser. No manual refresh is even needed.

Also, the previewer renders the content using React. It means that it will not re-render entire DOM when the document is updated. This is a huge advantage because images or other media won't be reloaded for the DOM update.

I personally love to use pen, and I hope you love it too. ✒️

Demo

Here is a short demo showing how awesome pen is.

demo

The following demo shows pen incrementally updates only modified part using React and its Reconciliation.

incremental update

Requirement

pen uses Node.js >= 4.0. It may not work on earlier versions.

Install

Using npm:

npm i -g pen

You can try using pen with npx:

npx pen

Usage

To use pen, simply run the pen command.

pen README.md

The command above will launch a pen server and open the file in your default browser. The server will listen to a 6060 port by default. To be honest, you don't even need to launch it with a filename. You can manually open http://localhost:6060/README.md, or any other files in the same directory.

To stop the server, enter ^C.

For the further details of the pen command, please enter pen -h or pen --help.

Pandoc

Pen uses markdown-it as Markdown parser by default, but it also supports Pandoc. Please provide a proper Pandoc format for the value.

pen --pandoc gfm README.md

Contribution

I welcome every contribution on pen. You may start from forking and cloning this repo.

git clone [email protected]:your_username/pen.git
cd pen

# Install dependencies
npm i

# Lint, build, and test pen codes at once
npm test

To build frontend scripts:

npm run build

To lint with ESLint:

npm run lint

To test with Mocha

npm run mocha

License

Pen is released under the MIT License.

Comments
  • Update eslint files

    Update eslint files

    1. Prevent eslint from looking in parent folders to the root

      By default, ESLint will look for configuration files in all parent folders up to the root directory. Preventing it from doing so. This is may cause weird bug.

    2. The use of .eslintrc has been deprecated. Replacing with .eslintrc.yml

      You may ask... "Why Yaml?" JSON cannot contain any comment and unnecessarily restricted. My personal best choice is TOML but it's unavailable for eslint so I choosed Yaml.

    Reference
    • https://arp242.net/weblog/json_as_configuration_files-_please_dont
    opened by simnalamburt 4
  • Basic housekeepings

    Basic housekeepings

    I hereby introduce basic housekeeping changes before I make a significant change to this project.

    1. Build time has reduced from ~160s to ~60s. Thanks to Yarn. image becomes image
    2. Now the CI tests all Node.js v4, v6, and v7 (latest) parallely.
    3. Updated all dependencies.

    Closes #4

    opened by simnalamburt 1
  • use opn instead of open

    use opn instead of open

    opn is currently maintained, unlike open.

    Also, it works correctly on my machine. Unlike open, which opens three Firefox tabs: www.http.com, file:////localhost and 6060/README.md :D

    opened by valpackett 1
  • Bump clean-css from 4.1.9 to 4.1.11

    Bump clean-css from 4.1.9 to 4.1.11

    Bumps clean-css from 4.1.9 to 4.1.11.

    Changelog

    Sourced from clean-css's changelog.

    4.1.11 / 2018-03-06

    • Backports fixes to ReDOS vulnerabilities in validator code.

    4.1.10 / 2018-03-05

    • Fixed issue #988 - edge case in dropping default animation-duration.
    • Fixed issue #989 - edge case in removing unused at rules.
    • Fixed issue #1001 - corrupted tokenizer state.
    • Fixed issue #1006 - edge case in handling invalid source maps.
    • Fixed issue #1008 - edge case in breaking up font shorthand.
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump nwmatcher from 1.4.1 to 1.4.4

    Bump nwmatcher from 1.4.1 to 1.4.4

    Bumps nwmatcher from 1.4.1 to 1.4.4.

    Release notes

    Sourced from nwmatcher's releases.

    A fast CSS selector engine and matcher

    This release has correction/fixes for the following behaviours:

    • fixed DOM walking to avoid using unsupported DOM methods on non 'Elements' nodes
    • improved DOM walking performances in JS only versions using the native traversal API
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump react-dom from 16.2.0 to 16.2.1

    Bump react-dom from 16.2.0 to 16.2.1

    Bumps react-dom from 16.2.0 to 16.2.1.

    Changelog

    Sourced from react-dom's changelog.

    16.2.1 (August 1, 2018)

    React DOM Server

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump lodash from 4.17.10 to 4.17.15

    Bump lodash from 4.17.10 to 4.17.15

    Bumps lodash from 4.17.10 to 4.17.15.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Support run mult server instance when without port arguments

    Support run mult server instance when without port arguments

    • Support run mult server instance when without port arguments

    • 支持在没有指定 port 参数时,可以多次使用 pen 命令。 目前在没有指定 port 的情况下多次运行时后面会报错启动不起来,只能指定一个端口或者关闭之前启动的 pen。 本次改动主要解决当有多个 Markdown 文件需要使用 pen 但并不关心端口号是多少的这种需求(比如我本人就经常这么用 :P)。 测试用例已增加,代码风格与楼主保持一致。

    opened by xqin 0
Owner
null
Wow such top. So stats. More better than regular top.

vtop A graphical activity monitor for the command line. How to install If you haven't already got Node.js, then go get it. npm install -g vtop If you

James Hall 4k Jan 8, 2023
A superfast and easy to use knowledge base to help your customers get the info they need, when they need it most.

A superfast and easy to use knowledge base to help your customers get the info they need, when they need it most. helpkb is an open-source Next.js (A

Mark Moffat 11 Dec 5, 2022
Markdown Plus is a markdown editor with extra features

Markdown Plus Markdown Plus ("M+" or "mdp" for short) is a markdown editor with extra features. Online demo: mdp.tylingsoft.com Apps We currently don'

null 2.1k Dec 29, 2022
A plugin for the Obsidian markdown note application, adding functionality to render markdown documents with multiple columns of text.

Multi-Column Markdown Take your boring markdown document and add some columns to it! With Multi Column Markdown rather than limiting your document lay

Cameron Robinson 91 Jan 2, 2023
A markdown-it plugin that process images through the eleventy-img plugin. Can be used in any projects that uses markdown-it.

markdown-it-eleventy-img A markdown-it plugin that process images through the eleventy-img plugin. Can be used in any projects that use markdown-it. F

null 25 Dec 20, 2022
An obsidian plugin for uploading local images embedded in markdown to remote store and export markdown for publishing to static site.

Obsidian Publish This plugin cloud upload all local images embedded in markdown to specified remote image store (support imgur only, currently) and ex

Addo.Zhang 7 Dec 13, 2022
Markdown Transformer. Transform markdown files to different formats

Mdtx Inspired by generative programming and weed :). So I was learning Elm language at home usually in the evening and now I am missing all this gener

Aexol 13 Jan 2, 2023
:credit_card: make your credit card form better in one line of code

Card - check out the demo A better credit card form in one line of code Card will take any credit card form and make it the best part of the checkout

Jesse Pollak 11.5k Jan 4, 2023
A better way for new feature introduction and step-by-step users guide for your website and project.

Intro.js v3 Lightweight, user-friendly onboarding tour library Where to get You can obtain your local copy of Intro.js from: 1) This github repository

usablica 21.7k Jan 2, 2023
Better MV-ish Framework

❗ I started working on this project in 2012. React didn't exist, Angular didn't have a stable 1.0 release, Internet Explorer 7, 8, 9 was used by 35% o

Antonio Stoilkov 2.8k Jan 1, 2023
Better Queue for NodeJS

Better Queue - Powerful flow control Super simple to use Better Queue is designed to be simple to set up but still let you do complex things. Persiste

Diamond 415 Dec 17, 2022
🥚 Born to build better enterprise frameworks and apps with Node.js & Koa

Features Built-in Process Management Plugin System Framework Customization Lots of plugins Quickstart Follow the commands listed below. $ mkdir showca

egg 18.3k Dec 29, 2022
An extension to Async adding better handling of mixed Series / Parallel tasks via object chaining

async-chainable Flow control for NodeJS applications. This builds on the foundations of the Async library while adding better handling of mixed Series

Matt Carter 25 Jul 15, 2019
A better `npm publish`

np A better npm publish Why Interactive UI Ensures you are publishing from your release branch (main and master by default) Ensures the working direct

Sindre Sorhus 6.9k Jan 2, 2023
Wow such top. So stats. More better than regular top.

vtop A graphical activity monitor for the command line. How to install If you haven't already got Node.js, then go get it. npm install -g vtop If you

James Hall 4k Jan 8, 2023
A tool for writing better scripts

Bash is great, but when it comes to writing scripts, people usually choose a more convenient programming language.

Google 35.5k Dec 27, 2022
A better place to discuss Bitcoin.

stacker.news Stacker News is a Lightning powered Bitcoin news site modelled after Hacker News (which is modelled after Reddit). The intent is to creat

Stacker News 195 Jan 5, 2023
Placebo, a beautiful new language agnostic diagnostics printer! It won't solve your problems, but you will feel better about them.

Placebo A beautiful new language agnostic diagnostics printer! ┌─[./README.md] │ > 1 │ What is Placebo? · ───┬──── ·

Robin Malfait 78 Dec 16, 2022
Juka Official Website built on top of Docusaurus/React Framework. Help us make it better!

Juka Programming Language Juka Programming Language website is built on top of Docusaurus 2. Feel free to contribute to our website! Any help is appre

Juka Programming Language 5 Dec 24, 2022