https://github.com/7nohe/vite-plugin-vue-marked

:memo: Vite plugin for converting Markdown to Vue
https://github.com/7nohe/vite-plugin-vue-marked

vite vite-plugin vue vue3

Last synced: 17 days ago
JSON representation

:memo: Vite plugin for converting Markdown to Vue

• Host: GitHub
• URL: https://github.com/7nohe/vite-plugin-vue-marked
• Owner: 7nohe
• License: mit
• Created: 2022-06-16T14:16:37.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-07-19T13:47:36.000Z (over 2 years ago)
• Last Synced: 2024-10-15T02:32:38.117Z (about 1 month ago)
• Topics: vite, vite-plugin, vue, vue3
• Language: TypeScript
• Homepage:
• Size: 113 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-plugin-vue-marked

This plugin allows you to use `markdown` blocks in your Vue SFC with Vite

**⚠️ This plugin currently only works with the \ format**

## Install

Install the pacakge

```bash

npm install -D @7nohe/vite-plugin-vue-marked

```

Add to your `vite.config.ts`

```ts

import { defineConfig } from "vite";

import vue from "@vitejs/plugin-vue";

import vueMarked from "@7nohe/vite-plugin-vue-marked";

export default defineConfig({

  plugins: [vue(), vueMarked()],

});

```

## Usage

```vue

<!-- Example.vue -->

<script setup lang="ts">

import VMarked from 'vmarked';

  

# Heading 1

## Heading 2

### Heading 3

```

You can use [marked](https://marked.js.org/) options to customize the generated HTML code. 

```ts

import { defineConfig } from "vite";

import vue from "@vitejs/plugin-vue";

import vueMarked from "@7nohe/vite-plugin-vue-marked";

import hljs from "highlight.js";

const renderer = {

  heading(text, level) {

    const escapedText = text.toLowerCase().replace(/[^\w]+/g, "-");

    return `

            

              

                

              

              ${text}

            `;

  },

};

export default defineConfig({

  plugins: [

    vue(),

    vueMarked({

      options: {

        highlight: function (code, lang) {

          const language = hljs.getLanguage(lang) ? lang : "plaintext";

          return hljs.highlight(code, { language }).value;

        },

      },

      extensions: [{ renderer }],

    }),

  ],

});

```

An example app is available in the `/examples/vue-app` directory.

## Options

| name         | type              | describe                                                                  |

| ------------ | ----------------- | ------------------------------------------------------------------------- |

| options      | MarkedOptions     | marked's [setOptions config](https://marked.js.org/using_advanced#options)|

| extensions   | MarkedExtension[] | marked's [marked.use(extension)](https://marked.js.org/using_pro#use)     |

| mermaid      | mermaidAPI.Config | [Mermaid API Configuration](https://mermaid-js.github.io/mermaid/#/Setup) |

## License

MIT