Skip to content

phothinmg/mm-mark

mm-mark

ESM Only

md-html


Convert Markdown to HTML

Mmmark : Convert Md to Html with Showdown.Js.

Note

This package focus on convert markdown to html . If you want more, recommended to use Showdown.js


Main dependencies bundled license information.

1. Showdown.js

Showdown.js is a powerful JavaScript library used for converting Markdown into HTML. It's a key dependency in our project, providing the core functionality of our Markdown to HTML conversion.

2. JS-YAML

JS-YAML is a JavaScript implementation of YAML, a human-friendly data serialization standard. In our project, it's used for parsing YAML front matter in Markdown files.

3. Other dependencies

  • Prism.Js for code block highlight.
  • Mathjax for math support.
  • tsup for typescript compile and bundle.

npm version

Install from npm

npm i mm-mark
yarn add mm-mark
pnpm i mm-mark

JSR

Install from jsr.io

deno

deno add @ptm/mm-mark

npm

npx jsr add @ptm/mm-mark

yarn

yarn dlx jsr add @ptm/mm-mark

pnpm

pnpm dlx jsr add @ptm/mm-mark

bun

bunx jsr add @ptm/mm-mark

Import

import * as mod from "@ptm/mm-mark";

Markdown to HTML.

import mmmark from "mm-mark";
const mdcontent = `
---
title: hello world
date: 2024-07-07
tags:
    - foo
    - bar
---


## Hello

`;
const converter = mmmark.Converter(/*{Showdown Options} */);
// set flavor for this converter
converter.setFlavor("github");
const html = converter.makeHtml(mdcontent);
console.log(html); // <h2 id="hello">Hello</h2>

Frontmatter

import mmmark from "mm-mark";
type MyType = {
  type: string;
  title: string;
};

const mdcontent = `
    ---
    title: hello world
    date: 2024-07-07
    tags:
        - foo
        - bar
    ---


    ## Hello

    `;

const foo = mmmark.frontmatter<MyType>(mdcontent);
console.log(foo.data); // { title: 'hello world',  date: 2024-07-07T00:00:00.000Z, tags: [ 'foo', 'bar' ] }
console.log(foo.content); // ## Hello

Extensions

Available Extensions

  1. icons
import mmmark from "mm-mark";
import { customClass } from "mm-mark";

const converter = mmmark.Converter({
  extensions: [icons],
});

const md = `@fa-home`;
const html = converter.makeHtml(md);
console.log(html); // <i class="fa fa-home"></i>
  1. customClass
import mmmark from "mm-mark";
import { customClass } from "mm-mark";

const converter = mmmark.Converter({
  noHeaderId: true, // recommended to set `true` for option `noHeaderId` when using customClass extension
  extensions: [customClass],
});
const md = `#[.header]Header`;
const html = converter.makeHtml(md);
console.log(html); // <h1 class="header">Header</h1>

You can use any showdown extensions.