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. 文献笔记：Genome-wide associations for birth weight and correlations with adult disease

    该文献纳入了EGG(Early Growth Genetics Consortium)和UK biobank两大数据库,分为欧洲祖先和非欧洲祖先群体.这两个数据用到的样本量分别如下: Early Gr ...

  2. 初始redis数据库

    redis就是一个类似于存储在内存中的大字典 安装: windows下安装redis: 你需要在你的环境下安装: pip install redis 以上是在你的全局环境安装, 你如果用的是虚拟环境你 ...

  3. Eclipse搭建SpringBoot之HelloWorld

    你的eclipse需要先安装 Spring Tool Suite™ 第一种方法(不建议,之所以贴上是因为探索的过程) 首先新建Maven工程 勾选第一个按钮,第三个是选择working set ,你可 ...

  4. selenium官方网站文档，testng官方网站文档

    selenium 阅读至grid部分,当前没有远程需求,搁置:https://www.seleniumhq.org/docs/07_selenium_grid.jsp testng http://te ...

  5. Luogu P1552 [APIO2012]派遣 主席树

    题目链接 Click Here 这个题好像大多数人用的都是左偏树啊?这里我来贡献一发主席树的解法. 把题目中的问题抽象出来,其实就是询问每一个点的子树中,工资前\(tot_i\)大的点,使它们的和满足 ...

  6. Linux系统中/etc/rc.local和/etc/rc.d/rc.local的区别

    /etc/rc.d/rc.local 用于添加开机启动命令 /etc/rc.local是/etc/rc.d/rc.local的软连接

  7. golang 使用os/exec配合context实现的超时机制

    在使用golang开发中,调用外部可执行程序通过exec包是我们常用的方式.如何控制超时请见如下样例: var ( Timeout = 3 * time.Second ) func Command(n ...

  8. MySQL5.7 的GTID复制

    MySQL5.7 的GTID复制 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 在MySQL5.6之后其官方推出了GTID复制方式,和传统的基于bin log复制方式有所不同,接 ...

  9. JDK记录-JVM原理与调优（转载）

    转载自<https://www.cnblogs.com/andy-zhou/p/5327288.html> 一.什么是JVM JVM是Java Virtual Machine(Java虚拟 ...

  10. THE DEFINITIVE GUIDE TO DEBUGGING JAVASCRIPT

    FIGURING OUT WHERE THE ERROR COULD BE READ THE CODE USING THE CONSOLE THE CHROME DEV TOOLS THE DEBUG ...