Remark Collapse

Find range of a target heading and make it collapsible by <details> and <summary> like the below.

Open example

Tada! 🎉

<details><summary>Open example</summary>

Tada! :tada:

</details>

Installation

npm install remark-collapse

Usage

const processor = remark()
  .use(collapse, {test: 'tango'})

const inputString = [
  '# Heading1',
  '',
  '## tango',
  '',
  'target content',
  '',
  '## Another heading2',
  ''
].join('\n')

const resultString = processor.processSync(inputString).toString()

resultString

# Heading1

## tango

<details><summary>Open tango</summary>

target content

</details>

## Another heading2

API

To find heading range, Remark Collapse uses mdast-util-heading-range.

options.test (string, RegExp, function(string, Node): boolean)

Required. Test to be passed to mdast-util-heading-range#heading

test — Heading to look for. When string, wrapped in new RegExp('^(' + value + ')$', 'i'); when RegExp, wrapped in function (value) {expression.test(value)}.

options.summary (function(string): string, string)

Summarizing function. By default, it uses text of the target heading and prepends Open to it.

function defaultSummarizer (str) {
  return 'Open ' + str
}

Example

function defuseTimeBomb (str) {
  return 'Tick... Tock... Tick... Tock...⏱'
}

const processor = remark()
  .use(collapse, {
    test: 'tango',
    summary: defuseTimeBomb
    /* Also, you can provide a string
    summary: 'Tick... Tock... Tick... Tock...⏱'
    */
  })

const inputString = [
  '# tango',
  '',
  '**KABOOM!!**',
  ''
].join()

const resultString = processor.processSync(inputString).toString()

resultString

# tango

<details><summary>Tick... Tock... Tick... Tock...⏱</summary>

**KABOOM!!**

</details>

Result

Tick... Tock... Tick... Tock...⏱

KABOOM!!

License

MIT © Junyoung Choi