markdown-it-mermaid-less

GitHub Status

NPM Status

A parser of Markdown and a render to html, written in typescript, that aims for preview-code , which is published as an extension on Visual Studio Code to preview Markdown, ReStructured Text, HTML, Jade, Pug or Mermaid files, Image's URI or CSS while editing them in VSCode.

It is built on top of markdown-it, a CommonMark Markdown parser. You can use markdown-it-mermaid-less:

markdown-it-mermaid-less is the thing that parses package READMEs on http://www.npmjs.com. If you see a markdown parsing bug there, file an issue here!

[programmatically in Node.js]: #Using this module in other modules

README

mermaid load plugin for markdown-it Markdown parser.

Installation

npm install markdown-it-mermaid-less --save

Using this module in other modules

Here is a quick example of how this module can be used in other modules. The TypeScript Module Resolution Logic makes it quite easy. The file src/index.ts is a barrel that re-exports selected exports from other files. The package.json file contains main attribute that points to the generated lib/index.js file and typings attribute that points to the generated lib/index.d.ts file.

If you are planning to have code in multiple files (which is quite natural for a Node.js module) that users can import, make sure you update src/index.ts file appropriately.

Now assuming you have published this amazing module to npm with the name markdown-it-mermaid-less, and installed it in the module in which you need it -

• To use the mermaid2html function in a TypeScript file -

import markdownItMermaidLess = require('markdown-it-mermaid-less');
const taskList: string = `
\`\`\`mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
\`\`\`
`;

(async (md: string) => {
  const defaultRootWebPath = path.join(__dirname, '..');
  // console.log('defaultRootWebPath= ', defaultRootWebPath);
  const options: index.IMermaid2htmlProOptions = {
    rootWebPath: defaultRootWebPath,
  };

  const html: string = await markdownItMermaidLess.mermaid2html(md, options);
  console.log("rendered html is\n:", html);

  return;
})(taskList);

• To use the mermaid2html function in a JavaScript file -

const markdownItMermaidLess = require("markdown-it-mermaid-less")
const mermaid2html = markdownItMermaidLess.mermaid2html;
const taskList = `
\`\`\`mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
\`\`\`
`;
(async(md)=>{
  const options = {
    rootWebPath: defaultRootWebPath,
  };
  const html = await mermaid2html(md, options);
  console.log("rendered html is\n:", html);
})(taskList)

• To use the mermaid2html function in a TypeScript file as a markdown-it plugin-

import markdownItMermaidLess = require('markdown-it-mermaid-less');
// import * as markdownItMermaidLess from 'markdown-it-mermaid-less';
const taskList: string = `
\`\`\`mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
\`\`\`
`;
(async (markdownContent: string) => {
  let html: string = '';

  if (typeof markdownContent !== 'string') {
    throw Error('first argument must be a string');
  }
  const defaultRootWebPath = path.join(__dirname, '..');

  const cms: string[] = await markdownItMermaidLess.mermaid_pro_plugin_init_everytime(
    markdownContent,
    defaultRootWebPath
  );
  const md = require('markdown-it')();
  const ro = {
    contentMaps: cms,
  };
  md.use(markdownItMermaidLess, ro);

  html = md.render(markdownContent);
  console.log('html = ', html);
  return html;
})(taskList);

• To use the mermaid2html function in a JavaScript file as a markdown-it plugin-

const markdownItMermaidLess = require("markdown-it-mermaid-less")
const taskList = `
\`\`\`mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
\`\`\`
`;
(async (markdownContent: string) => {
  let html: string = '';

  if (typeof markdownContent !== 'string') {
    throw Error('first argument must be a string');
  }
  const defaultRootWebPath = path.join(__dirname, '..');

  const cms: string[] = await markdownItMermaidLess.mermaid_pro_plugin_init_everytime(
    markdownContent,
    defaultRootWebPath
  );
  const md = require('markdown-it')();
  const ro = {
    contentMaps: cms,
  };
  md.use(markdownItMermaidLess, ro);

  html = md.render(markdownContent);
  console.log('html = ', html);
  return html;
})(taskList);

Setting travis and coveralls badges

1. Sign in to travis and activate the build for your project.
2. Sign in to coveralls and activate the build for your project.
3. Replace searKing/markdown-it-mermaid-less with your repo details like: "ospatil/generator-node-typescript".

Programmatic Usage

markdown-it-mermaid-less exports a single function. For basic use, that function takes a single argument: a string to convert.

const mermaid2html = require("markdown-it-mermaid-less")
const html : Promise<sring> = mermaid2html("# hello, I'm markdown")

Tests

npm install
npm test

Thanks to

• marky-markdown.