Vue.js(Vue-CLI 3)で、MD /markdown 表示を行う。 #Vue.js #web #javascript

index:

概要:

markdownの編集機能を、調べる機会があったので
Vue.js に、実装する場合のメモとなります。

環境

vue.js
Vue-CLI 3
marked.js (markdown ライブラリ)

参考

https://github.com/markedjs/marked

準備

npm 版を、追加しました。

npm install marked

Vue コンポーネント

・import は、
import marked from 'marked'
で、読込み。
marked() 関数で、MD書式から、HTML形式に変換されるようです。

<template>
    <div>
        <h1>tasks - test:</h1>
        <br />
        <hr />
        <div v-html="str_md"></div>
    </div>
</template>

<script>
import {Mixin} from '../../mixin'
import marked from  'marked'

export default {
    mixins:[Mixin],
    created() {
        this.test_marked()
    },
    data() {
        return {
            user : [],
            message :'',
            str_md : ''
        }
    },
    methods: {
        test_marked() {
            this.str_md = marked('# Marked in the browser\n\nRendered by **marked**.')
            console.log(this.str_md)
        },
    }
}
</script>

画面