npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@tinymd/md2json

v0.0.2

Published

A tiny, extendable markdown to JSON parser supporting custom elements. Integrates with build tools for React, Vue, and more. Works with CDN links for browser-based JavaScript.

Downloads

359

Readme

Tiny Markdown to JSON Parser

test Maintainability codecov Version Downloads npm bundle size Gitpod ready-to-code

Tiny Md Parser is a lightweight, extendable markdown to JSON parser that can be easily customized to support custom markdown elements. It seamlessly integrates with build tools, enabling the creation of markdown components for frameworks like React, Vue, and more. Additionally, it supports CDN links in HTML, allowing for browser-based JavaScript functionality.

We are trying to confirm to commonMark specs. Some of the APIs might change!

At this time, source code may only be available to the sponsors.

Please consider starring this repository and sharing it with your friends.

Getting Started

Installation

pnpm add @tinymd/md2json

or

npm install @tinymd/md2json

or

yarn add @tinymd/md2json

Usage

import { md2json, type Element } from "@tinymd/md2json";

// returns array of blocks
const blocks: Element[] = md2json(markdownString);

Options

export interface Md2JsonOptions {
  skipRanks?: number[];
  skipTags?: ElementTag[];
  blockParsers?: BlockParser[];
  inlineParsers?: InlineParser[];
}

Types - Useful for Extending Functionality

export type ElementTag =
  // block elements
  | "h1"
  | "h2"
  | "h3"
  | "h4"
  | "h5"
  | "h6"
  | "pre"
  | "blockquote"
  | "hr"
  | "ul"
  | "ol"
  | "li"
  | "p"
  // inline elements
  | "code"
  | "a"
  | "img"
  | "strong"
  | "em"
  | "span"
  | "small"
  | "s"
  | "u"
  | "br";

export type Attribute = "href" | "src" | "alt" | "class" | "title";
export type Props = Partial<Record<Attribute, string>>;

export interface Element {
  tag: ElementTag;
  contents: (string | Element)[];
  props?: Props;
  info?: string;
}

export type References = Record<string, Props>;

/** The parser function that returns void|undefined if no match is found,
 * or returns contents and linesConsumed as a tuple. */
export type BlockParserFunction = (
  lines: string[],
  currentIndex: number,
  references?: References,
  blockParsers?: BlockParser[],
) => [content: (string | Element)[], linesConsumed: number] | undefined;

/** Parser to parse block elements from markdown based on commonmark specs @see [commonmark specs](https://spec.commonmark.org/0.31.2/) */
export type BlockParser = [
  /** Rank 0 will have the highest priority.
   * Parsers will be evaluated in order of rank. */
  rank: number,
  /** The parser function that returns void|undefined if no match is found,
   * or returns contents and linesConsumed as a tuple. */
  parser: BlockParserFunction,
  /** HTML tag */
  tag: ElementTag,
];

export type InlineParserFunction = (
  blocks: (Element | string)[],
  parsers: InlineParser[],
  references: Record<string, Props>,
) => void;

export type InlineParser = [
  /** Rank 0 will have the highest priority.
   * Parsers will be evaluated in order of rank. */
  rank: number,
  /** Parser function */
  parser: InlineParserFunction,
  /** HTML tag - used to skip skipTags */
  tag?: ElementTag,
];

License

This library is licensed under the MPL-2.0 open-source license.

Please consider enrolling in our courses or sponsoring our work.