@hrwg/vue-marked v0.0.2

VueMarked

VueMarked is an isomorphic and configurable Vue Component that renders Markdown as HTML. It is based on marked - one of the most popular JavaScript libraries for rendering Markdown.

At the moment, VueMarked is still under development, so use it at your own risk or wait for the first major release.

Features

• Easy to use Vue Component
• Isomorphic - works on client and server
• Little abstraction - if marked can render it, so can VueMarked

Installation

In order to install VueMarked, run the following command inside your NodeJS project.

$ npm i @hrwg/vue-marked

Usage

Using the component is as simple as importing and registering it into your Vue components and providing it with your Markdown code using the default slot.

Vue Component

This piece of code gets you up and running with rendering Markdown:

<template>
    <vue-marked>#Headline</vue-marked>
</template>

<script>
    import VueMarked from 'vue-marked';
    
    export default {
        components: {
            VueMarked,
        },
    };
</script>

Please be aware that additional spaces in the Markdown code are not being trimmed. Inserting your Markdown directly in the slot may lead to unwanted behavior.

Configuration

For easy of use and freedom of configuration, VueMarked does not abstract anything away, but is merely a wrapper for marked.

Thus, you can provide your own, preconfigured marked instance to the component, like this:

<template>
    <vue-marked :marked="this.marked">#Headline</vue-marked>
</template>

<script>
    import marked from 'marked';
    import VueMarked from 'vue-marked';
    
    export default {
        components: {
            VueMarked,
        },
        
        created() {
            this.marked = marked;
            this.marked.setOptions({
                // ...
            });
        },
    };
</script>

You can find a list of possible configuration options in the official documentation of marked.

Changelog

This project adheres to Semantic Versioning. Please refer to the CHANGELOG.md for detailed changes and migration instructions.

License

MIT