match-syllabus v1.0.9

懒人党福音,即插即用直接安装即可。

突发奇想自己写一个匹配文章的标题制作大纲并且附带锚点功能 Match your article syllabus

演示站(Demo):用JS和正则写博客文章大纲.md

安装

npm install match-syllabus

使用

<!--  html 部分 -->
<ul>
    <li v-html="items.html" v-for="(items,index) in syllabus" :key="index" @click="toHash(items.title)"></li>
</ul>

// JavaScript 部分
import syllabus from 'match-syllabus/syllabus/index'

created(){
    let result = syllabus(html)
    this.html = result.content;
    this.syllabus = result.syllabus;
},methods: {
    toHash(path){
        document.querySelector('#'+path).scrollIntoView(true)
    },
}

/* css 部分 v-html 需要使用 >>>  */
<style>
.syllabus > ul > li{
    margin:8px;
    line-height: 18px;
}
.syllabus > ul > li >>> h1 {
    font-size:16px;
    font-weight: 600;
}
.syllabus > ul > li >>> h2 {
    font-size:14px;
    font-weight: 600;
    text-indent:2em
}
.syllabus > ul > li >>> h3 {
    font-size:12px;
    font-weight: 400;
    text-indent:3em
}
.syllabus > ul > li >>> h4 {
    font-size:12px;
    font-weight: 400;
    text-indent:4em
}
.syllabus > ul > li >>> h5 {
    font-size:12px;
    font-weight: 400;
    text-indent:5em
}
</style>