markdownpad2:输出Html时自动生成目录TOC

用了挺长一段时间markdown编辑器，写文档挺方便，用得熟悉了，可是发现它没有TOC输出功能，有些不方便，网上找到很多文章，找到下面这篇文章，这篇文章中的脚本实现了markdownpad输出html时自动加上目录的功能,javascript脚本写得也简优雅，但美中不足就是没有在目录中加上标题编号(1.1,1.2….)

《为MarkdownPad2的HTML输出也增长目录》

参考这篇文章的代码，本身作了些简化修改，在输出目录的同时为标题加上标号，知足个人使用：

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
    // 生成目录列表
    var toc = document.createElement("ul");
    toc.setAttribute("id", "table-of-content");
    toc.style.cssText = "border: 1px solid #ccc;";
    document.body.insertBefore(toc, document.body.childNodes[0]);
    // 用于计算当前标题层级的栈,先进先出,从左到右每个元素表明当前标题所在的层级索引，初始为空
    var stack = new Array();
    // 获取全部标题
    var headers = document.querySelectorAll('h1,h2,h3,h4,h5,h6');
    for (var i = 0; i < headers.length; i++) {
        var header = headers[i];
        // 计算标题级数，为后面计算标号及缩进空格准备
        var level = parseInt(header.tagName.replace('H', ''), 10);
        // 经过两个where循环对栈进行调整,确保stack中标题级数与当前标题级数相同
        while(stack.length < level){
            stack.push(0);
        }
        while(stack.length > level){
            stack.pop();
        }
        // 最小一级标题标号步进+1
        stack[stack.length-1]++;
        // 生成标题标号( 1.1,1.2.. )
        var index = stack.join(".")
        // 生成标题ID
        var id = "title" + index;
        header.setAttribute("id", id);
        // 为标题加上标号,若是不但愿显示标号，把下面这行注释就能够了
        header.textContent = index + " " + header.textContent;
        toc.appendChild(document.createElement("li"));
        var a = document.createElement("a");
        // 为目录项设置连接
        a.setAttribute("href", "#" + id)
        // 目录项文本前面放置缩进空格
        a.innerHTML = new Array(level * 4).join('&nbsp;') + header.textContent;
        toc.lastChild.appendChild(a);
    }
});
</script>

javascript代码下载

javascript代码片断下载地址：
https://gitee.com/l0km/codes/j5pobwnumrdi14xseqa6c67

将上面的代码加入选项/高级/自定义HTML header便可，以下图

示例文件：

生成的html效果：

若是但愿h1做为主标题，不列入目录，则上面的代码要作一点改动

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
    // 生成目录列表
    var toc = document.createElement("ul");
    toc.setAttribute("id", "table-of-content");
    toc.style.cssText = "border: 1px solid #ccc;";
    document.body.insertBefore(toc, document.body.childNodes[0]);
    // 用于计算当前标题层级的栈,先进先出,从左到右每个元素表明当前标题所在的层级索引，初始为空
    var stack = new Array();
    // 获取全部标题(h2-h6),h1做为主标题,h2为一级标题
    var headers = document.querySelectorAll('h2,h3,h4,h5,h6');
    for (var i = 0; i < headers.length; i++) {
        var header = headers[i];
        // 计算标题级数，为后面计算标号及缩进空格准备
        var level = parseInt(header.tagName.replace('H', ''), 10)-1;
        // 经过两个where循环对栈进行调整,确保stack中标题级数与当前标题级数相同
        while(stack.length < level){
            stack.push(0);
        }
        while(stack.length > level){
            stack.pop();
        }
        // 最小一级标题标号步进+1
        stack[stack.length-1]++;
        // 生成标题标号( 1.1,1.2.. )
        var index = stack.join(".")
        // 生成标题ID
        var id = "title" + index;
        header.setAttribute("id", id);
        // 为标题加上标号,若是不但愿显示标号，把下面这行注释就能够了
        header.textContent = index + " " + header.textContent;
        toc.appendChild(document.createElement("li"));
        var a = document.createElement("a");
        // 为目录项设置连接
        a.setAttribute("href", "#" + id)
        // 目录项文本前面放置缩进空格
        a.innerHTML = new Array(level * 4).join('&nbsp;') + header.textContent;
        toc.lastChild.appendChild(a);
    }
});
</script>