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>
