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";