Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/2nthony/vuedown
đź“ťConvert markdown to Vue-component, a vmark alternative
https://github.com/2nthony/vuedown
it-just-works markdown markdown-parser marked simple vmark vue
Last synced: about 2 months ago
JSON representation
đź“ťConvert markdown to Vue-component, a vmark alternative
- Host: GitHub
- URL: https://github.com/2nthony/vuedown
- Owner: 2nthony
- License: mit
- Created: 2018-09-07T18:27:48.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T11:44:22.000Z (about 1 year ago)
- Last Synced: 2024-10-22T08:55:35.192Z (2 months ago)
- Topics: it-just-works, markdown, markdown-parser, marked, simple, vmark, vue
- Language: JavaScript
- Homepage:
- Size: 743 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# vuedown
> đź“ťConvert markdown to Vue-component
Please consider starring the project to show your ❤️ and support.
> **You can use the [@evillt/vuedown-loader](https://github.com/evillt/vuedown-loader) for webpack loader**
> **You can use the [parcel-plugin-vuedown](https://github.com/evillt/parcel-plugin-vuedown) for parcel plugin**
[](https://npmjs.com/package/vuedown)
[](https://npmjs.com/package/vuedown)
[](https://circleci.com/gh/evillt/vuedown/tree/master)
[](./LICENSE)
[](https://donate.evila.me)
vuedown is very similar to [vmark](https://github.com/egoist/vmark), but with different tooling based on.
vuedown(8kb) is 4 times smaller than vmark(30kb), because vmark use [saber-markdown(fork from markdown-it)](https://github.com/saberland/saber/tree/master/packages/saber-markdown) while vuedown use [marked(forked)](./lib/markdown/marked.js) under the hood.
## Features
- Support `@` in attribute names
- ~~Convert link to `` by default~~
- Support convert `` to ``
- Mini size
## Install
```console
yarn add vuedown --dev
```
## Usage
In:
```markdown
# {{ title }}
> I'm a markdown file
Count: {{ count }}
export default {
data() {
return {
title: 'Hello',
count: 0
}
},
methods: {
inc() {
this.count++
}
}
}
```
Out:
```html
{{ title }}
I'm a markdown file
Count: {{ count }}
export default {
data() {
return {
title: 'Hello',
count: 0
}
},
methods: {
inc() {
this.count++
}
}
}
```
Code:
```js
const component = vuedown(input)
// Get the component in Vue SFC format
```
## API
### `vuedown(input, [options])`
#### `input`
- Type: `string`
- Required: `true`
The markdown string.
#### `options`
Options for [marked.options](https://marked.js.org/#/USING_ADVANCED.md#options).
#### `options.routerLink`
- Type: `boolean`
- Default: `false`
Convert `` to `` but external link will always be ``.
#### `options.wrapHTML`
- Type: `(html: string) => string`
- Default: html => `<div class="vuedown">\${html}</div>`
Wrap the HTML in an element.
#### `options.extendMarkedRenderer`
- Type: `(renderer: marked.Renderer) => void`
You can modify the [marked renderer](https://marked.js.org/#/USING_PRO.md#renderer) we use.
#### `options.imageLazyLoading`
- Type: `boolean`
Support chrome 75's native image lazy loading.
### `vuedown.marked: marked`
[marked](https://marked.js.org)
## 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
**vuedown** © [evillt](https://github.com/evillt), Released under the [MIT](./LICENSE) License.
Authored and maintained by **EVILLT** with help from contributors ([list](https://github.com/evillt/vuedown/contributors)).
> [evila.me](https://evila.me) · GitHub [@evillt](https://github.com/evillt) · Twitter [@evillt](https://twitter.com/evillt)