Markdown生成左边框目录
自从接触了Markdown后就一直用这种语言写学习笔记。
但是一直在纠结如何生成方便的目录。
下面是我搞得一个简单的模板可以生成固定在屏幕左边的目录。
就是这种
第一步，编辑器
首先，需要一个可以自动生成HTML格式的Markdown编辑器。
相信看这篇文章的应该都有了。
我用的是装了插件的Sublime Text编辑器。
第二步，格式
首先你要写一个格式正确的Markdown文本。
主要是每一级标题要使用正规的Markdown语法：
# 这是一级标题
## 这是二级标题
### 这是三级标题
###### 这是六级标题第三步，目录生成
使用[TOC]生成一个自带的目录。
[TOC]是Markdown自动生成目录的方法，建议将目录生成在文章最上边，方便下面操作。
第四步，CSS修改
打开生成的HTML文件，修改CSS文件。
具体方法如下：
1.删除body样式
将CSS部分的body{}中限制大小和位置的语句删除。
或者干脆删除body{}中的全部内容。
或者将body{}如下修改：
/*我的HTML中body样式如下，其中width: 45em;会限制文章的大小，我将它注释掉了。*/
body {
/*width: 45em;*/
border: 1px solid #ddd;
outline: 1300px solid #fff;
margin: 16px auto;
}2.添加样式
接下来在CSS中添加如下样式。
/*左边目录框的样式*/
.left-div
{
height: 80%; /*目录框的高度*/
float:left;/*目录框的位置*/
overflow-y:scroll;/*目录框添加滚动条*/
padding-right: 10px;
position: fixed;/*目录框相对浏览器进行定位*/
width:17%;/*目录框的宽度*/
}
/*右边正文的样式*/
.right-div
{
float:right;/*正文的位置*/
padding-left: 10px;/*边距*/
width:80%;/*正文的宽度*/
}第五步，修改HTML
修改完了CSS部分之后，开始修改HTML部分
实现将将[TOC]生成的目录部分添加到下面的div中
或者可以给目录的div标签添加“class=‘left-div’”
<div class="left-div">
这里是[TOC]命令生成的目录
</div>再在将剩下的正文部分添加到下面的div中
<div class="right-div">
这里是正文部分
</div>
这样就完成了所有修改。
总结
所有修改完成后应该就可以生成左边目录了。
修改后的HTML文件框架如下：
<html>
<head>
<style>
body
{
/*width: 45em;*/
border: 1px solid #ddd;
outline: 1300px solid #fff;
margin: 16px auto;
}
.left-div
{width:17%;
float:left;
padding-right: 10px;
position: fixed;
overflow-y:scroll;
height: 80%}
.right-div
{
width:80%;
float:right;
padding-left: 10px;
}
</style>
</head>
<body>
<!--article标签中就是我们编写的文本内容-->
<article>
<div class="left-div">这里是[TOC]命令生成的目录</div>
<div class="right-div">这里是正文部分</div>
</article>
</body>
</html>