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

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('+tag+'" href="#wow'+i+'">'+$(this).text()+'
'); $(".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文件,然后通过,给出的模版,将征文本分粘贴进去即可。



    
        
        markdownToc
        
        
        
        
    
    
        

效果图:

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

参考链接

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

你可能感兴趣的:(搭建研发环境)