verikami

v0.0.1

Published

2 months ago

veriKami Visual Arts

0High
0Medium
0Low

verikami

veriKami

veriKami °// Weronika Kami

My latest "pro bono" work – (npm/jsr) module for parsing nested definision lists.
Developed on the margins of a certain markdown-related project.

Project (page) → verikami.github.io/remark-deflist-revisited

@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.

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>

Installation

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

Cloudflare Worker demo

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

Usage

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));

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

import remarkDeflist from "@verikami/remark-deflist-revisited";

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

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" }
    });
  }
};

<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>

License

Original work — MIT © Alex Shaw

2025 © MIT \\° veriKami °// Weronika Kami

Example implementations for @verikami/remark-deflist-revisited.
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

Live Examples

You can play with these examples via StackBlitz web IDE:

| Simple Example | Express Example | Worker Example | Astro Example | |:----------------------|:----------------------|:----------------------|:----------------------| |||||

Interactive Installation

npm + pnpm + yarn

npm create remark-deflist-revisited@latest

pnpm create remark-deflist-revisited

yarn create remark-deflist-revisited

Cloudflare Worker demo (via module itself)

npx @verikami/remark-deflist-revisited@latest

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

License

        (▒)(▒)_______███☼███____(▒)(▒)
        (▒)(█)(▒)__ ███_☼██████
        _(▒)(▒)___██____████████
        _________██____███▒▒▄▒▒
        __________██____█▒▒▒▒▒▒
        ___________██____ █▒▒▒♥___(▒)(▒)
        ____________██_____▒▒____(▒)(█)(▒)
        __________ __██____▒▒______(▒)(▒)
        _____________██__▓▓▒▓_______█
        ________██__██ ▓▓▓▒▒▒▓____█
        _(▒)(▒)___███_ ▓▓_▓▓▓▓▓___█
        (▒)(█)(▒)______▓▓__▓▓▓▓▓___█
        _(▒)(▒)_____ _▓▓__▓▓▓▓▓___█___█
        ___________ ▓▓___▓▓▓▓_▓___█_█
        __________ ▓▓___▓▓▓▓__▓▓__█
        _________ ▓▓___███☼█__▓▓__█
        ___♥▒▒♥▒♥▒♥▒♥▒♥▒♥▒♥ __▓▓_█
        ___ ♥▒♥▒▒♥▒♥▒♥▒♥▒▒♥▒♥__▒▒▒
        ____ ♥▒♥▒▒♥▒♥▒♥▒▒♥▒▒♥▒____█
        ______ ♥▒▒♥▒♥▒♥▒♥▒♥▒▒♥▒♥__█
        ________ ♥▒▒♥▒▒♥▒♥▒▒♥▒▒♥▒♥
        ___________♥▒♥▒▒♥▒▒♥▒▒♥▒▒♥▒
        _______________▓▓_▓▓
        _(▒)(▒)_________▓▓_▓▓
        (▒)(█)(▒)_______▓▓_▓▓
        _(▒)(▒)_________▓▓_▓▓
        _______________▓▓_▓▓
        _______________▓▓▓▓
        _______________▓▓▓
        ______█████████
        ________██____██
        ______█☼█____██
        ______█_______██
        ______________█☼█
        ______________██__█▄

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

veriKami °// Weronika Kami

@verikami/remark-deflist-revisited

Markdown

Installation

Usage

License

Live Examples

Interactive Installation

npm + pnpm + yarn

Cloudflare Worker demo (via module itself)

License