自从接触了Markdown后就一直用这种语言写学习笔记。

但是一直在纠结如何生成方便的目录。

下面是我搞得一个简单的模板可以生成固定在屏幕左边的目录。



就是这种

第一步，编辑器

首先，需要一个可以自动生成HTML格式的Markdown编辑器。

相信看这篇文章的应该都有了。

我用的是装了插件的Sublime Text编辑器。

第二步，格式

首先你要写一个格式正确的Markdown文本。

主要是每一级标题要使用正规的Markdown语法：

  1. # 这是一级标题
  2. ## 这是二级标题
  3. ### 这是三级标题
  4. ###### 这是六级标题

第三步，目录生成

使用[TOC]生成一个自带的目录。

[TOC]是Markdown自动生成目录的方法，建议将目录生成在文章最上边，方便下面操作。

第四步，CSS修改

打开生成的HTML文件，修改CSS文件。

具体方法如下：

1.删除body样式

将CSS部分的body{}中限制大小和位置的语句删除。

或者干脆删除body{}中的全部内容。

或者将body{}如下修改：

  1. /*我的HTML中body样式如下，其中width: 45em;会限制文章的大小，我将它注释掉了。*/
  2. body {
  3.     /*width: 45em;*/
  4.     border: 1px solid #ddd;
  5.     outline: 1300px solid #fff;
  6.     margin: 16px auto;
  7. }

2.添加样式

接下来在CSS中添加如下样式。

  1. /*左边目录框的样式*/
  2. .left-div
  3. {
  4. height: 80%; /*目录框的高度*/
  5. float:left;/*目录框的位置*/
  6. overflow-y:scroll;/*目录框添加滚动条*/
  7. padding-right: 10px;
  8. position: fixed;/*目录框相对浏览器进行定位*/
  9. width:17%;/*目录框的宽度*/
  10. }
  11. /*右边正文的样式*/
  12. .right-div
  13. {
  14. float:right;/*正文的位置*/
  15. padding-left: 10px;/*边距*/
  16. width:80%;/*正文的宽度*/
  17. }

第五步，修改HTML

修改完了CSS部分之后，开始修改HTML部分

实现将将[TOC]生成的目录部分添加到下面的div中

或者可以给目录的div标签添加“class=‘left-div’”

  1. <div class="left-div">
  2. 这里是[TOC]命令生成的目录
  3. </div>

再在将剩下的正文部分添加到下面的div中

  1. <div class="right-div">
  2.     这里是正文部分
  3. </div>

这样就完成了所有修改。

总结

所有修改完成后应该就可以生成左边目录了。

