@mbalex99/markdown-it-fence

fence customize plugin for markdown-it

Usage no npm install needed!

<script type="module">
  import mbalex99MarkdownItFence from 'https://cdn.skypack.dev/@mbalex99/markdown-it-fence';
</script>

README

markdown-it-fence

NPM version NPM downloads Build Status codecov donate

fence customize plugin for markdown-it

Install

yarn add markdown-it-fence --save
npm install 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