MarkdownPad2添加目录(输出为HTML时可用)
平时看书的时候懒得上网写在线博客,就在电脑上用了很长时间的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>
MarkdownPad2添加目录(输出为HTML时可用)的更多相关文章
- Asp.net 4.0,首次请求目录下的文件时响应很慢
原文:Asp.net 4.0,首次请求目录下的文件时响应很慢 1. 问题起因2. 尝试过的处理思路3. 解决方法 1. 问题起因 一个从VS2003(.Net Framework 1.1)升级到.ne ...
- Linux添加目录到环境变量以及添加sublime到环境变量
博主之前有过这种情况,就是在普通用户下su ls等命令还有效,可登陆进root用户之后这些常用的命令竟然失效了. 像这样 这问题其实很简单,但是对于不清楚环境变量的配置的同学来说也的确棘手,我之前就是 ...
- memcached添加日志输出
引子:qa的memcached总是隔一段时间挂掉,导致qa进不去.决定查一下原因,于是添加日志输出,等下次出错便于查阅.定位问题. memcache默认没有日志输出.如果想把memecache服务日志 ...
- spark中的多目录输出及压缩
最近接到一个需求,需要对spark的结果分目录输出,百度之后找到了解决方案,大多都是spark 按照key分目录输出, 但是在文件当中,会把key也输出出来,在这里以key作为目录是想建hive表时把 ...
- Linux添加目录到环境变量以及添加Sublime Text到环境变量
本文主要介绍了Linux添加目录到环境变量以及添加Sublime Text到环境变量,通过具体的解释说明,让我们从中学到Linux添加目录到环境变量以及添加Sublime Text到环境变量的精髓所在 ...
- Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World。
系列目录 1.Taurus.MVC WebAPI 入门开发教程1:框架下载环境配置与运行. 2.Taurus.MVC WebAPI 入门开发教程2:添加控制器输出Hello World. 3.Tau ...
- vs212创建mvc3项目,添加ADO.NET实体数据模型时产生 XXXX.Desiger.cs 文件为空
vs212创建mvc3项目,发现添加ADO.NET实体数据模型时,产生StoreDB.Desiger.cs文件为空 产生StoreDB.Desiger.cs文件为空 原因是,在vs2012中,添加AD ...
- H面试程序(1)编写一个函数,要求输入年月日时分秒,输出该年月日时分秒的 下一秒
编写一个函数,要求输入年月日时分秒,输出该年月日时分秒的下一秒. 如输入 2004 年 12 月 31 日 23 时 59 分 59 秒,则输出 2005年 1 月 1 日 0 时 0 分 0 秒. ...
- php遍历目录输出目录及其下的所有图片文件
在做网站的时候,需要给文章内所有的图片添加上logo,如何利用ThinkPHP来实现. ThinkPHP为我们很好的提供了图像处理类,给文章中的所有图片加上水印的思路,上传的图片文件都保存在一个文件夹 ...
随机推荐
- 跟我一起玩转FineUI之嵌套表格
最近一直在研究FineUI(http://www.fineui.com/),那么什么是FineUI呢,FineUI是基于 ExtJS 的专业 ASP.NET 控件库.创建 No JavaScript, ...
- 配置Rip的认证
实验拓扑图 PS:我做实验使用的是DynamipsDUI模拟器,并且加载的是真实的ios镜像(c3745-advipservicesk9-mz.124-3c.bin) 1. 配置路由器R1 2. ...
- html5的自定义data-*属性和jquery的data()方法的使用示例
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它 ...
- UI3_CustomUITableViewCell
// AppDelegate.m // UI3_CustomUITableViewCell // // Created by zhangxueming on 15/7/15. // Copyright ...
- python:笔记for循环中的else
我们常常会在for循环遍历一个序列或者字典后,接着语句else,很多新手会误以为是判断执行else后面的 代码,其实不然,for循环里面也不存在判断,而已执行完遍历的对象后,再执行else后面的代码. ...
- (转)一网打尽当下NoSQL类型、适用场景及使用公司
摘要:对比传统关系型数据库,NoSQL有着更为复杂的分类——键值.面向文档.列存储以及图数据库.这里就带你一览NoSQL各种类型的适用场景及一些知名公司的方案选择. 在过去几年,关系型数据库一直是数据 ...
- 10 个超酷的 HTML5/CSS3 应用及源码
1.CSS3密码强度验证表单,码速表样式 我们在网站上注册会员时,输入一个强大较大的密码会大大增加帐号安全性,那么什么样的密码才比较安全呢?这款CSS3密码强度验证表单插件可以提示你当前输入密码的安全 ...
- Ant打jar包指定MainClass
一般用ant打jar的时候不用指定程序的入口!这个jar一般是给其他app引用的. 但是如果该jar就是程序的启动jar.例如: java -jar abc.jar 这个时候需要指定jar的入口类! ...
- poj 3669 Meteor Shower
Me ...
- 4_1 wp8数据绑定与独立存储空间[wp8特色开发与编程技巧]
Wp8数据绑定与独立存储空间 数据绑定为基于 Silverlight 的应用程序提供了一种显示数据并与数据进行交互的简便方法. 数据的显示方式独立于数据的管理. UI 和数据对象之间的连接或绑定使数据 ...