vue-markdown-it-toc

markdown-it toc components

• add toc base css
• when scroll the page, set the active toc item
• support set offset to the header

usage

• example
  • vue-markdown-it-toc github
  • vue-markdown-it-toc online demo
• import the component plugins

  import Vue from 'vue'
  import MarkdownItToc from 'vue-markdown-it-toc'
  Vue.use(MarkdownItToc)
  

• use in vue project
  • template

    <markdown-it-toc class="markdown-it-wrap"
      :content="content"
      :offset="21"
      :level="3">
    </markdown-it-toc>
    

  • css

    .markdown-it-wrap {
      width: 1140px;
      margin: 0 auto;
      padding-right: 165px;
      box-sizing: border-box;
    }
    

questions

• if the css style does not satisfy your usage scence, then you can rewrite the toc style that was wraped by the .table-of-contents css