Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/medfreeman/remark-vue
Compile Markdown to Vue with remark
https://github.com/medfreeman/remark-vue
compile html markdown remark stringify vuejs2
Last synced: 2 days ago
JSON representation
Compile Markdown to Vue with remark
- Host: GitHub
- URL: https://github.com/medfreeman/remark-vue
- Owner: medfreeman
- License: mit
- Fork: true (remarkjs/remark-react)
- Created: 2017-05-22T11:13:20.000Z (over 7 years ago)
- Default Branch: vuejs
- Last Pushed: 2020-06-03T09:19:38.000Z (over 4 years ago)
- Last Synced: 2024-09-25T01:24:00.769Z (2 days ago)
- Topics: compile, html, markdown, remark, stringify, vuejs2
- Language: HTML
- Homepage:
- Size: 1.17 MB
- Stars: 15
- Watchers: 3
- Forks: 1
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# remark-vue
[](https://www.npmjs.com/package/remark-vue)
[](https://npmjs.com/package/remark-vue)
[](https://circleci.com/gh/medfreeman/remark-vue)
[](https://codecov.io/gh/medfreeman/remark-vue/branch/vuejs)
[](https://greenkeeper.io/)
[](https://david-dm.org/medfreeman/remark-vue)
[](https://david-dm.org/medfreeman/remark-vue?type=dev)
> Compile Markdown to Vue with remark
[📖 **Release Notes**](./CHANGELOG.md)
## Features
**remark-vue** compiles markdown to Vue. Built on [**remark**](https://github.com/remarkjs/remark),
an extensively tested and pluggable parser.
**Why?** Using `domPropsInnerHTML` in
[Vue.js](https://vuejs.org/) is a common cause of [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting)
attacks: user input can include script tags and other kinds of active
content that reaches across domains and harms security. remark-vue
builds a DOM in Vue, using [Vue createElement](https://vuejs.org/v2/guide/render-function.html#Nodes-Trees-and-the-Virtual-DOM):
this means that you can display parsed & formatted Markdown content
in an application without using `domPropsInnerHTML`.
## Installation
[npm](https://docs.npmjs.com/cli/install):
```bash
npm install remark-vue
```
## Table of Contents
* [Programmatic](#programmatic)
* [remark.use(vue, options)](#remarkusevue-options)
* [Configuration](#configuration)
* [Integrations](#integrations)
* [License](#license)
## Programmatic
### [remark](https://github.com/wooorm/remark#api).[use](https://github.com/wooorm/remark#remarkuseplugin-options)(vue, [options](#configuration))
**Parameters**
* `vue` — This plugin;
* `options` (`Object?`) — See [below](#configuration).
Let’s say `example.js` looks as follows:
```js
var Vue = require('vue'),
remark = require('remark'),
vueRenderer = require('remark-vue');
var App = new Vue({
el: '#app',
data: function () {
return {
text: '# hello world'
}
},
onChange(e) {
this.text = e.target.value;
},
render() {
return (
{ remark().use(vueRenderer).processSync(this.text).contents }
);
}
});
```
## Configuration
All options, including the `options` object itself, are optional:
* `sanitize` (`object` or `boolean`, default: `undefined`)
— Sanitation schema to use. Passed to
[hast-util-sanitize](https://github.com/wooorm/hast-util-sanitize).
The default schema, if none or `true` is passed, adheres to GitHub’s
sanitation rules.
**This means that non-standard HAST nodes and many
HTML elements are *by default* santized out.** If you want to be more
permissive, you should provide a value for `sanitize`.
If `false` is passed, it does not sanitize input.
* `prefix` (`string`, default: `''`)
— Vue key.
* `Vue` (`Function`, default: `require('vue')`)
— Global Vue constructor.
* `remarkVueComponents` (`object`, default: `undefined`)
— Provides a way to override default elements (``, `