@mbalex99/markdown-it-fence

markdown-it-fence

Donate to the original developer:

fence customize plugin for markdown-it

• TypeScript 4.x support
• Debug tests with VSCode

Install

yarn add @mbalex99/markdown-it-fence --save
npm install @mbalex99/markdown-it-fence --save

Usage

const markdownitfence = require('markdown-it-fence')

function yourPlugin (md, options) {
  return markdownitfence(md, 'yourPluginName', {
    marker: yourMarker,   // default is '`'
    render: yourRender,
    validate: yourValidate
  })
}

const md = require('markdown-it')();
md.use(yourPlugin).render(`content you want to parse`)

Example

Markdown:

:::customrender

*hello world*

```js
function() {
  console.log('hi')
}
```

:::customrender
__bar__
:::

:::

And your js

markdownitfence(md, "customrender", {
  marker: ":",
  render: (tokens, idx, options, env, self) => {
    return `<div class="bar">${md.render(tokens[idx].content)}</div>`
  },
})


const html = md.use(plugin).render(myMarkdown)
console.log(html)

And it'll print:

<div class="bar"><p><em>hello world</em></p>
<pre><code class="language-js">function() {
  console.log('hi')
}
</code></pre>
<div class="bar"><p><strong>bar</strong></p>
</div></div><pre><code></code></pre>

Option params

marker

Type: string
Default: `

Marker of fence block.

render

Type: function
Default: defaultRender

Render function.

validate

Type: function
Default: defaultValidate

Validate function.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

markdown-it-fence geekplux, Released under the MIT License.
Authored and maintained by geekplux with help from contributors (list).

github.com/geekplux · GitHub @geekplux · Twitter @geekplux