Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/egoist/vmark
Convert markdown to Vue component.
https://github.com/egoist/vmark
Last synced: 14 days ago
JSON representation
Convert markdown to Vue component.
- Host: GitHub
- URL: https://github.com/egoist/vmark
- Owner: egoist
- License: mit
- Created: 2018-02-18T16:06:05.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T09:16:09.000Z (almost 2 years ago)
- Last Synced: 2024-10-23T03:28:01.499Z (22 days ago)
- Language: JavaScript
- Homepage:
- Size: 629 KB
- Stars: 162
- Watchers: 7
- Forks: 11
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - vmark
README
> __💖 Using webpack? You may want vmark-loader ➡️__
# vmark
[](https://npmjs.com/package/vmark) [](https://npmjs.com/package/vmark) [](https://circleci.com/gh/egoist/vmark/tree/master) [](https://github.com/egoist/donate) [](https://chat.egoist.moe)
## Install
```bash
yarn add vmark
```
## Usage
Basically you can write Markdown code alongside `` and `<style>` tags, and these tags work just like how it is in a normal `.vue` file.
In:
```markdown
# Show off some counter
<counter :start="0" />
<script>
import counter from './counter.vue'
export default {
components: {
counter
}
}
```
Out:
```vue
Show off some counter
import counter from './counter.vue'
export default {
components: {
counter
}
}
```
Code:
```js
const component = vmark(input)
// Get the component in SFC format
```
### Insert code block
Automatically transform:
````markdown
```vue {insert: 'below'}
Button
```
````
Into:
````markdown
```vue
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](https://markdown-it.github.io/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 `` block in Vue SFC doesn't allow multiple root elements. You can use this option to wrap HTML inside a Vue component:
```js
const wrapHTML = html => `${html}`
```
Then inside the `` component, you can access the `html` like this:
```vue
```
## 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](https://github.com/egoist), Released under the [MIT](./LICENSE) License.
Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/vmark/contributors)).
> [github.com/egoist](https://github.com/egoist) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)