http://blog.csdn.net/haleypku/article/details/51226704 此文可以只了解一下概念；

http://i5ting.github.io/i5ting_ztree_toc/ 此文说有 引用的文件；

《\jQuery精品教程视频\jQuery精品教程资料\19-jQuery第一天\01-教学资料\笔记\preview\template.html》

<html>

  <head>

      <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>{{title}}</title>

        <link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css"/>

        <link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css"/>

        <link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css"/>

      <style>

        pre {

            counter-reset: line-numbering;

            border: solid 1px #d9d9d9;

            border-radius: 0;

            background: #fff;

            padding: 0;

            line-height: 23px;

            margin-bottom: 30px;

            white-space: pre;

            overflow-x: auto;

            word-break: inherit;

            word-wrap: inherit;

        }

        pre a::before {

          content: counter(line-numbering);

          counter-increment: line-numbering;

          padding-right: 1em; /* space after numbers */

          width: 25px;

          text-align: right;

          opacity: 0.7;

          display: inline-block;

          color: #aaa;

          background: #eee;

          margin-right: 16px;

          padding: 2px 10px;

          font-size: 13px;

          -webkit-touch-callout: none;

          -webkit-user-select: none;

          -khtml-user-select: none;

          -moz-user-select: none;

          -ms-user-select: none;

          user-select: none;

        }

        pre a:first-of-type::before {

          padding-top: 10px;

        }

        pre a:last-of-type::before {

          padding-bottom: 10px;

        }

        pre a:only-of-type::before {

          padding: 10px;

        }

        .highlight { background-color: #ffffcc } /* RIGHT */

        </style>

  </head>

  <body>

      <div>

                <div style='width:25%;'>

                        <ul id="tree" class="ztree" style='width:100%'>

                        </ul>

                </div>

        <div id='readme' style='width:70%;margin-left:20%;'>

              <article class='markdown-body'>

                {{{parse_markdown}}}//此处替换你的文章

              </article>

        </div>

        </div>

  </body>

</html>

<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script>

<script type="text/javascript" src="toc/js/ztree_toc.js"></script>

<script type="text/javascript" src="toc_conf.js"></script>

<SCRIPT type="text/javascript" >

<!--

$(document).ready(function(){

    var css_conf = eval(markdown_panel_style);

    $('#readme').css(css_conf)

    var conf = eval(jquery_ztree_toc_opts);

        $('#tree').ztree_toc(conf);

});

//-->

</SCRIPT>

引入3个文件：

<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script>

<script type="text/javascript" src="toc/js/ztree_toc.js"></script>
自己定义的一个js  toc_conf.js
var jquery_ztree_toc_opts = {

    debug:false,

    is_auto_number:true,

    documment_selector:'.markdown-body',

    ztreeStyle: {

        width:'326px',

        overflow: 'auto',

        position: 'fixed',

        'z-index': 2147483647,

        border: '0px none',

        left: '0px',

        top: '0px',

                // 'overflow-x': 'hidden',

                'height': $(window).height() + 'px'

    }

}

var markdown_panel_style = {

    'width':'70%',

    'margin-left':'25%'

};

toc_conf.js

会根据 h1 到h6 在左边生成 结构目录。举例：比如复制以下一段文字 代替{{{parse_markdown}}}就会看到效果：

<h1 id="jquery-">jQuery基本概念</h1>

<blockquote>

<p>学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。</p>

</blockquote>

<h2 id="-jquery-">为什么要学习jQuery？</h2>

<p>【01-让div显示与设置内容.html】</p>

<p>使用javascript开发过程中，有许多的缺点：</p>

<pre><code class="lang-javascript">1. 查找元素的方法太少，麻烦。

2. 遍历伪数组很麻烦，通常要嵌套一大堆的for循环。

3. 有兼容性问题。

4. 想要实现简单的动画效果，也很麻烦

5. 代码冗余。

</code></pre>

<h2 id="jquery-">jQuery初体验</h2>

<p>【02-让div显示与设置内容.html】</p>

测试文件

markdown自动生成侧边栏TOC /目录的更多相关文章

  1. Markdown 中的目录自动生成功能 TOC

    目录 Markdown 中的目录自动生成功能 TOC 1. 标题一 1.1 标题二 1.标题二 2. 标题一 2.1 标题二 2.2 标题二 Markdown 中的目录自动生成功能 TOC 1. 标题 ...

  2. Markdown自动生成目录

    Markdown自动生成目录 使用npm语法生成 1.安装npm 2.安装doctoc插件 3.执行生成 参考 Markdown自动生成目录 使用npm语法生成 1.安装npm 我的系统是deepin ...

  3. .net core编译时设置不自动生成“netcoreapp3.0”目录

    不知道出于什么目的,.netcore项目默认编译时生成的文件要多加一层"netcoreapp3.0"或"netcoreapp2.1",这应该不符合大多数开发者的 ...

  4. 清除 WD MyCloud 自动生成的 .wdmc 目录

    1. 先 SSH,停止相应服务 /etc/init.d/wdmcserverd stop/etc/init.d/wdphotodbmergerd stop 2. 禁止服务自启动 update-rc.d ...

  5. Markdown生成左边框目录

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

  6. 用jquery实现文章自动生成二级目录

    前段时间有个同学问有没有办法在博客园上发一篇文章然后自动生成文章的目录.之前不知道该怎么做这几天看了些jquery之后觉得还是容易的. 一级目录 一级目录的思路很简单,找出作为一级标题的元素,在某个地 ...

  7. Mybatis Generator代码自动生成（实体类、dao层、映射文件）

    写了一段时间增删改查有点厌烦,自己找了下网上的例子鼓捣了下自动生成. 首先得有一个配置文件: generatorConfig.xml <?xml version="1.0" ...

  8. 在VS中自动生成NuGet包以及搭建自己的或单位内部的NuGet服务器

    关于NuGet的介绍已经很多,可以参考下面的: NuGet学习笔记(1)--初识NuGet及快速安装使用 http://kb.cnblogs.com/page/143190/ NuGet学习笔记(2) ...

  9. 第 10 篇：小细节 Markdown 文章自动生成目录，提升阅读体验

    目录 在文中插入目录 在页面的任何地方插入目录 处理空目录 美化标题的锚点 URL 作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 上 ...

随机推荐

  1. mybatis 直接执行sql 【我】

    Connection conn = getConnection();//            Connection conn = this.ss.getConnection(); 返回Connect ...

  2. ngnix FastCGI解析漏洞

    漏洞描述: Nginx默认是以CGI的方式支持PHP解析的,普遍的做法是在Nginx配置文件中通过正则匹配设置SCRIPT_FILENAME.当访问http://192.168.1.103/phpin ...

  3. (贪心和优先队列) POJ1862 Stripies

    Stripies Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 21506   Accepted: 9478 Descrip ...

  4. JDBC工具类

    package com.shundong.uitl; import java.sql.Connection; import java.sql.DriverManager; import java.sq ...

  5. Storm中重要对象的生命周期

    Spout方法调用顺势 declareOutputFields()(调用一次) open() (调用一次) activate() (调用一次) nextTuple() (循环调用 ) deactiva ...

  6. CentOS上手工部署kubernetes集群

    本文完全是根据二进制部署kubernets集群的所有步骤,同时开启了集群的TLS安全认证. 环境说明 在下面的步骤中,我们将在三台CentOS系统的物理机上部署具有三个节点的kubernetes1.7 ...

  7. 7、JPA-映射-双向一对多

    一个用户对应多个订单,多个订单对应一个用户,不管查哪一边都可以得到另一边的信息 实体类 Customer package com.jpa.yingshe; import javax.persisten ...

  8. testlink for windows 安装

    testlink的使用说明可到官网查看:http://www.testlink.org.cn/509.html 一.安装xampp 到xampp官网中下载安装文件,按步骤安装即可. 二.Testlin ...

  9. net-snmp开发教程

    目录 1................................................................................................ ...

  10. Linux 内核里的数据结构：双向链表

    原文:https://blog.csdn.net/qq_33487044/article/details/78827260 双向链表 Linux 内核自己实现了双向链表,可以在 include/lin ...