# parcel-plugin-markdown-it
> Parcel plugin to generate HTML and metadata dictionary from Markdown files
Latest version **1.0.0** (published 2021-03-13) · Apache-2.0 license · 0 weekly downloads
## Install
```sh
npm install parcel-plugin-markdown-it
pnpm add parcel-plugin-markdown-it
yarn add parcel-plugin-markdown-it
bun add parcel-plugin-markdown-it
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-03-13 |
| First published | 2019-03-28 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 930.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Carlos Martin Sanchez |
| Maintainers | carlsa |
| Keywords | markdown, md, parceljs, parcel, parcel-plugin, metadata, markdown-it |
## Links
- npm: https://www.npmjs.com/package/parcel-plugin-markdown-it
- Repository: https://github.com/carlosvin/parcel-plugin-markdown-it
- Homepage: https://github.com/carlosvin/parcel-plugin-markdown-it/blob/master/README.md
- Issues: https://github.com/carlosvin/parcel-plugin-markdown-it/issues
- npm.io page: https://npm.io/package/parcel-plugin-markdown-it
## Dependencies (2)
- [markdown-it](https://npm.io/package/markdown-it.md) ^12.0.4
- [markdown-it-meta](https://npm.io/package/markdown-it-meta.md) ^0.0.1
## Recent versions
- 1.0.0 (latest) — 2021-03-13
- 0.1.4 — 2020-09-18
- 0.1.3 — 2020-03-14
- 0.1.2 — 2020-03-14
- 0.1.1 — 2019-12-09
- 0.1.0 — 2019-09-26
- 0.0.1 — 2019-03-28
## README
This parcel plugin reads Markdown files and convert them to HTML using [markdown-it](https://github.com/markdown-it/markdown-it) package.
This HTML is stored in a variable named `html`.
Plugin also reads Markdown metadata and it stores it in a variable named `meta`.
```typescript
import { meta, html } from "./README.md";
```
[](https://circleci.com/gh/carlosvin/parcel-plugin-markdown-it)
# Getting started
It uses regular [Parcel plugin system](https://parceljs.org/plugins.html), so you only have to install the plugin in your project.
If you are using [yarn](https://yarnpkg.com/):
```bash
yarn add parcel-plugin-markdown-it --dev
```
If you are using [npm](https://www.npmjs.com/):
```bash
npm install parcel-plugin-markdown-it --save-dev
```
This command just installs `parcel-plugin-markdown-it` in your `node_modules` folder and adds it to development dependency section in `package.json`:
```json
"devDependencies": {
"parcel-plugin-markdown-it": "^0"
}
```
# Simple Example
For this example we will use a `README.md` with following content:
```markdown
---
layout: post
title: Example title
---
This is another post, you can find more at https://google.es
```
You can import a Markdown file like any regular Javascript module.
## Import
```javascript
import { meta, html } from "./README.md";
console.log('meta: ', meta);
console.log('html: ', html);
```
You will see following output in console:
```javascript
meta:
{title: "Example title", layout: "post"}
html:
"This is another post, you can find more at https://google.es
"
```
## Require
```javascript
const md = require("./README.md");
console.log('md: ', md);
```
You will get the following output in console:
```javascript
md:
{
meta: {title: "Example title", layout: "post"},
html: "This is another post, you can find more at https://google.es
"
}
```
# Enable code blocks with syntax highlight
Install the package 'markdown-it-highlightjs'
```bash
npm install --save-dev markdown-it-highlightjs
```
and include the required css styles in your pages
```javascript
import 'highlight.js/styles/default.css'
```
Now code blocks embedded in markdown document will be rendered with syntax highlight
# Index all Markdown files in a directory
**This feature is still not working properly until https://github.com/parcel-bundler/parcel/issues/112 in ParcelJs is fixed.**
I will explain how this is currently implemented, but this feature most likely will evolve.
```javascript
const index = require("./index.blog");
for (const post of index) {
const dir = post.dir || '.';
const postPath = dir + '/' + post.base;
import(postPath)
.then(imported => console.log(imported))
.catch(error => console.error(error));
}
```
Let's say `index.blog` file content is as follows:
```json
{
"title": "My Blog",
"postsFolder": "/home/my/posts",
"author": "carlosvin@gmail.com"
}
```
Following code snippet is supposed to lazy load al the Markdown files in `/home/my/posts` and print them to console.
Expected output:
```javascript
[
{
html: "First post found in folder
",
meta: {
author: "author@example.com",
title: "Post 1"
}
},
{
html: "Second post found in folder
",
meta: {
layout: "micro",
title: "Post 2"
}
},
...
]
```
This feature would ease the implementation of a simple static site generator.
When this feature is properly working, I will most likely extend it to support static site generation.
---
_Source: https://npm.io/package/parcel-plugin-markdown-it · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._