bhaze31 / evergreen-js

JS version of Evergreen

Evergreen Markdown

An expansion of regular Markdown. Evergreen adds the ability to add classes, ids, and other HTML elements to your markdown, allowing better control of how your pages look and feel. This package is an experiment to create a Markdown processor and to learn how to publish an npm module. It is free to use.

Current Support

• Header Elements
• Bold and Italic Elements
• Anchors
• Standalone Images
• Ordered Lists
• Unorderd Lists
• Blockquotes
• Tables
• Horizontal Rules
• Divs
• IDs
• Classes
• Fenced Code Blocks

To Be Implemented

• Inline Images
• Wiki-style Reference Links
• ID Linking
• Definition Lists
• Task Lists
• Table Row/Col Span
• Escaping Characters

Usage

There are two parts to Evergreen. The first part is the EvergreenProcessor. This takes an array of strings in the initializer, and after calling parse returns an array containing a tree-like structure of elements.

Example:

const processor = new EvergreenProcessor(lines);
const elements = processor.process();

If you want to change the array of strings that the processor has simply update the lines variable in the processor.

Example:

processor.lines = ["# New", "Information"];

The second part is the converter. This takes the elements that are output by the processor and a parent element to attach them to.

Example:

const converter = new EvergreenConverter(elements);
const element = document.getElementById("someParentElement");
converter.convert(element);

The above will retrieve the element you queried by, and then insert the new HTML elements that were generated by the converter.