Mdast-util-from-span-markdown NPM

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

npm i mdast-util-from-span-markdown

Use

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

fromMarkdown(md);

Return

[
  {
    type: "text",
    value: "Say ",
  },
  {
    type: "strong",
    children: [
      {
        type: "text",
        value: "Hello",
      },
    ],
  },
  {
    type: "text",
    value: " ",
  },
  {
    type: "link",
    url: "https://example.com",
    children: [
      {
        type: "text",
        value: "World",
      },
    ],
  },
  {
    type: "text",
    value: " in ",
  },
  {
    type: "inlineCode",
    value: "code",
  },
  {
    type: "text",
    value: "! ",
  },
  {
    type: "emphasis",
    children: [
      {
        type: "text",
        value: "Thanks!",
      },
    ],
  },
];

Technical decission

The code has to be as small as possible (regex instead of regular parsing)
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:

# react
curl https://raw.githubusercontent.com/signalwerk/mdast-util-from-span-markdown/main/examples/md.tsx > md.tsx

# vue
curl https://raw.githubusercontent.com/signalwerk/mdast-util-from-span-markdown/main/examples/md.vue > md.vue