vue-markdown-it

A Vue.js wrapper around markdown-it, a powerful markdown renderer

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-markdown-it
0.9.44 years ago4 years agoMinified + gzip package size for vue-markdown-it in KB

Readme

vue-markdown-it

Description

A simple Vue wrapper around markdown-it, based on vue-markdown.

Security

Vue-markdown-it is intended to be secure by default, so HTML tags and images are not allowed. To further increase security and privacy, the attributes ``target=_blank`, `rel=noopener noreferrer` and `referrerpolicy=no-referrer`` are automatically added to URLs.
Adding ``rel=noopener` ensures that the `window.opener`` API cannot be exploited to tamper with the originating document. It should always be used with untrusted links.
Adding ``rel=noreferrer` prevents the browser to send your page's address, or other values, as referrer via the `Referer`` HTTP header. The ``Referer`` header has the potential to reveal information about the browsing history of the user, which is a privacy concern. As such ``rel=noreferrer`` should also be used with untrusted links.
Adding ``referrerpolicy=no-referrer` has the same effect as `rel=noreferrer`` with the current setting, but the referrer-policy specification allows more fine-grained control over the referrer policy, so it may replace ``rel=noreferrer`` fully when browser support is more widely available.

Installation

npm install vue-markdown-it
Then, you import the Vue component and use it:
import VueMarkdownIt from 'vue-markdown-it';
export default {
    name: 'YourComponent',
    components: {
        VueMarkdownIt
    },
    data: function() {
        return {
            markdown: '### Hello world!'
        };
    }
}
and then you use the component in your template:
<template>
 <vue-markdown-it :source="markdown" id="some-id" class="my-markdown-class"/>
</template>
if you also want syntax highlighting in code blocks to work, you need to:
@import "~highlight.js/styles/default.css";