markdown生成侧边目录

Markdown 生成目录（TOC）的功能能找到，不过顶部目录浏览器来，的确不如侧边目录方便。

工具

在网上找到了这个项目i5ting_ztree_toc，借助jquery ztree，分析文档生成侧边树。

需要引用这些都文件：

<script type="text/javascript" src="toc/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="toc/jquery.ztree.core-3.5.js"></script>
  <script type="text/javascript" src="toc/ztree_toc.js"></script>
  <link rel="stylesheet" href="toc/zTreeStyle.css" type="text/css">

然后初始化

	<SCRIPT type="text/javascript" >
	<!--
	$(document).ready(function(){
		$('#tree').ztree_toc({

		});
	});
	//-->
	</SCRIPT>

一些修改

缺点是需要把html粘贴到一个html框架中。

于是稍微写了一个初始化的函数，把body中的内容拷贝出来，替换为框架元素（elem0是左侧，elem1是右侧），然后把body原始内容复制到右边的内容部分，在左边调用原插件代码添加树的框架部分。

function bootToc() {
    var elem0 = '<div class="ztree-div-left ztree" id="tree"></div>';
        elem1 = '<div class="ztree-div-right vscode-light" id="bootConentRoot"></div>';
    var o = new Array();
    document.body.childNodes.forEach(p => o.push(p.cloneNode(true)));
    document.body.innerHTML = "";
    document.body.append($(elem0)[0]);
    document.body.append($(elem1)[0]);

    var root = document.getElementById('bootConentRoot');
    o.forEach(p => root.appendChild(p));
}

$(document).ready(function(){
    bootToc();
    $('#tree').ztree_toc({

    });
});

这样只要在文件头引入这些js就行了，不用做整个文档的复制粘贴。

后续可以分析一下原始项目toc如何生成，是否有办法集成进来。