https://github.com/yne/md2dom
Mardown to DOM
https://github.com/yne/md2dom
commonmark dom javascript markdown
Last synced: 11 months ago
JSON representation
Mardown to DOM
- Host: GitHub
- URL: https://github.com/yne/md2dom
- Owner: yne
- License: mit
- Created: 2022-09-17T07:06:27.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-08-01T17:39:29.000Z (11 months ago)
- Last Synced: 2025-08-09T10:44:02.026Z (11 months ago)
- Topics: commonmark, dom, javascript, markdown
- Language: HTML
- Homepage: https://yne.fr/md2dom
- Size: 63.5 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A ~100LoC **safe** [Beyond](https://www.johnmacfarlane.net/beyond-markdown.html) [Markdown](https://spec.commonmark.org/)
to [`NodeList`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) parser.
## Usage
```usage.ts
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 (``, `<!-- ...`) are rendered as plain text.
- blockquote use the same block syntax (`>>>` and `<<<`) as block of code
## Demo
See: [live rendering](//yne.fr/md2dom)
### 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://user@x.y/z> | `<ftp://user@x.y/z>` |
| <user@mail.com> | `<user@mail.com>` |
| [my link](url) | `[my link](url)` |
|  | `` |
| [](url) | `[](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
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
1. dive two level directly
1. we need to go deeper
2. we need to go deeper
1. we need to go deeper
3. dive two level directly
1. back to skiped level 2
1. back to level 1