Htmlmark NPM | npm.io

🔑 Why HtmlMark?

no use of external dependencies
lexer: to produce markdown tokens
parser: to produce the HTML code from the lexer
code highlighting support
support for front matter

🌐 Demo

Checkout the features of the parser from this Live Demo.

🎠 Installation

npm i htmlmark

💠 Usage

import HtmlMark from 'htmlmark';

const opts = {
	indent: 4,
	highlightFn: (code, lang) => {
		// return the highlighted code
	},
	useLinkRefs: true
};

const htmlmark = new HtmlMark(opts);

htmlmark.tokenize("## Hello World"); // returns the tokens
htmlmark.parse("## Hello World"); // returns the HTML code

🎡 Options

Option	Type	Default	Description
indent	`number`	`4`	Number of spaces (or tabs) to use for indentation
tabSize	`number`	`4`	Equivalent spaces for a single tab used
highlightFn	`function`	`undefined`	Function to highlight the code
useLinkRefs	`boolean`	`true`	Whether to use link references or not

🎢 APIs

tokenize(markdown: string): Token[]: Returns the lexer from the markdown string
parse(markdown: string): string: Returns the HTML code from the markdown string
getFrontMatter(markdown: string): FrontMatter{}: Returns the front matter from the markdown string

Lexer

The provided markdown string is scanned line by line and checked against various regex patterns to produce the accurate markdown tokens. A general token structure is as:

{
	"indent": 0,
	"level": 1,
	"raw": "# Heading One Text",
	"setext": false,
	"type": "heading",
	"value": "Heading One Text",
	"tokens": [{
		"raw": "Heading One Text",
		"type": "text",
		"value": "Heading One Text"
	}]
}

Front Matter

The front matter is the metadata of the markdown file. It is written in the YAML format and is separated from the markdown content by a line containing three hyphens ---. It must be placed at the top of the markdown file.

Example:

---
title: Hello World
date: 2021-01-01
author: John Doe
---

## Hello World
Lorem ipsum dollar sit amet

The above markdown file will produce the following front matter:

{
	"title": "Hello World",
	"date": "2021-01-01",
	"author": "John Doe"
}

💁 Contributing to HtmlMark

Contributions are always welcome, no matter how large or small. Before contributing, please read the code of conduct. You can also find the development guide here.