markdownpad2生成目录

生成目录一

只需要把下面代码加到html head上就行
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;
}

生成目录二

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

时间: 2024-10-29 09:37:49

markdownpad2生成目录的相关文章

asp生成目录与无限生成多级目录创建

asp教程生成目录与无限生成多级目录创建 这里提供二款asp目录生成函数,第一款是只能创建一级目录,后一款函数可以支持多目录同时生成.   sub efolder(foldername) dim fso set fso=server.createobject("scripting.filesystemobject") if fso.folderexists(server.mappath(foldername)) then set fso=nothing exit sub else fs

写毕业论文的注意了:怎样自动生成目录及从任意页开

微软WORD这个软件大家都很熟悉,但有不少功能我们并没有用到,其中不乏非常实用的.今儿个我给大家介绍一下如何用WORD自动生成目录.这对那些用WORD写书,写论文的朋友很有帮助. 优点:用 WORD根据文章的章节自动生成目录不但快捷,而且阅读查找内容时也很方便,只是按住Ctrl点击目录中的某一章节就会直接跳转到该页,更重要的是便于今 后修改,因为写完的文章难免多次修改,增加或删减内容.倘若用手工给目录标页,中间内容一改,后面页码全要改是一件很让人头痛的事情.应该自动生成的目 录,你可以任意修改文

word2013自动生成目录怎么操作

  word2013自动生成目录怎么操作           第一步.打开文档之后,点击"插入"--"页码",然后按自己需求设置格式. word2013 第二步.选择"布局"-"分隔符"-"下一页",也就是要把前面空出一页. 第三步.再选择"视图"-"大纲视图". word2013 第四步.到这一步,我们再选定要作为一级目录的文字,再选择"一级目录"

word如何自动生成目录

在编辑文档的时候,目录有时是必不可少的一项,但在实际情况当中,很多使用者不知道怎样使用word中的目录自动生成的功能,而是自己在首页手动编制,结果常常因为后面格式或者字体的调整,使得目录与正文出现差距.因此用下面的方法能简单的生动生成: 步骤方法 下面就来介绍一下如何利用word自动生成目录并动态更新.这里介绍两种方法: 一.利用大纲级别自动生成目录 如果要插入目录,请单击"插入"菜单,指向"引用"→"索引和目录",出现"索引和目录&q

wps2016怎么生成目录?

  wps2016怎么生成目录?在上周中,由于工作需要,要为自己的doc文档添加目录,我使用了最新的wps来完成.下面就把wps如何自动生成目录的过程用图文形式记录下来. 1.首先,要做的是标题要规范.同一等级的标题,字体规范一样.比如在命名标题一.标题二的时候选择工具栏上的标题1规范. 2.同理,下一等级的子标题也要做到相同规范.如图,二级标题选择工具栏上的标题二.依次类推,有多级标题,就这么进行下去就可以了. 3.工具栏上的标题规范是有默认字体和大小的,如果想要自己设置标题字体和大小.如图,

word2016怎么生成目录

  word2016怎么生成目录         首先打开Word2016,然后新建一个文档,或者打开你的文档. 在添加目录之前我们还要先做一下下面的操作,选择要包括在目录中的文本,然后在"开始"选项卡上,单击一种标题样式,如"标题 1".这样做是为了让它们出现在目录上. 鼠标单击"引用">"目录",选择一种目录样式. 这时候就会在文档中出现一个目录. 刚刚我们是用的手动目录进行添加的,如果是用自动目录进行添加,那么一定

WPS自动生成目录的图文步骤

  很多在准备论文的网友,最头痛的除了论文的撰写之外,还有就是论文目录的编写.有时候论文内容再精彩,也可能因为论文目录编写得不好,被论文辅导老师退回来.那么,怎么生成论文目录呢?今天小编就为大家分享一下WPS自动生成目录的步骤,整个步骤还是有一定难度的,请大家仔细按照下面的步骤操作哦! 打开WPS文字,新建文档. WPS自动生成目录的步骤 在文档里面新建一级标题. 标题内容如下: 一.概论 输入完一级标题后,选中文字,在样式中点击"标题1",会变成如下样式. 后面输概论内容,此处概论为

word2013中怎么自动生成目录

  自动生成目录步骤如下: 步骤一:首先在word2013中输入一些文字,这些文字要有栏目有正文,方便你与实际工作中的情况做对比. 步骤二:如上图,我写了3个一级栏目,并且分好了哪是标题哪是正文.现在开始制作word2013的目录.首先要在当前页的前面加一个新的页面,来放目录.我们把光标放在文字的最前面. 步骤三:然后点击工具栏中的[插入],再点击[分页]. 步骤四:现在会在我们的文字前面多出来一个新的分页. 步骤五:接下来点击[视图]中的[大纲视图]. 步骤六:在大纲视图中,可以看到所有的栏目

word2013怎样使用大纲级别自动生成目录

  使用大纲级别自动生成目录的步骤如下: 步骤一:打开word2013文档,编辑正文的内容和需要作为目录的内容,然后选中作为标题的文字,点击右键,选择段落. 步骤二:在弹出的段落对话框中,选择设置[大纲级别]项内容为1级,然后点击确定按钮. 步骤三:然后,选中需要作为二级目录的文字内容,在段落对话框中设置[大纲级别]为2级. 步骤四:依次对文档的文字内容进行1级和2级设置,如果需要3级或者更多级别目录,都可以在段落对话框中进行设置. 步骤五:全部设置完成后,鼠标单击需要插入目录的位置,然后点击菜