markdown生成目录步骤

安装

gem install tocmd
当前安装版本0.4.3

生成HTML文件

指定单个文件
tocmd -f ***.md
指定目录
tocmd -d .

markdown

# markdown自动目录

## 使用说明

### 前期工作

1. 一款好用的文本编辑器，用来编辑html文档。推荐使用sublime text；

2. 你的markdown文件中必须存在目录结构，即不同级别的标题。

3. 把你的markdown文件转化成html，这一步可以使用sublime text的插件 `Markdown Preview` 或 `OmniMarkupPreviewer` 来完成。推荐使用后者，预览效果相对丰富一些；

---

## 使用说明

### 前期工作

1. 一款好用的文本编辑器，用来编辑html文档。推荐使用sublime text；

2. 你的markdown文件中必须存在目录结构，即不同级别的标题。

3. 把你的markdown文件转化成html，这一步可以使用sublime text的插件 `Markdown Preview` 或 `OmniMarkupPreviewer` 来完成。推荐使用后者，预览效果相对丰富一些；

---
......

生成格式

image.png

备注：
如遇到样式有问题的情况，找到tocmd-0.4.3/lib/tocmd/目录下以translator开头的三个文件进行更改即可

image.png

其中样式部分（更改后的）

<html>
          <head>
                  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
            <title>#{ff.gsub('.md','')}</title>
                    #{css_link}
                  <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;
                    }
                    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:25%;'>
                        <article class='markdown-body'>
                            #{parse_markdown}
                        </article>
                    </div>
                    </div>
          </body>
        </html>
            <script type="text/javascript" src="#{@editor_path}/toc/js/jquery-1.4.4.min.js"></script>
            <script type="text/javascript" src="#{@editor_path}/toc/js/jquery.ztree.all-3.5.min.js"></script>
            <script type="text/javascript" src="#{@editor_path}/toc/js/ztree_toc.js"></script>
            <SCRIPT type="text/javascript" >
            <!--
            $(document).ready(function(){
                $('#tree').ztree_toc({
                    is_auto_number:true,
                    documment_selector:'.markdown-body'
                });
            });
            //-->
            </SCRIPT>