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

骑猪看日落 2022-06-02 02:13 517阅读 0赞

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

> [《为MarkdownPad2的HTML输出也增加目录》][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(' ') + header.textContent;
            toc.lastChild.appendChild(a);
        }
    });
    </script>

# javascript代码下载 #

> javascript代码片段下载地址：  
> [https://gitee.com/l0km/codes/j5pobwnumrdi14xseqa6c67][https_gitee.com_l0km_codes_j5pobwnumrdi14xseqa6c67]

将上面的代码加入`选项/高级/自定义HTML header`即可，如下图  
![这里写图片描述][SouthEast]

# 示例文件： #

![这里写图片描述][SouthEast 1]

# 生成的html效果： #

![这里写图片描述][SouthEast 2]

如果希望`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(' ') + header.textContent;
            toc.lastChild.appendChild(a);
        }
    });
    </script>

[MarkdownPad2_HTML]: http://eyehere.net/2014/add-html-outline-for-markdownpad2/
[https_gitee.com_l0km_codes_j5pobwnumrdi14xseqa6c67]: https://gitee.com/l0km/codes/j5pobwnumrdi14xseqa6c67
[SouthEast]: /images/20220602/5c7ba166d3734d57a42f10b17eb25bf0.png
[SouthEast 1]: /images/20220602/5b996f253bff4e73adb388fcf9c531f7.png
[SouthEast 2]: /images/20220602/ab8bdbe46a134f3c9999f084c7c0a991.png

发表评论取消回复

表情：

评论列表（有 0 条评论，517人围观）

还没有评论，来说两句吧...

相关阅读

相关 vscode自动生成markdown目录

1.安装插件 2.解决自动生成目录异常问题 3.鼠标指针放在第一行，右单击选择下图所示内容 1.安装插件 ![在这里插入图片描述][watermark

浅浅的花香味﹌/ 2023年10月11日 13:55/ 0 赞/ 53 阅读

相关 IDEA自动生成输出函数

IDEA自动生成输出函数 -------------------- 粗暴花里胡哨没有用！(Mr\_Chen说的耶稣也留不住你) > 如何像写一个`System.o

淩亂°似流年/ 2023年06月17日 12:58/ 0 赞/ 2 阅读

相关 tree：自动输出项目目录，快速生成README.md中的目录结构

输入命令安装tree yum -y install tree 输出结果 Loaded plugins: fastestmirror Det

偏执的太偏执、/ 2023年01月13日 04:18/ 0 赞/ 161 阅读

相关论文自动生成目录

写论文时自动生成目录这一步是必不可少的，下面我整理了一些生成目录的方法。以下图为例子： ![20161119200834891][] 方法一：（1）

落日映苍穹つ/ 2022年07月16日 13:52/ 0 赞/ 247 阅读

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

用了挺长一段时间markdown编辑器，写文档挺方便，用得熟悉了，但是发现它没有TOC输出功能，有些不方便，网上找到不少文章，找到下面这篇文章，这篇文章中的脚本实现了markd

骑猪看日落/ 2022年06月02日 02:13/ 0 赞/ 518 阅读

相关 i5ting_toc 是把markdown编译成带有toc目录的html的node模块

i5ting\_toc 是把markdown编译成带有toc目录的html的node模块 i5ting\_toc i5ting\_toc a node npm wrap

野性酷女/ 2022年05月22日 04:42/ 0 赞/ 186 阅读

相关 MarkdownPad2 导出带侧边栏目录的html，自动生成markdown文档侧边栏

MarkdownPad2 导出带侧边栏目录的html MarkdownPad2添加侧栏目录参考：[https://blog.csdn.net/zwx\_lucky/art

傷城~/ 2022年05月17日 03:19/ 0 赞/ 367 阅读

相关 csdn自动生成文章目录

自动生成文章目录 1，博文第一行写这一句代码`@[TOC](文章目录)` 2，使用井号标题记录一下这个小技巧，在博文头部自动生成目录。只需要两步： 1，博

客官°小女子只卖身不卖艺/ 2022年04月25日 09:14/ 0 赞/ 271 阅读

相关快速生成markdown目录TOC，页内跳转

最近总结了一篇很长的`webpck`的文档，但是太长的了，如果能有个页面内跳转的好了探索一番发现so easy! 先看成品 [webpack][] 首先先在你的项目内安装

超、凢脫俗/ 2022年01月20日 02:45/ 0 赞/ 367 阅读

相关 csdn自动生成目录

帮助文档直接粘贴出来就可以了,或者手输入也是可以的,注意下面的标题要用\打头即可 @[TOC](自定义标题) ![在这里插入图片描述][watermark_type

「爱情、让人受尽委屈。」/ 2021年09月21日 03:58/ 0 赞/ 409 阅读