https://github.com/yne/md2dom

Mardown to DOM
https://github.com/yne/md2dom

commonmark dom javascript markdown

Last synced: 17 days 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 (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-12-13T12:12:38.000Z (21 days ago)
• Last Synced: 2024-12-13T13:30:02.695Z (21 days ago)
• Topics: commonmark, dom, javascript, markdown
• Language: HTML
• Homepage: https://yne.fr/md2dom
• Size: 56.6 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![logo](logo.svg)

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             | 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:               | `:+1:`               |

| `code`             | `` `code` ``         |

| <ftp://[email protected]/z> | `<ftp://[email protected]/z>` |

| <[email protected]>    | `<[email protected]>`    |

| [my link](url)     | `[my link](url)`     |

| ![logo](logo.svg)  | `![logo](logo.svg)`  |

| [![linked logo](logo.svg)](url) | `[![linked logo](logo.svg)](url)` |

### Block elements

#### Code

To format code into its own distinct block, use the triple ``` syntax.

```prng.c

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

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