@xmark/core

Markdown content tool powered by transformer and styling plugins

Motivation

Writing html tags and apply styles by hand is tedious! And what's worse, every tuning and text updates need an developer to jump in.

Markdown is rather simple for non-developer to master, this tool enables everyone that can write markdown to compose beautifully styled pages without writing any code.

Usage

XMark engine contains nothing more than applying external plugins to the HAST from markdown. It should be used with plugins to generate output for certain purpose, when used alone, it's just a compiler that wraps remark inside.

const XMark = require('@xmark/core');
const TransformWrapHeadings = require('@xmark/transform-wrap-headings');

const xmark = XMark();

xmark.useTransform(TransformWrapHeadings, {
  parseAttributes: true,
  parseStyleAttributes: true,
  wrapperTag: 'section',
  enabledHeadings: ['h1'],
  wrapperClasses: {
    wrapper: 'section',
    modifier: x => `section--level${x}`,
  },
});

const markdown = '# heading 1';
const hast = xmark.toHAST(markdown);
const html = xmark.toHTML(markdown);

Please note that plugin apply order matters, because plugins are modifying the hast passed through the processing pipeline.

Plugins

There are 2 kinds of plugins supported by xmark:

• transform plugin: modify the content ast structure to make it easy to styling things
• theme plugin: apply styles to the structure to make it beautiful.

All transform plugins should be a function with signature:

function AwesomePlugin({ hast, frontMatter}, pluginConfig) {
  // Do something here
  return { hast, frontMatter };
}

Thanks

This tool will not be born with the awesome markdown processing tool remark, the architecture philosophy of this tool is also inspired by gatsby.