24.2.9 • Published 3 months ago
md2dom v24.2.9
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~~ | |
~sub~ | ~sub~ |
^sup^ | ^sup^ |
:+1: | :+1: |
code | `code` |
ftp://user@x.y/z | <ftp://user@x.y/z> |
user@mail.com | <user@mail.com> |
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
- numerated list starting at 5
- next entry is simply incremented
- unnumbered nesting example
- two space is 1 indent
- even deeper
- continued
- back to level 2
- two space is 1 indent
- the end
- number nesting
- dive two level directly
- dive two level directly
- we need to go deeper
- we need to go deeper
- we need to go deeper
- dive two level directly
- back to skiped level 2
back to level 1