Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JanGuillermo/vue3-markdown-it
✨ An awesome Vue 3 markdown-it wrapper plugin that can even support external plugins!
https://github.com/JanGuillermo/vue3-markdown-it
markdown markdown-it vue vue3 vue3-markdown
Last synced: about 2 months ago
JSON representation
✨ An awesome Vue 3 markdown-it wrapper plugin that can even support external plugins!
- Host: GitHub
- URL: https://github.com/JanGuillermo/vue3-markdown-it
- Owner: JanGuillermo
- License: mit
- Archived: true
- Created: 2020-09-13T08:16:33.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T22:23:13.000Z (about 2 years ago)
- Last Synced: 2024-11-29T16:41:09.687Z (2 months ago)
- Topics: markdown, markdown-it, vue, vue3, vue3-markdown
- Language: JavaScript
- Homepage:
- Size: 11.2 MB
- Stars: 239
- Watchers: 2
- Forks: 29
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Currently not being maintained.
Please go to [vite-plugin-vue-markdown](https://github.com/mdit-vue/vite-plugin-vue-markdown) or find another alternative.
---
# ✨ vue3-markdown-it ✨
[](https://www.npmjs.com/package/vue3-markdown-it) [](https://travis-ci.com/JanGuillermo/vue3-markdown-it) [](https://codecov.io/gh/JanGuillermo/vue3-markdown-it) [](https://david-dm.org/JanGuillermo/vue3-markdown-it) [](https://snyk.io/test/github/JanGuillermo/vue3-markdown-it?targetFile=package.json) [](https://www.npmjs.com/package/vue3-markdown-it)
> An awesome Vue 3 [markdown-it](https://github.com/markdown-it/markdown-it) wrapper plugin that can even support external plugins!
🔎 [Live Demo](https://janguillermo.github.io/vue3-markdown-it/)
---
## Installation
```
npm install vue3-markdown-it
```
## Supported Plugins
- [markdown-it](https://github.com/markdown-it/markdown-it) - __The one__ that started it all
- [markdown-it-abbr](https://github.com/markdown-it/markdown-it-abbr) - Add abbreviations
- [markdown-it-anchor](https://github.com/valeriangalliat/markdown-it-anchor) - Add anchors
- [markdown-it-deflist](https://github.com/markdown-it/markdown-it-deflist) - Add definition lists
- [markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji) - Add emojis
- [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote) - Add footnotes
- [markdown-it-highlightjs](https://github.com/valeriangalliat/markdown-it-highlightjs) - Add highlighting for code blocks
- [markdown-it-ins](https://github.com/markdown-it/markdown-it-ins) - Add `` tags
- [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark) - Add marking/highlighting
- [markdown-it-sub](https://github.com/markdown-it/markdown-it-sub) - Add subscript
- [markdown-it-sup](https://github.com/markdown-it/markdown-it-sup) - Add superscript
- [markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists) - Add task lists
- [markdown-it-toc-done-right](https://github.com/nagaozen/markdown-it-toc-done-right) - Add table of contents
## Usage
### Global Use
```js
import { createApp } from 'vue';
import Markdown from 'vue3-markdown-it';
const app = createApp();
app.use(Markdown);
```
### CSS
If you want to use highlighting for code blocks, you'll have to import a CSS file from [highlight.js](https://github.com/highlightjs/highlight.js). View more styles [here](https://github.com/highlightjs/highlight.js/tree/master/src/styles). The code sample below imports the Monokai styling.
```js
import 'highlight.js/styles/monokai.css';
```
### Single Use
```vue
import Markdown from 'vue3-markdown-it';
export default {
components: {
Markdown
},
data() {
return {
source: '# Hello World!'
}
}
}
```
## Props
The following properties are supported:
### `anchor`
> View [markdown-it-anchor](https://github.com/valeriangalliat/markdown-it-anchor) for more information.
Type: `Object` | Default value: `null`
### `breaks`
> Convert `\n` in paragraphs into `
`.
Type: `Boolean` | Default value: `false`
### `emoji`
> View [markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji) for more information.
Type: `Object` | Default value: `null`
### `highlight`
> View [markdown-it-highlightjs](https://github.com/valeriangalliat/markdown-it-highlightjs) for more information.
Type: `Object` | Default value: `null`
### `html`
> Enable HTML tags in source.
Type: `Boolean` | Default value: `false`
### `langPrefix`
> CSS language prefix for fenced blocks. Can be useful for external highlighters.
Type: `String` | Default value: `language-`
### `linkify`
> Autoconvert URL-like text to links
Type: `Boolean` | Default value: `false`
### `plugins` 🌟
> Don't see your favorite markdown-it plugin in the list of supported plugins? You can create an array of plugins and bind it into the component!
> > The array only consists of objects (plugins in that case). A plugin has two properties:
> > - `plugin`: A `markdown-it` plugin imported into this
> > - `options`: Set the options for a specific `markdown-it` plugin.
> ```vue
>
>
>
>
>
>
>
> import MarkdownItStrikethroughAlt from 'markdown-it-strikethrough-alt';
> import Markdown from 'vue3-markdown-it';
>
> export default {
> components: {
> Markdown
> },
> data() {
> return {
> source: '--this is not so cool!--',
> plugins = [
> {
> plugin: MarkdownItStrikethroughAlt
> }
> ]
> }
> }
> }
>
> ```
Type: `Array` | Default value: `[]`
### `quotes`
> Double + single quotes replacement pairs, when typographer enabled and smartquotes on. Could be either a String or an Array. *For example*, you can use `«»„“` for Russian, `„“‚‘` for German, and `['«\xA0', '\xA0»', '‹\xA0', '\xA0›']` for French (including nbsp).
Type: `String | String[]` | Default value: `“”‘’`
### `source`
> Content to be rendered into markdown.
Type: `String` | Default value: `null`
### `tasklists`
> View [markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists) for more information.
Type: `Object` | Default value: `null`
### `toc`
> View [markdown-it-toc-done-right](https://github.com/nagaozen/markdown-it-toc-done-right) for more information.
Type: `Object` | Default value: `null`
### `typographer`
> Enable some language-neutral replacement + quotes beautification.
Type: `Boolean` | Default value: `false`
### `xhtmlOut`
> Use `/` to close single tags (`
`).
Type: `Boolean` | Default value: `false`
## License
[MIT](https://github.com/JanGuillermo/vue3-markdown-it/blob/master/LICENSE)