JSPM

markmap-lib2

0.6.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q18929F
  • License MIT

Visualize your Markdown as mindmaps with Markmap

Package Exports

  • markmap-lib2

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (markmap-lib2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Clone this repo

Then build and run:

  • npm install
  • npm run-script build
  • node bin/cli.js mytest.md

markmap-lib

NPM License Downloads

Visualize your Markdown as mindmaps.

This project is heavily inspired by Markmap.

See online demo.

Usage

Command-line

Installation

Install globally:

$ yarn global add markmap-lib
# or
$ npm install markmap-lib -g

or use with npx:

$ npx markmap-lib

Commands

Usage: markmap [options] <input>

Create a markmap from a Markdown input file

Options:
  -V, --version          output the version number
  -o, --output <output>  specify filename of the output HTML
  --enable-mathjax       enable MathJax support
  --no-open              do not open the output file after generation
  -h, --help             display help for command

Suppose you have a Markdown file named note.md.

Run the following command to get an interactive mindmap:

$ markmap note.md

# without global installation
$ npx markmap-lib note.md

Then you will get a note.html in the same directory, and hopefully it will be open in your default browser.

MathJax

To enable MathJax support for your Markdown, pass --enable-mathjax:

$ markmap --enable-mathjax note.md

API

Installation

$ yarn add markmap-lib
# or
$ npm install markmap-lib

Transform

Transform Markdown to markmap data:

import { transform } from 'markmap-lib/dist/transform.common';

const data = transform(markdown);

Now we get the data for rendering in data.

Render

Render a markmap from transformed data:

Create an SVG element with explicit width and height:

<svg id="markmap" style="width: 800px; height: 800px"></svg>

Render a markmap to the SVG element:

import { markmap } from 'markmap-lib/dist/view.common';

markmap('#markmap', data);

// or pass an SVG element directly
const svgEl = document.querySelector('#markmap');
markmap(svgEl, data);

MathJax

To enable MathJax, you need to load MathJax before rendering markmap:

<script>
window.MathJax = {
  options: {
    skipHtmlTags: {
      '[-]': ['code', 'pre']
    }
  }
};
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>

and process Html with MathJax in options.processHtml:

import { markmap } from 'markmap-lib/dist/view.common';

markmap('#markmap', data, {
  processHtml: nodes => {
    if (window.MathJax.typeset) MathJax.typeset(nodes);
  },
});

Note:

  • The skipHtmlTags option is required because inline code generated from Markdown is always wrapped in <code>, which is ignored by MathJax by default.
  • The MathJax library should better be loaded synchronously so that we can just use it in options.processHtml without a flash.