Markdown生成左边框目录

时间：2021-04-19 14:32:24

自从接触了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>

相关文章