Markdown generates the left border directory

Since contact with Markdown has been in this language to write study notes.
But I've been wrestling with how to generate a convenient directory.
Here's what I've got. A simple template can generate a directory that is fixed on the left side of the screen.

This is the first step, the editor

First, you need a markdown editor that automatically generates HTML formatting.
Believe that read this article should have.
I'm using the sublime text editor with the plugin installed. Step two, format

First you have to write a markdown text in the correct format.
The main is to use regular markdown syntax for each level of headings:

# This is the title
# # This is level two heading
### This is level three heading
###### This is level six heading

step three, catalog generation

Use [TOC] to generate a self-contained table of contents.
[TOC] is the markdown method of automatically generating catalogs, it is recommended that the directory generation at the top of the article to facilitate the following operation. Fourth step, CSS modification

Open the generated HTML file and modify the CSS file.
The specific methods are as follows:

1. Delete Body style
Delete the statements in the CSS section that limit the size and location of the body{}.
Or simply delete the entire contents of body{}.
or modify the body{} as follows:

/* My HTML body style is as follows, where width:45em will limit the size of the article and I'll comment it out. * * Body
{
    /*width:45em;*/
    border:1px solid #ddd;
    outline:1300px solid #fff;
    MARGIN:16PX Auto;
}

2. Add Style

Next, add the following style to the CSS.

/* The style of the left directory box 
//. Left-div {
height:80%/* The height of the directory box * * *
float:left;/* The position of the directory box * *
overflow-y:scroll;/* Add a scroll bar to the Table of contents box * *
padding-right:10px;
position:fixed;/* Directory box relative to browser positioning * * width:17%;/* Directory Box Width * * * * * * * * *
The style of the right body * * *
right-div 
{
float:right;/* Body Position * * *
padding-left:10px;/* margin */
width:80%;/* Text Width * *
}

step Fifth, modify HTML

After you have finished modifying the CSS section, start modifying the HTML section

Implement the section of the table of contents that is generated by [TOC] added to the following Div
Or you can add "class= ' Left-div" to the div tag of the directory.

<div class= "Left-div" >
this is the directory generated by the TOC command
</div>

Then add the remainder of the body to the following Div

<div class= "Right-div" >
    here is the body part
</div>

This completes all the modifications. Summary

After all the modifications are complete, you should be able to generate the left directory.
The modified HTML file framework is as follows: