markdown pad 2 导出html 自定义目录

程序员使用markdown进行编写api或其他文档，是常用的事。
在windows上markdown客户端工具“markdown pad2“应该是首选了，功能比较完善，但在导出文档为HTML时，工具确不支持目录导出。
还好此工具为我们提供了自定义Html样式操作(也就是在生成的HTML文档的Head中添加自定义代码)，可以利用这一点进行导出自己想要的目录。

添加自定义HTML样式操作如下：

• 步骤一
  
• 步骤二
  

自定义代码如下：

<style>
        .tocDiv {
            position: fixed;
            width: 28%;
            float: left;
            margin-right: 2%;
            min-width: 267px;
            background-color:#ffffff;
        }
        
        .tocDiv ul {
            list-style: none;
            border: 1px solid rgb(204, 204, 204);
            padding-left: 0px;
        }
        
        .tocDiv ul li {
            line-height: 30px;
        }
        
        .tocDiv ul a {
            text-decoration: none;
        }
        
        .tocDiv ul a:hover {
            text-decoration: none;
            color: red;
        }
        
        body {
            max-width: 100% !important;
            min-width: 960px !important;
        }
        
        .contentDiv {
            width: 70%;
            float: right;
        }
    </style>
    <script>
        // 类似Java的hash生成方式，为一段文字生成一段基本不会重复的数字
        function _hashCode(txt) {
            var hash = 0;
            if (txt.length == 0) return hash;
            for (i = 0; i < txt.length; i++) {
                char = txt.charCodeAt(i);
                hash = ((hash << 5) - hash) + char;
                hash = hash & hash; // Convert to 32bit integer
            }
            return hash;
        }

        function buildToc() {
            var outline = document.createElement("ul");
            outline.setAttribute("id", "outline-list");
            outline.style.cssText = "border: 1px solid #ccc;";
            var headers = document.querySelectorAll('h1,h2,h3,h4,h5,h6');
            for (var i = 0; i < headers.length; i++) {
                var header = headers[i];
                if (i == 0) {
                    window.document.title = header.textContent;
                }
                var hash = _hashCode(header.textContent);
                // MarkdownPad2无法为中文header正确生成id，这里生成一个
                header.setAttribute("id", header.tagName + hash);
                // 找出它是H几，为后面前置空格准备
                var prefix = parseInt(header.tagName.replace('H', ''), 10);
                outline.appendChild(document.createElement("li"));
                var a = document.createElement("a");
                // 为目录项设置链接
                a.setAttribute("href", "#" + header.tagName + hash)
                    // 目录项文本前面放置对应的空格
                a.innerHTML = new Array(prefix * 3).join('&nbsp;') + header.textContent;
                outline.lastChild.appendChild(a);
            }
            return outline;
        }
        window.onload = function() {
            var tocUl = buildToc();
            var bodyTag = document.getElementsByTagName('body')[0];
            var bodyTagHtml = bodyTag.innerHTML;
            var tocDiv = document.createElement('div');
            tocDiv.className = 'tocDiv';
            tocDiv.appendChild(tocUl);
            var contentDiv = document.createElement('div');
            contentDiv.className = 'contentDiv';
            contentDiv.innerHTML = bodyTagHtml;
            bodyTag.innerHTML = '';
            bodyTag.appendChild(tocDiv);
            bodyTag.appendChild(contentDiv);
        }
    </script>
    

最终目录效果（未截全）：

赏

谢谢你请我吃糖果

支付宝