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>
转载于:https://www.cnblogs.com/clew/p/5894247.html
Markdown生成左边框目录相关推荐
- markdown自动生成侧边栏TOC /目录
markdown自动生成侧边栏TOC /目录 模板地址 : https://github.com/huyande/MarkdownTemplate.git
- markdown 生成目录_github上如何为markdown文件生成目录
写在前面 熟悉markdown都知道可以使用[TOC]自动生成markdown文件的标题目录,比如在typora,vscode(需要插件)等本地编辑器中,或者在CSDN等网页编辑器中,但是github ...
- Markdown创建页面和目录?
本文翻译自:Markdown to create pages and table of contents? I started to use markdown to take notes. 我开始使用 ...
- markdown写出项目目录结构
markdown写出项目目录结构: windows下的CMD命令tree可以很方便的得到文件夹目录树 环境:windows 功能:以树状图列出目录的内容 使用配方: tree [drive][path ...
- VSCode插件生成编号、目录、文件目录树
安装VSCode 官方地址:https://code.visualstudio.com/ 下载安装完毕后在扩展中安装中文插件Chinese (Simplified) Markdown自动生成编号和目录 ...
- tcpdf html 格式重叠,html - tcpdf(html2pdf)无法正确生成表格边框 - 堆栈内存溢出...
我正在使用html2pdf生成pdf文件(即使用tcpdf库_tcpdf_5.0.002). 不幸的是,我无法正确生成表格边框. require_once('inc/html2pdf/html2pdf ...
- java - 把日志生成到指定目录
2019独角兽企业重金招聘Python工程师标准>>> 1.按天小时生成日志文件 log4j.appender.ruiming.DatePattern='_'yyyy-MM-dd-H ...
- latex自动生成中文目录_自动生成工作表目录三种方法,看哪种适合你?
如果在一个工作簿内有很多工作表需要去维护管理,一个个的查找显然是很麻烦的,建立一个工作表的导航目录无疑是最便捷的方法. 下面介绍三种生成工作表目录的方法: 一.利用宏表函数生成可导航目录 第1步:定义 ...
- JavaScript--获取页面盒子中鼠标相对于盒子上、左边框的坐标
分析: 外层边框是浏览器边框,内部盒子是页面的一个盒子,绿点是盒子中鼠标的位置.鼠标相对盒子边框的坐标=页面中(注意不是浏览器)鼠标坐标-盒子相对于浏览器边框的偏移量 第一步:求浏览器边框位置 x=e ...
最新文章
- etal斜体吗 参考文献_论文格式与论文参考文献格式
- scikit-learn随机森林调参小结
- 编译原理中词法分析--部分实现
- Java之五种遍历Map集合的方式
- 数据库索引如何工作? [关闭]
- ATL COM类之激活
- 图像处理系列——直方图之灰度直方图(Image Histogram)
- ai跟随路径_ai中图像怎么沿着路径走
- Unity内置Shader解读9——Reflective/Bumped Diffuse
- checkbox列表选择2
- UltraEdit mac版
- SQL Server 2008 导出、导入包含数据的脚本 保存脚本法
- 高博14讲--第七讲 视觉里程计-7.3 2D-2D:对极几何
- Dota2预测英雄死亡
- fastjson首字母大写的几种方法
- 写给程序员的管理入门课程(转)
- 树莓派配置无线连接与无线AP热点
- 3. Twitter的客户端框架——Bootstrap
- 一些计时软件,生产力工具
- 百钱买百鸡问题与百钱兑换问题(C与C++)经典编程算法
热门文章
- html中rem和em,CSS 中的 rem 和 em 的区别(1)
- c语言中用分数表示结果,C语言实例 计算分数的精确值
- python语言开发环境搭建_Python开发环境搭建-Go语言中文社区
- python集合_Python集
- android实例教程_Android内部存储示例教程
- java 合并两个列表_如何在Java中合并两个列表?
- 主流Java微服务框架有哪些?-开课吧
- 开课吧Java课堂之如何使用FilenameFilter
- iis 创建应用程序池的方法与分析第3/3页
- git回退到历史版本并提交到远程分支