md2dom

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:
code	`code`
ftp://user@x.y/z	<ftp://user@x.y/z>
user@mail.com	<user@mail.com>
my link	[my link](url)
	
	[](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

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