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 | Markdown | | ------ | ---- | | strong word | *strong word* | | strong word | _strong word_ | | emphasis word | **emphasis word** | | emphasis word | __emphasis word__ | | ~~strike word~~ | ~~strike word~~ | | :+1: | :+1: | | inline code | `inline 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) |

CommonMark syntax are also supported for when precise formating (middle of a word) is needed

| render | CommonMark | | ------ | ---- | | st{ron}g | st{_ron_}g | | em{pha}sis | em{*pha*}sis | | high{=li=}ght | high{=li=}ght | | de{-le-}tion | de{-le-}tion | | in{+ser+}tion | in{+ser+}tion | | st{~ri~}ke | st{~ri~}ke | | ~sub~ | ~sub~ | | ^sup^ | ^sup^ |

Block elements

Code

To format code into its own distinct block, use at least three ``` syntax.

```prng.c
int getRandomNumber() {
  return 4; // chosen by fair dice roll
}
```

Quote

blockquote starts with > and can span on multiple lines

another distinct blockquote

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