在线markdown生成html,从markdown生成静态html页面的最简单的方法

Pagic

The easiest way to generate static html page from markdown

Getting Started

Installation

npm install pagic -g

Markdown + Layout => HTML

Let's say we have a project like this:

docs/

├── public/

└── src/

├── _layout.js

└── index.md

The _layout.js is a simple javascript module which contains a template string:

module.exports = function ({ title, content }) {

return `

${title}

${content}

`

};

The index.md is a simple markdown file:

#Pagic

The easiest way to generate static html page from markdown

Then run

pagic

We'll get an index.html file in public directory:

docs/

├── public/

| └── index.html

└── src/

├── _layout.js

└── index.md

The content should be:

Pagic

Pagic

The easiest way to generate static html page from markdown

Here we use markdown-it with plugins markdown-it-anchor and markdown-it-title to parse the markdown file.

Copy Other Files

If there are other files which are not ended with .md or start with _, we will simply copy them:

docs/

├── public/

| ├── css

| | └── site.css

| └── index.html

└── src/

├── css

| └── site.css

├── _layout.js

└── index.md

Sub Page and Sub Layout

We can have sub directory which contains markdown files.

Sub directory can also have a _layout.js file.

In this case, only markdown files in sub directory will use sub/_layout.js as the template.

If we cannot find a _layout.js in the sub directory, we'll recursively find the _layout.js in the parent directory.

docs/

├── public/

| ├── css

| | └── site.css

| └── index.html

| └── sub

| └── index.html

└── src/

├── css

| └── site.css

├── _layout.js

|── index.md

└── sub

├── _layout.js

└── index.md

relativeToRoot

The last thing, we can get the relativeToRoot variable in the _layout.js, this helps us insert the relative resources:

module.exports = function ({ title, content, relativeToRoot }) {

return `

${title}

${content}

`

};

Options

There are some options while using the cli:

-s , --src-dir=: Change the src directory, default is src

-d , --dist-dir=: Change the dist directory, default is public

-w, --watch: Watch for src directory change

Use It as a Node Module

It's also able to use it as a node module:

npm install pagic --save

const pagic = requrie('pagic');

pagic({

srcDir: 'src',

distDir: 'public'

});