[文档编辑工具]Markdown生成目录

来源：互联网发布：加盟淘宝店可靠吗编辑：程序博客网时间：2024/05/19 04:05

Markdown生成目录

简介

这边文章主要关注的是如何在Markdown中生成目录，由于我最近在公司写技术文档，随着篇幅的增加，为了方便查阅和管理就有了这篇文章，这里就分享给大家。

1.JS代码生产目录

当你编写好文章以后，可以将下面的一段代码放在你md文章的顶端，装好Chrome的插件MarkDownPreview，文件拖进浏览器就会自动的生成了。不懂的可以看我之前的文章的第三部分。[Web前端工具篇]Sublime 3安装Markdown插件

<link rel="stylesheet" href="http://yandex.st/highlightjs/6.2/styles/googlecode.min.css"><script src="http://code.jquery.com/jquery-1.7.2.min.js"></script><script src="http://yandex.st/highlightjs/6.2/highlight.min.js"></script><script>hljs.initHighlightingOnLoad();</script><script type="text/javascript"> $(document).ready(function(){      $("h2,h3,h4,h5,h6").each(function(i,item){        var tag = $(item).get(0).localName;        $(item).attr("id","wow"+i);        $("#category").append('<a class="new'+tag+'" href="#wow'+i+'">'+$(this).text()+'</a></br>');        $(".newh2").css("margin-left",0);        $(".newh3").css("margin-left",20);        $(".newh4").css("margin-left",40);        $(".newh5").css("margin-left",60);        $(".newh6").css("margin-left",80);      }); });</script><div id="category"></div>

效果图:

上面的代码很简单，就是通过找出文章中的h2-h6的标签，然后添加CSS样式。其实，md是HTML的一个分支，里面也可以内嵌前端代码，这里不用多说了。下面来讲一个侧栏目录的。

2.JS生成侧栏目录

2.1 下载

官网
精简版
上面两个代码一个是官网的一个是精简版本的，推荐下载精简版本的。

2.2 基本流程

将Markdown文档转换成html文件，然后通过，给出的模版，将征文本分粘贴进去即可。

<!-- 插件官网地址：http://ruby-china.org/topics/17028 --><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>markdownToc</title>        <link rel="stylesheet" type="text/css" href="./markdownToc_files/github2-rightpart.css" media="all">        <link rel="stylesheet" type="text/css" href="./markdownToc_files/github1-contents.css">        <link rel="stylesheet" href="./markdownToc_files/zTreeStyle.css" type="text/css">        <style>            .ztree li a.curSelectedNode {                padding-top: 0px;                background-color: #FFE6B0;                color: black;                height: 16px;                border: 1px #FFB951 solid;                opacity: 0.8;            }            .ztree{                overflow: auto;                height:100%;                min-height: 200px;                top: 0px;            }        </style>    </head>    <body style="">        <div>            <div style="width:30%;">                <ul id="tree" class="ztree" style="width: 260px; overflow: auto; position: fixed; z-index: 2147483647; border: 0px none; left: 0px; bottom: 0px;">                <!-- 目录内容在网页另存为之后将插入到此处 -->                </ul>            </div>            <div id="readme" style="width:70%;margin-left:25%;">                <article class="markdown-body"><!-- ***********************************************************内容分割线****************************************************************** --><!-- 请把你的html正文部分粘贴到此处，在浏览器中打开之后将会自动生成目录。如果想要将目录保留并嵌入到此文档中，只需在浏览器中“另存为->网页，全部”即可 --><!-- ***********************************************************内容分割线****************************************************************** -->                </article>            </div>        </div>    <script src="./markdownToc_files/jquery-1.10.2.min.js"></script>    <script src="./markdownToc_files/jquery.ztree.all-3.5.min.js"></script>    <script src="./markdownToc_files/jquery.ztree_toc.min.js"></script>    <script type="text/javascript">        $(document).ready(function(){            $('#tree').ztree_toc({                is_auto_number:false,                documment_selector:'.markdown-body',                is_expand_all: true            });        });    </script>    </body></html>

效果图:

更多的资料大家可以自行Google Toc（Table of Content）,这类文章有很多

参考链接

JS代码生产目录
用js实现的侧边栏布局markdown
侧栏精简版代码

1 0