Package Exports

@verikami/remark-deflist-revisited

Readme

@verikami/remark-deflist-revisited

Remark plugin. A wrapper around remark-deflist with improved support for nested definition lists. It preserves all the original functionality and performs additional processing. Bun, Deno and Cloudflare Workers compatibility. Also works in Astro and web browser.

Installation

ツ pnpm add @verikami/remark-deflist-revisited
ツ npm i @verikami/remark-deflist-revisited

The interactive Sample Installer

ツ npm create remark-deflist-revisited@latest

Cloudflare Worker demo

ツ npx @verikami/remark-deflist-revisited@latest
ツ npx @verikami/remark-deflist-revisited --help

TypeScript version

ツ pnpm add jsr:@verikami/remark-deflist-revisited
ツ npx jsr add @verikami/remark-deflist-revisited

Usage

The problem with remark-deflist is that the plugin renders nested list items inside <dd> incorrectly.

Markdown

Term
: - item A
  - item B
  - item C

With remark-deflist

<dl>
<dt> Term </dt>
<dd>
  <ul>
    <li> item A </li>
  </ul>
</dl>
<ul>
  <li> item B </li>
  <li> item C </li>
</ul>

With @verikami/remark-deflist-revisited

<dl>
<dt>Term</dt>
<dd>
  <ul>
    <li> item A </li>
    <li> item B </li>
    <li> item C </li>
  </ul>
</dl>

Notes

Using : * as a list marker (especially for the first item) is resolved in v0.4.0
Using : - *x* or : - **x** is not problematic
Coverage 100% via Codecov from version v0.4.1
Cloudflare Worker demo via npx from version v0.5.22
Score 100/100 via Socket from version v0.5.23
See generated examples for real life test

Usage in Node.js

import { remark } from "remark";
import html from "remark-html";
import deflist from "@verikami/remark-deflist-revisited";

const markdown = `
Term
: - item A
  - item B
  - item C
`;

const output = await remark()
  .use(deflist)
  .use(html)
  .process(markdown);

console.log(String(output));

Usage in Deno

import { remark } from "npm:remark@^15";
import html from "npm:remark-html@^16";
import deflist from "npm:@verikami/remark-deflist-revisited";

// (...) same code as above

Usage in Astro

import { defineConfig } from "astro/config";
import remarkDeflist from "@verikami/remark-deflist-revisited";

export default defineConfig({
  markdown: {
    remarkPlugins: [
      remarkDeflist
    ]
  }
});

Usage in Cloudflare Worker

import { remark } from "remark";
import html from "remark-html";
import dedent from "dedent";
import deflist from "@verikami/remark-deflist-revisited";

export default {
  async fetch(request, env, ctx) {

    const markdown = dedent`
      Term
      :  - item A
         - item B
         - item C
    `;

    const output = await remark()
      .use(deflist)
      .use(html)
      .process(markdown);

    return new Response(String(output), {
      headers: { "Content-Type": "text/html; charset=utf-8" }
    });
  }
};

Usage in html

<html>
  <head>
    <script type="module">
      import { remark } from "https://esm.sh/remark@15";
      import html from "https://esm.sh/remark-html@16";
      import dedent from "https://esm.sh/dedent@1";
      import deflist from "https://esm.sh/@verikami/remark-deflist-revisited";

      const render = async (markdown) => (
        await remark()
          .use(deflist)
          .use(html)
          .process(markdown)
      );

      const append = async (markdown) => {
        const output = await render(markdown);
        const el = document.getElementById("markdown");
        el.innerHTML += String(output);
      };

      const markdown = dedent`
        Term
        : - item A
          - item B
          - item C
      `;

      document.body.onload = append(markdown);

    </script>
  </head>
  <body>
    <div id="markdown"></div>
  </body>
</html>

Examples

Sample implementations are available in the ./samples directory.
They are also published as standalone repositories (templates):

Simple → veriKami/remark-deflist-revisited-simple
Express.js → veriKami/remark-deflist-revisited-express
Cloudflare Worker → veriKami/remark-deflist-revisited-worker
Astro → veriKami/remark-deflist-revisited-astro

Development

The interactive Sample Installer is available from version v6.0.0.

# npm
ツ npm create remark-deflist-revisited@latest

# pnpm
ツ pnpm create remark-deflist-revisited

# yarn
ツ yarn create remark-deflist-revisited

Automatic installation of Cloudflare Worker demo is available from version v0.5.22

# installer
ツ npx @verikami/remark-deflist-revisited

# latest version
ツ npx @verikami/remark-deflist-revisited@latest

# how to use 
ツ npx @verikami/remark-deflist-revisited --help

To see sample html output in terminal run

# (node): scripts/sample.node.js
ツ pnpm sample

# (bun): scripts/sample.node.js
ツ pnpm sample:bun

# (deno): scripts/sample.deno.js
ツ pnpm sample:deno

To regenerate ./demo/generated/* html files run

# (node): dist/index.js
ツ pnpm demo

# (tsx): src/index.ts
ツ pnpm demo:ts

Processing Flow

Markdown
   │
Plugin (wrapped remark-deflist)
   │
AST // HTML
   │
Snapshots (vitest)
   │
Build (npm) ./dist + (jsr) ./lib
   │
CI/CD (GitHub Actions)
   │
┌──────────┬─────────┬─────────┐
│ GitHub   │   NPM   │   JSR   │
│ Packages │         │         │
└──────────┴─────────┴─────────┘

JSPM