vue-markdown 之 vue-simplemde

vue-simplemde

npm install vue-simplemde --save

• // main.js
  import Vue from 'vue'
  import VueSimplemde from 'vue-simplemde'
  import 'simplemde/dist/simplemde.min.css'
  
  Vue.use(VueSimplemde)

• // use.vue
  <template>
    <markdown-editor v-model="content" ref="markdownEditor"></markdown-editor>
  </template>
  
  <script>
    import markdownEditor from 'vue-simplemde/src/markdown-editor'
  
    export default {
      components: {
        markdownEditor
      }
    }
  </script>
  
  <style>
    @import '~simplemde/dist/simplemde.min.css';
  </style>

npm install --save github-markdown-css

• <template>
    <markdown-editor preview-class="markdown-body"></markdown-editor>
  </template>
  
  <style>
    @import '~simplemde/dist/simplemde.min.css';
    @import '~github-markdown-css';
  </style>

npm install --save highlight.js

• <template>
    <markdown-editor :highlight="true"></markdown-editor>
  </template>
  
  <script>
    import hljs from 'highlight.js';
  
    window.hljs = hljs;
  </script>
  
  <style>
    @import '~simplemde/dist/simplemde.min.css';
    @import '~highlight.js/styles/atom-one-dark.css';
    /* Highlight theme list: https://github.com/isagalaev/highlight.js/tree/master/src/styles */
  </style>

npm install --save simplemde-theme-base

• <style>
    @import '~simplemde-theme-base/dist/simplemde-theme-base.min.css';
    /* no need import simplemde.min.css */
  </style>

npm install vue-simplemde --save