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. Can not issue data manipulation statements with executeQuery()错误解决

    转: Can not issue data manipulation statements with executeQuery()错误解决 2012年03月27日 15:47:52 katalya 阅 ...

  2. Hibernate3 多对多关系

    学习hibernate的笔迹第三篇,主要内容:多对多关系, 检索策略,HQL查询,QBC,事物管理,c3p0配置 1.1.1  Hibernate的关联关系映射:(多对多) 1.1.1.1     多 ...

  3. GUI 设计

    GUI(图形化界面编程) Graphical  User  Interface (java.Awt    javax.Swing) CLI(命令行操作接口) Command  line  User   ...

  4. Day28--Python--网络通信协议 tcp与udp下的socket

    昨日内容回顾: 1. CS架构 服务端客户端架构 软件CS架构: 京东,淘宝,QQ,微信,暴风影音,快播 硬件CS架构: 打印机 服务端: 提供服务的 客户端: 享受服务的 BS架构: 浏览器和服务端 ...

  5. gradle 的jar下载到哪里了

    很好奇 gradle 的jar下载到哪里了,好顿翻,原来在C:\Users\(你的用户名)\.gradle\caches\modules-2\files-2.1目录下,使用gradle引用lib会先查 ...

  6. 最短路经算法简介(Dijkstra算法，A*算法，D*算法)

    据 Drew 所知最短路经算法现在重要的应用有计算机网络路由算法,机器人探路,交通路线导航,人工智能,游戏设计等等.美国火星探测器核心的寻路算法就是采用的D*(D Star)算法. 最短路经计算分静态 ...

  7. Hadoop生态圈-单点登录框架之CAS（Central Authentication Service）部署

    Hadoop生态圈-单点登录框架之CAS(Central Authentication Service)部署 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.CAS简介 CAS( ...

  8. Hadoop生态圈-Ranger数据安全管理框架

    Hadoop生态圈-Ranger数据安全管理框架 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Ranger简介 Apache Ranger是一款被设计成全面掌握Hadoop生 ...

  9. Dubbo简易控制中心安装

    1. zookeeper安装(单机版):http://www.cnblogs.com/wangfajun/p/5251159.html  √ 2. dubbo管控台安装(zookeeper单机版):h ...

  10. Spark源码剖析 - 任务提交与执行

    1. 任务概述 任务提交与执行过程: 1) build operator DAG:此阶段主要完成RDD的转换及DAG的构建: 2) split graph into stages of tasks:此 ...