MarkdownPad2添加目录(输出为HTML时可用)

来源：互联网发布：守望先锋视频设置优化编辑：程序博客网时间：2024/06/05 09:17

平时看书的时候懒得上网写在线博客，就在电脑上用了很长时间的MarkDownPad2来记录自己的心得笔记，等那天高兴了再把他们贴出来。界面清爽，是我使用它最重要的原因，但是MarkdownPad2导出的HTML文件不能自动提取目录，手动添加有特别麻烦，这让我大为恼火。于是，经过一天的Google，百度。需要自定义Html模板，添加一段JS代码就可以了。网上找了一段代码，自己又修改了一点，添加了一些功能（点击收起或展开目录）不过前提是，你要激活MarkdownPad2的专业版。这里分享一个授权key

邮箱地址： Soar360@live.com 授权秘钥： GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2M5SN6bnxn2kSE8qHqNY5QaaRxmO3YSMHxlv2EYpjdwLcPwfeTG7kUdnhKE0vVy4RidP6Y2wZ0q74f47fzsZo45JE2hfQBFi2O9Jldjp1mW8HUpTtLA2a5/sQytXJUQl/QKO0jUQY4pa5CCx20sV1ClOTZtAGngSOJtIOFXK599sBr5aIEFyH0K7H4BoNMiiDMnxt1rD8Vb/ikJdhGMMQr0R4B+L3nWU97eaVPTRKfWGDE8/eAgKzpGwrQQoDh+nzX1xoVQ8NAuH

授权过后就可以自定义Html模板了；就在 Tools→ Options → Advanced 中的Custom Html Head Content中，点击HTML head edit将下面的代码复制到弹出的框内即可

自己的代码

由于这段代码没有使用JQuery，很多方法开起来很累赘，但是如果另外引入JQuery文件的话，对于MarkdownPad来说就有点不太方便了，需要把JQuery文件放在需要导出的Html文件的同文件夹下。

<script type="text/javascript">  document.addEventListener("DOMContentLoaded", function() {    // 生成目录列表    var div1 = document.createElement("div");    div1.style.cssText = "clear:both";    var outline = document.createElement("div");    outline.setAttribute("id", "outline-list");    outline.style.cssText = "border:solid 1px #ccc; background:#eee; min-width:200px;padding:4px 10px;";    var ele_p = document.createElement("p");    ele_p.style.cssText = "text-align: left; margin: 0;";    outline.appendChild(ele_p);    var ele_span = document.createElement("span");    // ele_span.style.cssText = "float: left;";    var ele_text=document.createTextNode("目录");    ele_span.appendChild(ele_text);    var ele_a = document.createElement("a");    ele_a.appendChild(document.createTextNode("[+]"));    ele_a.setAttribute("href", "#");    ele_a.setAttribute("onclick", "javascript:return openct(this);");    ele_a.setAttribute("title", "点击打开目录");    ele_span.appendChild(ele_a);    ele_p.appendChild(ele_span);    var ele_ol = document.createElement("ol");    ele_ol.style.cssText = "display:none;margin-left:14px;padding-left:14px;line-height:160%;";    ele_ol.setAttribute("id", "outline_ol");    outline.appendChild(ele_ol);    var div1 = document.createElement("div");    div1.style.cssText = "clear:both";    document.body.insertBefore(outline, document.body.childNodes[0]);    // 获取所有标题    var headers = document.querySelectorAll('h1,h2,h3,h4,h5,h6');    if (headers.length < 2)      return;    // -----    var old_h = 0, ol_cnt = 0;    // -----    for (var i = 0; i < headers.length; i++) {      var ele_ols = null;      var ele_Current = ele_ol;      // 找出它是H几，为后面前置空格准备      var header = headers[i];      header.setAttribute("id", "t" + i + header.tagName);      var h = parseInt(header.tagName.substr(1), 10);      // -----      if (!old_h){        old_h = h;      }      if (h > old_h) {        ele_ols = document.createElement("ol");        ele_Current = ele_ol;        if(ele_Current && ol_cnt > 0){          var temp = ol_cnt;          while(temp > 0){            ele_Current = ele_Current.lastChild;            temp--;          }        }        ele_Current.lastChild.appendChild(ele_ols);        ol_cnt++;      } else if (h < old_h && ol_cnt > 0) {        if (h == 1) {          while (ol_cnt > 0) {            ol_cnt--;          }        } else {          ele_ols = document.createElement("ol");          ele_Current = ele_ol;          if(ele_Current && ol_cnt > 0){            var temp = ol_cnt;            while(temp > 1){              ele_Current = ele_Current.lastChild;              temp--;            }          }        // var ele_Parent = ele_Current.parentNode();        //ele_Current.appendChild(ele_ols);        ol_cnt--;        }      } else if (h == old_h && ol_cnt > 0) {        ele_Current = ele_ol;        if(ele_Current && ol_cnt > 0){          var temp = ol_cnt;          while(temp > 0){            ele_Current = ele_Current.lastChild;            temp--;          }        }        ele_Current = ele_Current.lastChild;      }      if (h == 1) {        while (ol_cnt > 0) {          ol_cnt--;        }      }      if (h < old_h && ol_cnt > 0 && h != 1){        ele_li = document.createElement("li")        ele_Current.lastChild.appendChild(ele_li);        old_h = h;        var a = document.createElement("a");        // 为目录项设置链接        a.setAttribute("href", "#t" + i + header.tagName);        // 目录项文本前面放置对应的空格        a.innerHTML = header.textContent;        ele_li.appendChild(a);        continue;      }      old_h = h;      // -----      if (ele_ols){        ele_li = document.createElement("li")        ele_ols.appendChild(ele_li);       } else {        ele_li = document.createElement("li")        ele_Current.appendChild(ele_li);      }      var a = document.createElement("a");      // 为目录项设置链接      a.setAttribute("href", "#t" + i + header.tagName);      // 目录项文本前面放置对应的空格      a.innerHTML = header.textContent;      ele_li.appendChild(a);    }    // -----    while (ol_cnt > 0) {      ol_cnt--;    }    // -----    });function openct(e) {  if (e.innerHTML == '[+]') {    // createTextNode    e.setAttribute('title', '收起');    e.innerHTML = '[-]';    var element = document.getElementById("outline_ol");    element.style.cssText = "margin-left:14px;padding-left:14px;line-height:160%;";  } else {    e.setAttribute('title', '展开');    e.innerHTML = '[+]';    var element = document.getElementById("outline_ol");    element.style.cssText = "display:none;margin-left:14px;padding-left:14px;line-height:160%;";  }  e.blur();  return false;}</script>

原文件
到处为Html文件后效果图
本人JS功底不是太好，其中代码不免有不足、多余之处，望大神们指出，大家共同进步
JS代码下载地址：JS代码下载地址
参考博文

0 0