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. Ubuntu寻找某某库

    感觉这个方法很有用,记录一下 ubuntu14.04的error while loading shared libraries: libz.so.1问题 我们怎么这知道 libz.so.1在哪个包? ...

  2. 漫谈php框架之中间件

    市面上常见的php框架有很多,最近因为有技术需求,所以对常见的php框架的中间件进行了一些了解.各个框架尽管在目标上对php框架的定义大同小异,但是在实现方式上却各有不同,且看下文: 定义 首先什么是 ...

  3. tcping 与 telnet命令粗略使用

        使用tcping命令,在网上下载tcping文件,放入c盘的system32目录下,即可使用 使用tcping命令用来ping某个端口,能通的话,说明从外部到端口是没有问题的 使用telnet ...

  4. 解析：为什么设计师选择mac电脑居多？

    mac电脑的使用者中程序员和设计师居多,上篇文章说明了程序员选择mac的原因以及使用体验,这次,本文说明一下,设计师选择mac的原因. 解析:为什么程序员应该有一台Mac个人电脑? 1.外观. 设计师 ...

  5. Compiling R-3.4.3 on CentOS 6.10 with GNU

    If you are compiling CentOS 6, you will notice that the R source will not compile without a updated ...

  6. 第04篇 JDK版本导致Unsupported major.minor version 52.0 error

    一直以来,想改变一些自己早已经习惯的事情. 感谢吕希德同学,让我又解决了一个问题! 出现问题原因-->>分析 { JDK版本不一致的问题 } 在eclipse中开发的项目有个Java bu ...

  7. MySql 游标笔记

    delimiter &&create PROCEDURE findProjectDetailsByProjectId(in p_userId int)BEGIN   DECLARE d ...

  8. Sql Server 游标例子笔记

    create PROCEDURE total_mySaleDuty as BEGIN DECLARE @a int,@error int DECLARE @b int,@errorb int DECL ...

  9. Hadoop记录-监控几个思路

    1.存活监控 基本监控,主要对进程的存活.端口连通性.url可检测性等指标进行监控. 2.2 可用性监控 主要指对用户而言是否可用,能否返回预期结果,通常部署在一些业务主流程或一些关键环节,如接口调用 ...

  10. Hadoop记录-Ganglia监控HDFS和HBase指标说明

    HDFS相关 datanode相关 参数 解释 dfs.datanode.blockChecksumOp_avg_time 块校验平均时间 dfs.datanode.blockChecksumOp_n ...