sublime text3 + OmniMarkupPreviewer + js 自动生成跳转导航目录

简介

前面一篇给出了手动添加导航的方法,但在实际使用中仍然非常不方便, 这里给出了一个js脚本, 配合css, 能自动在页面左边导出h1, h2, h3, h4的具有跳转功能的导航目录;

脚本

'use strict';
// 一开始我没有使用jquery, 后来为了完善功能方便开发,添加了进去, 所以里面有原生与$两种用法
let DOC       = document;
let container = $('body');
let hs        = DOC.querySelectorAll('h1,h2,h3,h4');
let NAV       = DOC.createElement('div');

// 保存当前的ul与li
let cur_ul = addSubUl(NAV);
let cur_li = null;
let lvl     = 1;

hs.forEach(function (h, i) {
    let l = h.localName.substring(1);
    h.setAttribute('id', i);
    if (l > lvl) {
        while(lvl<l){
            // 先在当前ul增加一个子li,再在li里增加一个子ul
            cur_li = addLi(cur_ul);
            cur_ul = addSubUl(cur_li);
            ++lvl;
        }
        // 当前ul里增加一个li,再li里增加a
        cur_li = addLi(cur_ul);
        addA(cur_li, i, h.innerText);
    } else if (l == lvl) {
        cur_li = addLi(cur_ul);
        addA(cur_li, i, h.innerText);
    } else if (l < lvl) {
        while(lvl!=l){
            --lvl;
            cur_ul = cur_ul.parentNode.parentNode;
        }
        cur_li = addLi(cur_ul);
        addA(cur_li, i, h.innerText);
    }
});
let lastNav = DOC.querySelector('.nav');
if(lastNav){
    container.removeChild(lastNav);
}
NAV.setAttribute('class', 'nav');
container.prepend(NAV);

// 项目列表下拉与隐藏
let pro = $('.nav>ul>li:nth-child(odd)');
let dwn = DOC.createElement('span');
dwn.innerHTML = '\u25BC';
$('dwn').addClass('dwn-show dwn');
pro.append(dwn);
// 监听事件
$('.nav>ul').on('click','.dwn', function(e){
    $(e.target).toggleClass('dwn-show');
    $(e.target).parent('li').next().toggle();
})

// 返回ul
function addSubUl(dom) {
    let ul = document.createElement('ul');
    dom.appendChild(ul);
    return ul;
}
// 返回li
function addLi(dom) {
    let li = document.createElement('li');
    dom.appendChild(li);
    return li;
}
function addA(dom, hrf, txt){
    let a  = document.createElement('a');
    a.setAttribute('href', '#'+hrf);
    a.innerHTML = txt;
    dom.appendChild(a);
    return dom;
}

配合使用的css

*{
    font-family: '黑体';
    font-size: 16;
}
.markdown-body{
    color: #545454;
}
h1,h2,h3,h4{
    color: #FF911E;
}
/*pre{
    background: #F9F2F4;
    color: ;
}*/
.codehilite>pre{
    background: #2E2C2B;
    color:#C4C4C4;
    font-size: 16px;
    border-radius: 6px;
    padding:3px 6px;
}
.container{
    overflow-x: hidden;
    position: absolute;
    left: 220px;
}
.nav{
    border-radius: 6px;
    position: fixed;
    left: 5px;
    top: 10px;
    z-index: 99;
    color: #494949;
    background: rgba(73,73,73,0.1);
    font-size: 15px;
    width: 180px;
    margin-left: -10px;
}
/*.nav:hover{
    background: rgba(73,73,73,0.9);
}*/
.nav ul{
    padding-top: 5px;
    margin-left: 20px;
    font-size: 13px;
}
.nav>ul{
    list-style: none;
    height: 98vh;
    overflow-y:scroll;
}
.nav>ul::-webkit-scrollbar{
    display:none;
}
.nav>ul>li>a{
    color: #f20404;
    font-weight: 800;
}
.dwn{
    width: 30px;
    height:18px;
    font-weight: 800;
    float: right;
    position: relative;
    right: 20px;
    text-align: center;
    border-radius:3px;
    font-size:16px;
}
.dwn:hover{
    cursor:pointer;
}
.dwn-show{
    color: #f20404;
    background:#d5d5d5;
}
.nav>ul>li:before{
    content:'\2665\00A0';
}
code{
    background: #2E2C2B;
    color: #C4C4C4;
    border-radius: 6px;
    padding: 4px 6px;
}

使用方法

• 
  
• 将上面两断代码,分别保存为md.js, md.css;
• 将这个两个文件,保存到: sublime text3>Packages>OmniMarkupPreviewer>public>MD文件夹;
• 在sublime的.md文档后面, 添加如下两行:
  

为了方便开发,这里引入了OmniMarkupPreviewer>public里面的jquery.min.js, 我这的版本是2.1.3

<link rel='stylesheet' type='text/css' href='/public/MD/md.css'>
<script type='text/javascript' src='/public/MD/md.js'><script>
<script type='text/javascript' src='/public/jquery-2.1.3.min.js'><script>

• OK;