修改后的HTML文件框架如下：

  1. <html>
  2. <head>
  3.     <style>
  4.         body
  5.         {
  6.         /*width: 45em;*/
  7.         border: 1px solid #ddd;
  8.         outline: 1300px solid #fff;
  9.         margin: 16px auto;
  10.         }
  11.         .left-div
  12.         {width:17%;
  13.         float:left;
  14.         padding-right: 10px;
  15.         position: fixed;
  16.         overflow-y:scroll;
  17.         height: 80%}
  18.         .right-div
  19.         {
  20.         width:80%;
  21.         float:right;
  22.         padding-left: 10px;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <!--article标签中就是我们编写的文本内容-->
  28.     <article>
  29.         <div class="left-div">这里是[TOC]命令生成的目录</div>
  30.         <div class="right-div">这里是正文部分</div>
  31.     </article>
  32. </body>
  33. </html>

Markdown生成左边框目录的更多相关文章

  1. markdown转HTML，目录生成

    1.首先,准备好已经编辑好的markdown文件放到指定目录下. 2.下载node.js,下载地址:https://nodejs.org/en/download/ 3.下载好node.js文件后,配置 ...

  2. Pandoc+markdown生成slides

    Pandoc+markdown生成slides 参考:http://blog.csdn.net/pizi0475/article/details/50955900 1.安装 http://pandoc ...

  3. iOS开发——多线程篇——快速生成沙盒目录的路径，多图片下载的原理、SDWebImage框架的简单介绍

    一.快速生成沙盒目录的路径 沙盒目录的各个文件夹功能 - Documents - 需要保存由"应用程序本身"产生的文件或者数据,例如:游戏进度.涂鸦软件的绘图 - 目录中的文件会被 ...

  4. JQuery内容从左边框移到右边框

    最近感觉学习挺紧的.JQuery没有学几天就又开始学习AngularJS了.学习的时候都是看着老师用着很简单,自己写的时候就觉得不太会用.但是学习AngularJS的时候有很多问题,我觉得不管是学习J ...

  5. TextField的文字距左边框的距离偏移

    默认情况下,当向textField输入文字时,文字会紧贴在textField左边框上. 我们可以通过设置textField的leftView,设置一个只有宽度的leftView. 这样还不够,因为默认 ...

  6. WM_SYSCOMMAND包括很多功能，比如：拖动左边框、拖动标题栏、滚动条滚动、点击最小化、双击标题栏——Delphi 通过事件代替了大部分常用的消息，所以Delphi 简单、易用、高效

    procedure TForm1.WMSysCommand(var Message: TWMSysCommand); var str: string; begin case Message.CmdTy ...

  7. markdown生成的a标签如何在新页面打开

    原始的超链接语法这样写:[超链接的名字](url) 在新窗口中打开:[超链接的名字](url?_blank) 在本窗口中打开:[超链接的名字](url?_self)默认是在本窗口中打开 但上面的说法貌 ...

  8. CSS 如何让Table的里面TD全有边框 而Table的右左边框没有

    比如这样一个CSS.td3{font-size: 14px;color: #FFFFFF;background-color: #000000;BORDER-RIGHT: #f6f6f6 1px sol ...

  9. JavaScript--获取页面盒子中鼠标相对于盒子上、左边框的坐标

    分析: 外层边框是浏览器边框,内部盒子是页面的一个盒子,绿点是盒子中鼠标的位置.鼠标相对盒子边框的坐标=页面中(注意不是浏览器)鼠标坐标-盒子相对于浏览器边框的偏移量 第一步:求浏览器边框位置 x=e ...

随机推荐

  1. Spring.NET的AOP怎么玩

    之前公司一直不让使用第三方组件,因此AOP方面的组建一直不能使用,很多面向切面的应用只能通过自己写一些GenericMethod的泛型方法来解决,有一些呆板.由于公司已经开始全面转Java,因此架构组 ...

  2. angularJS之事件处理

    angularJS的事件不像js一样,会默认有冒泡和捕获,还有angularJS之间的同名控制器之间,也只是同名, 不会让他们关联起来,就是这个名字的控制器的数据的改变不会影响到另一个同名的控制器. ...

  3. Sql Server 的本地时间和UTC时间

    一,本地时间和UTC时间 本地时间 世界的每个地区都有自己的本地时间,整个地球分为二十四时区,每个时区都有自己的本地时间. UTC时间 在国际无线电通信中,为统一而普遍使用一个标准时间,称为通用协调时 ...

  4. KendoUI系列：PanelBar

    <link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css")" ...

  5. 找到SQL Server的序列号

          有时候希望获取当前机器上安装的SQL Server序列号,但注册表中序列号是经过加密的,因此我写了一个小工具获取当前SQL Server的序列号.程序比较粗糙,没有做错误验证.       ...

  6. 手动为php安装memcached扩展模块

    最近公司需要新部署几台服务器,主要就是lnmp平台,这几台服务器需要部署公司的系统,由于本屌刚入职时间不长,加上又是新手,所以对公司的架构一头雾水,前前后后折腾了一个月时间,终于磕磕绊绊的将系统服务器 ...

  7. javascript运算符——关系运算符

    × 目录 [1]恒等 [2]相等 [3]大于[4]小于 前面的话 关系运算符用于测试两个值之间的关系,根据关系是否存在而返回true或false,关系表达式总是返回一个布尔值,通常在if.while或 ...

  8. 【目录】开源Math.NET基础数学类库使用总目录

    本博客所有文章分类的总目录链接:[总目录]本博客博文总目录-实时更新  1.开源Math.NET数学组件文章   1.开源Math.NET基础数学类库使用(01)综合介绍   2.开源Math.NET ...

  9. Nodejs学习笔记（三）——一张图看懂Nodejs建站

    前言:一条线,竖着放,如果做不到精进至深,那就旋转90°,至少也图个幅度宽广. 通俗解释上面的胡言乱语:还没学会爬,就学起走了?! 继上篇<Nodejs学习笔记(二)——Eclipse中运行调试 ...

  10. jQuery 图像裁剪插件Jcrop

    ,    // 设置框的最大宽度          setSelect: [ 175, 100, 400, 300 ]        });                $('#text-input ...