A ~100LoC safe Beyond Markdown to NodeList parser.

Usage

import md2dom from "./md2dom.js";

const Md = new md2dom()
myDiv.replaceChildren(...Md.parse("Hi *me* !"));

Limitation

This parser favor simplicity and safety over backward compatibility.

• all HTML tags (<script>, <!-- ...) are rendered as plain text.
• blockquote use the same block syntax (>>> and <<<) as block of code

Demo

See: live rendering

Inline elements

| render | code | | ------ | ---- | | emphasis | **emphasis** | | emphasis | __emphasis__ | | {emphasis} | {*emphasis*} | | {strong} | {_strong_} | | strong | *strong* | | strong | _strong_ | | {=mark=} | {=mark=} | | {-del-} | {-del-} | | {+ins+} | {+ins+} | | ~~strike~~ | ~~strike~~ | | ~sub~ | ~sub~ | | ^sup^ | ^sup^ | | :+1: | :+1: | | code | `code` | | ftp://[email protected]/z | <ftp://[email protected]/z> | | [email protected] | <[email protected]> | | my link | [my link](url) | | | ![logo](logo.svg) | | | [![linked logo](logo.svg)](url) |

Block elements

Code

To format code into its own distinct block, use the triple ``` syntax.

int getRandomNumber() {
  return 4; // chosen by fair dice roll
}

Quote

To format quote into its own distinct block, use the triple > syntax.

info: this is an info blockquote with some CSS style

warning: this is a nested warning with optional (but welcome) indent

back to the info level

Table

Same as markdown, but with stricter syntax: all rows must start and end with a |.

|A 1 cell table|

If a separator/align line is found, all it preceding lines become th

|Default Header | Left Header | Center Header | Right Header | |------- | :---- | :------: | -----: | |Default | Left | Center | Right |

List

• first list item

• same list item

• new list because of new paragraph

• new list because of type changes

• new list because of type changes again

5. numerated list starting at 5
6. next entry is simply incremented

• unnumbered nesting example
  • two space is 1 indent
    • even deeper
    • continued
  • back to level 2
• the end

1. number nesting
   1. dive two level directly
   2. dive two level directly
   3. we need to go deeper
   4. we need to go deeper
   5. we need to go deeper
   6. dive two level directly
2. back to skiped level 2
3. back to level 1