open-index/open-npm huggingface dataset:
npm package: @jackgamesftw/marked-vue
Description: Render Markdown as Vue 3 components
Author: jackgamesftw
Latest version: 3.0.2-beta.1

# marked-vue

> Render Markdown as Vue 3 components using [marked].

[![Tests](https://github.com/sibiraj-s/marked-vue/actions/workflows/tests.yml/badge.svg)](https://github.com/sibiraj-s/marked-vue/actions/workflows/tests.yml)
[![Version](https://badgen.net/npm/v/marked-vue)](https://npmjs.com/marked-vue)
[![License](https://badgen.net/npm/license/marked-vue)](https://github.com/sibiraj-s/marked-vue/blob/master/LICENSE)

## TL;DR

- Uses [marked](https://marked.js.org/) to parse markdown
- Renders actual Vue VNodes (no `v-html`)
- HTML in markdown is rendered as plain text

[Demo]

## Installation

```bash
$ npm i marked-vue
```

## Usage (Vue 3)

```ts
import { createSSRApp, h } from 'vue';
import { renderToString } from '@vue/server-renderer';
import Markdown from 'marked-vue';

const app = createSSRApp({
  render() {
    return h(Markdown, { value: '# Hello world!' });
  },
});

const html = await renderToString(app);
```

## Examples

- SSR: `node examples/ssr.mjs`
- SPA: serve the repo root and open `examples/spa/index.html`

### Component Props

- **value**[`string`] - Markdown content.
- **baseURL** [`string`] - A prefix url for any relative link.
- **openLinksInNewTab** [`boolean`] - Attribute `target=_blank` will be added to link elements
- **langPrefix** [`string`] - A string to prefix the class/className in a `<code>` block. Defaults to `language-`.
- **breaks** [`boolean`] - Add `br` tag on single line breaks. Requires `gfm` to be `true`
- **gfm** [`boolean`] - Use approved [Github Flavoured Markdown](https://github.github.com/gfm/)
- **isInline**[`boolean`] - Parse [inline](https://marked.js.org/using_advanced#inline) markdown.

## Syntax highlight code blocks

Example: syntax highlight integration via `langPrefix`

```ts
import { h } from 'vue';
import Markdown, { VueRenderer } from 'marked-vue';

const renderer = new VueRenderer({
  langPrefix: 'language-',
  // override any method if needed
  // code: (snippet, lang) => h('pre', [h('code', { class: `language-${lang}` }, snippet)]),
});

// <Markdown :value="markdown" :renderer="renderer" />
```

Some awesome options available to highlight code

- [react-syntax-highlighter]
- [react-lowlight]
- [react-refractor]

[marked]: https://marked.js.org/