
平时看书的时候懒得上网写在线博客,就在电脑上用了很长时间的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;
// 找出它是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");
var 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");
var ele_Current = ele_ol;
if(ele_Current && ol_cnt > 0){
var temp = ol_cnt;
while(temp > 1){
ele_Current = ele_Current.lastChild;
temp--;
}
}
ele_Current.appendChild(ele_ols);
ol_cnt--;
}
}
if (h == 1) {
while (ol_cnt > 0) {
ol_cnt--;
}
}
old_h = h;
// -----
if (ele_ols){
ele_li = document.createElement("li")
ele_ols.appendChild(ele_li);
} else {
ele_li = document.createElement("li")
ele_ol.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>