mdast-util-from-span-markdown

The aim of this repo is to have a minimalistic parser (TypeScript) for span elements written in markdown syntax.
The output is an abstract syntax tree mostly compatible to mdast.

Install

1npm i mdast-util-from-span-markdown

Use

1import fromMarkdown from "mdast-util-from-span-markdown";
2const md = "Say **Hello** [World](https://example.com) in `code`! *Thanks!*";
3
4fromMarkdown(md);

Return

1[
2  {
3    type: "text",
4    value: "Say ",
5  },
6  {
7    type: "strong",
8    children: [
9      {
10        type: "text",
11        value: "Hello",
12      },
13    ],
14  },
15  {
16    type: "text",
17    value: " ",
18  },
19  {
20    type: "link",
21    url: "https://example.com",
22    children: [
23      {
24        type: "text",
25        value: "World",
26      },
27    ],
28  },
29  {
30    type: "text",
31    value: " in ",
32  },
33  {
34    type: "inlineCode",
35    value: "code",
36  },
37  {
38    type: "text",
39    value: "! ",
40  },
41  {
42    type: "emphasis",
43    children: [
44      {
45        type: "text",
46        value: "Thanks!",
47      },
48    ],
49  },
50];

Technical decission

1. The code has to be as small as possible (regex instead of regular parsing)
2. The output has to be as «correct» as possible according to mast specs and CommonMark

Why

Because this is not a full markdown parser (see remark otherwise) with support for block elements, this code is especially handy for «one-line markdown». Think for example about translations comming from a system that does not support rich text formatting.

Render

If you like to render the output of fromMarkdown() in a frontend-framework have a look at the examples/md.tsx for react or examples/md.vue for vue.
The examples are not included in the npm-package. You need to get a copy of the example and adjust it to your needs:

1# react
2curl https://raw.githubusercontent.com/signalwerk/mdast-util-from-span-markdown/main/examples/md.tsx > md.tsx
3
4# vue
5curl https://raw.githubusercontent.com/signalwerk/mdast-util-from-span-markdown/main/examples/md.vue > md.vue

Thank you

• TypeScript + Node.js Project Boilerplate