posva / markdown-it-custom-block

Handle custom blocks transformations for markdown-it

markdown-it-custom-block

Handle custom blocks transformations

Usage

const customBlock = require('markdown-it-custom-block')

markdownit()
  .use(customBlock, {
    example (arg) {
      return `<example-${arg}/>`
    },
    video (url) {
      return `<video controls>
        <source src="${url}" type="video/mp4">
      </video>`
    }
  })

@[example](hello)

@[video](video.mp4)

becomes

<example-hello/>
<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

License

MIT

markdown-it-custom-block's Issues

Cannot handle multiple occurrences

The lib cannot handle multiple occurrences of the same custom block.

Error case 1

Using the same custom block twice without separation. The lib cannot transform the blocks at all.

Used custom block

const md = markdownit().use(customBlock, {
  example (arg) {
    return `<example-${arg}/>`
  }
})

Test fixture

---
desc: Element
---

Two occurrences no separation
.
@[example](button1)
@[example](button2)
.
<example-button1/>
<example-button2/>
.

Output

  Custom Blocks
    Element
      1) Two occurrences no separation


  0 passing (42ms)
  1 failing

  1) Custom Blocks Element Two occurrences no separation:

      AssertionError: expected '<p>@<a href="button1">example</a>\n@<a href="button2">example</a></p>\n' to equal '<example-button1/>\n<example-button2/>\n'
      + expected - actual

      -<p>@<a href="button1">example</a>
      -@<a href="button2">example</a></p>
      +<example-button1/>
      +<example-button2/>

      at Function.assert.strictEqual (node_modules/chai/lib/chai/interface/assert.js:169:32)
      at Context.<anonymous> (node_modules/markdown-it-testgen/index.js:188:26)

Error case 2

Using the same custom block twice with an empty line between them. The first transform will be repeated twice.

Used custom block

const md = markdownit().use(customBlock, {
  example (arg) {
    return `<example-${arg}/>`
  }
})

Test fixture

---
desc: Element
---

Two occurrences with separation
.
@[example](button1)

@[example](button2)
.
<example-button1/>
<example-button2/>
.

Output

   Custom Blocks
    Element
      1) Two occurrences with separation


  0 passing (38ms)
  1 failing

  1) Custom Blocks Element Two occurrences with separation:

      AssertionError: expected '<example-button1/>\n<example-button1/>\n' to equal '<example-button1/>\n<example-button2/>\n'
      + expected - actual

       <example-button1/>
      -<example-button1/>
      +<example-button2/>

      at Function.assert.strictEqual (node_modules/chai/lib/chai/interface/assert.js:169:32)
      at Context.<anonymous> (node_modules/markdown-it-testgen/index.js:188:26)

Multiple template literals

Is it possible to use more than one template literal?

const customBlock = require('markdown-it-custom-block')

markdownit()
  .use(customBlock, {
    test (one, two) {
      return `<div class="one">${one}</div><div class="two">${two}</div>`
    }
  })

@[test](One),(Two)

Match multiple lines inside parens

The regex does not match stuff like this

@[hello](
hi
)

because the dot in JS does not match newlines even with the m modifier. See https://simonwillison.net/2004/Sep/20/newlines/. The regex needs to look like this

const embedRE = /@\[([\w-]+)\]\(([\s\S]+)\)/im;

Dependency Dashboard

This issue provides visibility into Renovate updates and their statuses. Learn more

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update dependency mocha to ^9.1.2

---

• Check this box to trigger a request for Renovate to run again on this repository

Invalid repository url

Repo url is invalid in the package.json file -> npm repo link is wrong.

 "repository": {
    "type": "git",
    "url": "git+https://github.com/posva/vue-mdc.git"
  },

Handle adjacent blocks (no blank line)

At the moment it's necessary to add a blank line between blocks:

@[example](button1)

@[example](button2)

I'm open to contributions to make this work:

@[example](button1)
@[example](button2)