https://github.com/hatashiro/pen
We need a better Markdown previewer.
https://github.com/hatashiro/pen
javascript markdown react
Last synced: 7 months ago
JSON representation
We need a better Markdown previewer.
- Host: GitHub
- URL: https://github.com/hatashiro/pen
- Owner: hatashiro
- License: mit
- Created: 2015-09-12T10:18:00.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2020-09-24T16:07:01.000Z (about 5 years ago)
- Last Synced: 2024-10-29T20:10:22.527Z (about 1 year ago)
- Topics: javascript, markdown, react
- Language: JavaScript
- Homepage:
- Size: 688 KB
- Stars: 326
- Watchers: 6
- Forks: 15
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-nodejs - pen - Live Markdown preview in the browser from your favorite editor. (Packages / Command-line apps)
- awesome-nodejs-cn - pen - **star:325** 从喜爱的编辑器在浏览器中实时预览 Markdown (包 / 命令行程序)
- fucking-awesome-nodejs - pen - Live Markdown preview in the browser from your favorite editor. (Packages / Command-line apps)
- fucking-awesome-nodejs - pen - Live Markdown preview in the browser from your favorite editor. (Packages / Command-line apps)
README
> We need a better Markdown previewer.
[](https://travis-ci.org/utatti/pen)
`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](https://github.com/utatti/orange-cat) 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](https://facebook.github.io/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. :black_nib:
## Demo
Here is a short demo showing how awesome `pen` is.
The following demo shows `pen` incrementally updates only modified part using
[React](https://facebook.github.io/react/) and its [Reconciliation](https://reactjs.org/docs/reconciliation.html).
## Requirement
`pen` uses [Node.js >= 4.0](https://nodejs.org/en/docs/es6/). It may not work
on earlier versions.
## Install
Using [npm](http://npmjs.com):
```shell
npm i -g pen
```
You can try using `pen` with `npx`:
```shell
npx pen
```
## Usage
To use `pen`, simply run the `pen` command.
```shell
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](https://github.com/markdown-it/markdown-it) as Markdown
parser by default, but it also supports Pandoc. Please provide [a proper Pandoc
format](http://pandoc.org/MANUAL.html#general-options) for the value.
```shell
pen --pandoc gfm README.md
```
## Contribution
I welcome every contribution on `pen`. You may start from forking and cloning
this repo.
```shell
git clone git@github.com:your_username/pen.git
cd pen
# Install dependencies
npm i
# Lint, build, and test pen codes at once
npm test
```
To build frontend scripts:
```shell
npm run build
```
To lint with [ESLint](http://eslint.org):
```shell
npm run lint
```
To test with [Mocha](http://mochajs.org)
```shell
npm run mocha
```
## License
Pen is released under the [MIT License](LICENSE).