Markdown生成左边框目录
来源:互联网 发布:2017网络黄金egd登陆 编辑:程序博客网 时间:2024/06/10 08:35
自从接触了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>
0 0
- Markdown生成左边框目录
- markdown自动生成导航目录
- 生成带有目录的Markdown格式文档
- [文档编辑工具]Markdown生成目录
- 去除Table左边框间距
- latex 生成目录,在目录中显示“参考文献”,设置标题居左显示
- 左边框的内容加到右边框的内容中
- textbox 距页面上边框和左边框的距离
- 用 XML 自定义边框效果(左边框有颜色)
- 将左边框中的元素移到右边框
- android 左边框圆角的实现
- table的左/右/上/下边框处理
- 如何隐藏table的左/右/上/下边框
- android 窗口如何靠左和靠右边框布局
- 【javascript】下拉列表select 由左边框移动到右边
- 如何隐藏table的左/右/上/下边框
- 设置TextField内文字距左边框的距离
- UIButton文字在左图片在右、空心带边框
- 用Python编写博客导出工具
- 用eclipse创建javaweb项目的准备
- POJ1837——Balance
- 关键字return/void
- hello world
- Markdown生成左边框目录
- iOS控件:UIView
- 安卓框架-CircleImageView
- 史上最全的CSS hack方式一览
- BZOJ1683: [Usaco2005 Nov]City skyline 城市地平线 单调栈
- MFC中的0x0500
- java学习 day02(面向对象)
- Spring的注入方式
- 21天实战caff--2 第6天 运行手写数字识别例程--路线图