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

10km

发布于 2019-05-25 22:25:16

1.7K0

发布于 2019-05-25 22:25:16

用了挺长一段时间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>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017年12月30日，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript