PIMD Showmore Plugin

Hides non-relevant parts of code examples.

Very often code examples require more code to be rendered as preview than to be understood by a human. Those extra code is noise and should be hidden.

This plugin shows ··· instead of the noise and reveals the code on click.

Example usage

```html +showmore=5..13
<ul>
  <li class="my-list-item">
    Item 1
  </li>
  <li class="my-list-item">
    Item 2
  </li>
  <li class="my-list-item">
    Item 3
  </li>
  <li class="my-list-item">
    Item 4
  </li>
</ul>
```

Result:

Setup

This requires the HTML injector plugin to be loaded first:

const { Document } = require("pimd")
const Config = require("pimd/lib/config")
const htmlInjector = require("@pimd/html-injector-plugin")
const showmorePlugin = require("@pimd/showmore-plugin")

const config = new Config()
config.use(htmlInjector)
config.use(showmorePlugin)

const markdown = `
\`\`\`html +showmore=5..13
<ul>
  <li class="my-list-item">
    Item 1
  </li>
  <li class="my-list-item">
    Item 2
  </li>
  <li class="my-list-item">
    Item 3
  </li>
  <li class="my-list-item">
    Item 4
  </li>
</ul>
\`\`\`
`
const doc = new Document(markdown, config)
const html = doc.render()
console.log(html)

---

Copyright

Copyright 2018++ Nico Hagenburger. See MIT-LICENSE for details. Get in touch with @hagenburger on Twitter or open an issue.