Skip to content

yne/md2dom

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

logo

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:
inline code `inline code`
ftp://[email protected]/z <ftp://[email protected]/z>
[email protected] <[email protected]>
my link [my link](url)
logo ![logo](logo.svg)
linked logo [![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
  1. numerated list starting at 5
  2. 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

About

Mardown to DOM

Topics

Resources

License

Stars

Watchers

Forks

Contributors