html转换markdownpad,为MarkdownPad2的HTML输出也增加目录

越来越喜欢Markdown了，清爽的写作让人欲罢不能。说白了哇，程序员都是懒货，所有能让自己偷懒的发明都是好发明，现在流行的语言、工具，其本质，都是可以让程序员偷懒的产物。比如脚本语言，可以10行代替编译语言的100行，至于速度，反正现在计算机快的很；比如IDE，只要点点鼠标，所有的编译连接调试都能迅速完成，当然会风靡全球。Markdown也是应懒汉需求发明的伟大作品，可以用一点点无伤大雅的符号，代替繁杂的

，

有很多免费的Markdown写作工具，在线的也非常多，不过大多是国外的，国内的网络环境实在让人心疼。当然也有离线的，借助node-webkit，好多不错的工具应运而生，但我试用下来，还是MarkdownPad2比较好使，可惜不是免费的，好在不注册也能用，功能也足够。我喜欢它的导出HTML和PDF的功能，PDF导出是很多免费工具所不具备的，而且MarkdownPad2导出PDF的时候可以选择导出大纲，就是PDF的目录啦，导航非常方便，本质上来说，也就是把h1,h2,h3…之类的文字提取出来，用过Wiki系统的话，应该很熟悉。

可惜，MarkdownPad2导出的HTML文件无法自动自动提取目录，习惯了wiki系统的自动目录功能，总赶脚少了点什么，一个文档写的比较长的话，查找还是颇为不便的。我到官网上找了一下，貌似没人关心着个功能？不过有人问输出的HTML文件是否能够定制模板，作者回答说，MarkdownPad2刚刚出来的时候带了这功能的，但是他后来发现很多人仅仅是需要定制html的head部分就可以了，所以他把功能简化了，就在 选项 → 高级 → 自定义HTML Head 中…… 既然他提供了这个功能，确实也够了，我写了个js脚本，把这个脚本名字包含在head中，就像这样

然后把这个js文件放在html的生成目录中，就能自动生成目录啦~~ 虽然比较难看……另外也可以直接写在

我用了比较偷懒的目录显示方式，比较好的是用列表嵌套列表形成层级的，不过实现起来略发明，于是我偷懒用空格的方式了…… 反正看起来也差不多，然后我这个脚本只支持现代浏览器，如果你想在IE8以及之前的浏览器中使用，那是没有任何效果的，不过，这和我又有什么关系呢？ 🙂

document.addEventListener("DOMContentLoaded", function() {

// 生成目录列表

var outline = document.createElement("ul");

outline.setAttribute("id", "outline-list");

outline.style.cssText = "border: 1px solid #ccc;";

document.body.insertBefore(outline, document.body.childNodes[0]);

// 获取所有标题

var headers = document.querySelectorAll('h1,h2,h3,h4,h5,h6');

for (var i = 0; i < headers.length; i++) {

var header = headers[i];

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 * 4).join(' ') + header.textContent;

outline.lastChild.appendChild(a);

}

});

// 类似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;

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

document.addEventListener("DOMContentLoaded",function(){

// 生成目录列表

varoutline=document.createElement("ul");

outline.setAttribute("id","outline-list");

outline.style.cssText="border: 1px solid #ccc;";

document.body.insertBefore(outline,document.body.childNodes[0]);

// 获取所有标题

varheaders=document.querySelectorAll('h1,h2,h3,h4,h5,h6');

for(vari=0;i

varheader=headers[i];

varhash=_hashCode(header.textContent);

// MarkdownPad2无法为中文header正确生成id，这里生成一个

header.setAttribute("id",header.tagName+hash);

// 找出它是H几，为后面前置空格准备

varprefix=parseInt(header.tagName.replace('H',''),10);

outline.appendChild(document.createElement("li"));

vara=document.createElement("a");

// 为目录项设置链接

a.setAttribute("href","#"+header.tagName+hash)

// 目录项文本前面放置对应的空格

a.innerHTML=newArray(prefix *4).join(' ')+header.textContent;

outline.lastChild.appendChild(a);

}

});

// 类似Java的hash生成方式，为一段文字生成一段基本不会重复的数字

function_hashCode(txt){

varhash=0;

if(txt.length==0)returnhash;

for(i=0;i

char=txt.charCodeAt(i);

hash=((hash<<5)-hash)+char;

hash=hash&hash;// Convert to 32bit integer

}

returnhash;

}

估计很小众，不会有什么人会用到。不过现在自己很看得开了，没准有人需要呢？或者没准有人需要里面的代码片段呢？还是拿出来凑凑篇数吧~~