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. Failed to read HTTP message: org.springframework.http.converter.HttpMessageNotReadableException: Required request body is missing: public xxxxxxxx.

    最近在使用 springBoot开发的时候, 使用PostMan访问接口,  返回一个 404 ,  后台报一个 warn : Failed to read HTTP message: org.spr ...

  2. struts2 UI标签 和 主题

    四.Struts2的UI标签和主题 1.Struts2中UI标签的优势 自动的数据回显和错误提示功能 自带的简单样式和排版 2.表单标签的通用属性 说明:UI标签中value的取值一般都是字符串. 2 ...

  3. C++ template一些体悟(2)

    class template的一般化设计之外,特别针对某些参数做特殊设计 #include <iostream> using namespace std; //一般设计 template& ...

  4. testng学习-before&after,parameters,并行，factory，beanshell,监听器，依赖注入

    一系列的before after的操作测试 [TestNG] Running: C:\Users\user\AppData\Local\Temp\testng-eclipse-1538841744\t ...

  5. java参数可变方法

    java中允许一个方法中存在多个参数 public class Parmvarexmple { //参数可变的方法 public int sum(int...n) { int tempSum=0; f ...

  6. 基于LVM卷的MYSQL快照恢复

    在mysql数据库环境中,如果数据库数据很重要,可以使用LVM卷管理的方式,通过对数据卷进行快照,得到快速备份的目的, 首先回顾一下LVM卷管理的几个概念: 物理磁盘PD,physical disk, ...

  7. scp从远程指定目录拷贝文件到本地指定目录

    scp从远程指定目录拷贝文件到本地指定目录 [root@picts ~]# cat /root/scp_pictures.sh #!/bin/bash # Function: copy files f ...

  8. 网络编程基础【day09】：通过socket实现简单ssh客户端（三）

    本节内容 1.概述 2.socket发送中文 3.重复发送和多次接收 4.模拟ssh客户端 一.概述 本篇博客讲一下,如果socket客户端断了,另外的客户端怎么接入服务端,还有模拟ssh的链接等. ...

  9. Kafka技术内幕 读书笔记之（三） 生产者——消费者：高级API和低级API——基础知识

    1. 使用消费组实现消息队列的两种模式 分布式的消息系统Kafka支持多个生产者和多个消费者,生产者可以将消息发布到集群中不同节点的不同分区上:消费者也可以消费集群中多个节点的多个分区上的消息 . 写 ...

  10. Linux记录-lsof打开文件工具常用操作

    lsof `which httpd` //那个进程在使用apache的可执行文件 lsof /etc/passwd //那个进程在占用/etc/passwd lsof /dev/hda6 //那个进程 ...