Name	Last modified	Size	Description
	Parent Directory		-
	dist/	2023-06-08 13:46	-
	node_modules/	2023-06-08 13:46	-
	README.md	2023-06-08 13:46	2.1K	0fb859dc fixed mobile overflwo options [كارل مبارك]
	package.json	2023-06-08 13:46	2.4K	0fb859dc fixed mobile overflwo options [كارل مبارك]

# vue-markdown-it

## Description
A simple Vue wrapper around [markdown-it](https://github.com/markdown-it/markdown-it), based on [vue-markdown](https://github.com/miaolz123/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](https://mathiasbynens.github.io/rel-noopener/) 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer).
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](https://www.w3.org/TR/referrer-policy/) 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:
```javascript
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:
```html
<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:
```scss
@import "~highlight.js/styles/default.css";
```