markdown生成目錄步驟
安裝
gem install tocmd
當(dāng)前安裝版本0.4.3
生成HTML文件
- 指定單個文件
tocmd -f ***.md - 指定目錄
tocmd -d .
markdown
# markdown自動目錄
## 使用說明
### 前期工作
1. 一款好用的文本編輯器跛溉，用來編輯html文檔焊切。推薦使用sublime text；
2. 你的markdown文件中必須存在目錄結(jié)構(gòu)芳室，即不同級別的標(biāo)題专肪。
3. 把你的markdown文件轉(zhuǎn)化成html，這一步可以使用sublime text的插件 `Markdown Preview` 或 `OmniMarkupPreviewer` 來完成堪侯。推薦使用后者嚎尤，預(yù)覽效果相對豐富一些；
---
## 使用說明
### 前期工作
1. 一款好用的文本編輯器抖格，用來編輯html文檔诺苹。推薦使用sublime text咕晋；
2. 你的markdown文件中必須存在目錄結(jié)構(gòu)，即不同級別的標(biāo)題收奔。
3. 把你的markdown文件轉(zhuǎn)化成html掌呜，這一步可以使用sublime text的插件 `Markdown Preview` 或 `OmniMarkupPreviewer` 來完成。推薦使用后者坪哄，預(yù)覽效果相對豐富一些质蕉；
---
......
生成格式
image.png
備注：
如遇到樣式有問題的情況，找到tocmd-0.4.3/lib/tocmd/目錄下以translator開頭的三個文件進(jìn)行更改即可
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>
