Get unlimited public & private packages + team-based management with npm Teams.Learn more »

vmark

1.2.0 • Public • Published

💖 Using webpack? You may want vmark-loader ➡️

vmark

NPM version NPM downloads CircleCI donate chat

Install

yarn add vmark

Usage

Basically you can write Markdown code alongside <script> and <style> tags, and these tags work just like how it is in a normal .vue file.

In:

Show off some counter
 
<counter :start="0" />
 
<script>
import counter from './counter.vue'
export default {
  components: {
    counter
  }
}
</script>

Out:

<template>
  <div class="vmark">
    <h1>Show off some counter</h1>
    <counter :start="0" />
  </div>
</template>
 
<script>
import counter from './counter.vue'
export default {
  components: {
    counter
  }
}
</script>

Code:

const component = vmark(input)
// Get the component in SFC format

Insert code block

Automatically transform:

```vue {insert: 'below'}
<button>Button</button>
```

Into:

```vue
<button>Button</button>
```
 
<button>Button</button>

insert can also be above.

API

vmark(input, [options])

input

Type: string
Required: true

Input markdown string.

options

options.markdown

Options for markdown-it.

options.extend
  • Type: (md: MarkdownIt) => void

A function whose first argument is the MarkdownIt instance.

options.wrapHTML
  • Type: (html: string) => string
  • Default: html => `<div class="vmark">${html}</div>`

Wrap the HTML in an element, because the <template> block in Vue SFC doesn't allow multiple root elements. You can use this option to wrap HTML inside a Vue component:

const wrapHTML = html => `<render-html>${html}</render-html>`

Then inside the <render-html> component, you can access the html like this:

<template>
  <div class="content">
    <!-- `html` is available as default slot -->
    <slot name="default"></slot>
  </div>
</template>

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

vmark © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

github.com/egoist · GitHub @egoist · Twitter @_egoistlily

Keywords

none

Install

npm i vmark

DownloadsWeekly Downloads

282

Version

1.2.0

License

MIT

Unpacked Size

7.11 kB

Total Files

7

Last publish

Collaborators

  • avatar