Markdown pad导出html 带目录

原创 2017年01月03日 22:33:47

在工具-选项-高级-html head编辑器中加入如下代码

方式一

<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>

方式二

 
 
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://yandex.st/highlightjs/6.2/highlight.min.js"></script>
 
<script>hljs.initHighlightingOnLoad();</script>
<script type="text/javascript">
 $(document).ready(function(){
      $("h2,h3,h4,h5,h6").each(function(i,item){
        var tag = $(item).get(0).localName;
        $(item).attr("id","wow"+i);
        $("#category").append('<a class="new'+tag+'" href="#wow'+i+'">'+$(this).text()+'</a></br>');
        $(".newh2").css("margin-left",0);
        $(".newh3").css("margin-left",20);
        $(".newh4").css("margin-left",40);
        $(".newh5").css("margin-left",60);
        $(".newh6").css("margin-left",80);
      });
 });
</script>
<a href="javascript:scroll(0,0)" style="position:fixed;float:right;right:32px;top:30%">返回顶部</a> 
<div id="category"></div>





使用markdownpad生成目录

在html head中加入如下代码 document.addEventListener("DOMContentLoaded", function() { // 生成目录列表 ...
  • qfhyadx
  • qfhyadx
  • 2016年11月23日 17:59
  • 2349

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

平时看书的时候懒得上网写在线博客,就在电脑上用了很长时间的MarkDownPad2来记录自己的心得笔记,等那天高兴了再把他们贴出来。界面清爽,是我使用它最重要的原因,但是MarkdownPad2导出的...
  • chengjierui
  • chengjierui
  • 2016年03月29日 22:59
  • 3875

生成带有目录的Markdown格式文档

什么是MarkdownMarkdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。使用 Markdown 的优点 专注你的文字内容而不是排版样式。 轻松的...
  • uxyheaven
  • uxyheaven
  • 2015年10月19日 19:24
  • 31952

有道云笔记下MarkDown使用

继有道云协作率先支持markdown语法之后,令人振奋的markdown编辑功能现已在web版有道云笔记优雅上线,移动端也已支持预览! 不要着急,PC客户端也将随后支持markdown的编辑预览...
  • X1164077611
  • X1164077611
  • 2016年05月22日 23:38
  • 5839

markdown自动生成侧边栏目录/TOC

markdown自动生成侧边栏TOC /目录 声明: 本模板是对开源项目 i5ting-i5ting_ztree_toc-0.3.0-11 的精简,主要是针对Windows下无法安装项目作者给出的软件...
  • HaleyPKU
  • HaleyPKU
  • 2016年04月23日 15:55
  • 12618

art pandoc转换markdown文档为带目录的HTML文档

outpandoc –tocinman pandoc /toc –toc, –table-of-contentsalgcat 1.md#1 ##1 111pandoc --toc -f markd...
  • csdnmonkey
  • csdnmonkey
  • 2017年02月22日 22:06
  • 953

使用Pandoc命令将Markdown格式文件转换为HTML格式文件

一、Pandoc命令介绍 Pandoc是一个强大的格式语言转换工具,被称为该领域的“瑞士军刀”。比如可用Pandoc命令将Markdown格式文件转换成Html格式文件。 二、具体转换命令 ...
  • DSLZTX
  • DSLZTX
  • 2016年05月06日 21:17
  • 2513

Markdown生成左边框目录

自从接触了Markdown后就一直用这种语言写学习笔记。 但是一直在纠结如何生成方便的目录。 下面是我搞得一个简单的模板可以生成固定在屏幕左边的目录。 就是这种第一步,编辑器首先,需要一个可以自...
  • zjiang1994
  • zjiang1994
  • 2016年08月19日 14:13
  • 6569

markdownpad2生成目录

生成目录一document.addEventListener(“DOMContentLoaded”, function() { // 生成目录列表 var outline = do...
  • Liveor_Die
  • Liveor_Die
  • 2017年08月13日 15:06
  • 463

使用Markdown设置文档样式,生成html文件

Markdown简单使用总结,使用Markdown设置文档样式
  • xiaonadiandian
  • xiaonadiandian
  • 2016年07月05日 17:39
  • 2207
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Markdown pad导出html 带目录
举报原因:
原因补充:

(最多只允许输入30个字)