Subline+Markdown及转为html后的排版技巧
Markdown篇
配置CSS进行段落编号
ol和li的部分为有序列表，body部分为段落编号
<style type="text/css">
ol {padding:0 0 0 20px;margin:0;list-style:none;}
li:before {color:#000000; font-family:Times New Roman;}
li{counter-increment:a 1;}
li:before{content:counter(a)". ";}
li li{counter-increment:b 1;}
li li:before{content:counter(a)"."counter(b)". ";}
li li li{counter-increment:c 1;}
li li li:before{content:counter(a)"."counter(b)"."counter(c)". ";}
body {
counter-reset: h2counter;
}
h1 { counter-reset: h2counter; }
h2 { counter-reset: h3counter; }
h3 { counter-reset: h4counter; }
h4 { counter-reset: h5counter; }
h5 { counter-reset: h6counter; }
h6 { }
h2:before {
counter-increment: h2counter;
content: counter(h2counter) ".\0000a0\0000a0";
}
h3:before {
counter-increment: h3counter;
content: counter(h2counter) "."
counter(h3counter) ".\0000a0\0000a0";
}
h4:before {
counter-increment: h4counter;
content: counter(h2counter) "."
counter(h3counter) "."
counter(h4counter) ".\0000a0\0000a0";
}
h5:before {
counter-increment: h5counter;
content: counter(h2counter) "."
counter(h3counter) "."
counter(h4counter) "."
counter(h5counter) ".\0000a0\0000a0";
}
h6:before {
counter-increment: h6counter;
content: counter(h2counter) "."
counter(h3counter) "."
counter(h4counter) "."
counter(h5counter) "."
counter(h6counter) ".\0000a0\0000a0";
}
</style>
数学公式
需要联网
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>
生成目录
使用[TOC]生成目录。
html篇
将目录链接中的绝对目录改为相对目录
方法：去掉BBB.html文件前面的目录即可
<li><a href="BBB.html#bbb">XXXX</a><ul>
左侧边栏滚动目录
（适用于目录较短的情景，当目录较长时，可使用返回顶部）
将markdown文本生成的html文件顶部的body{}标签删除，改为如下：
<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>
返回上一页按钮链接
<a href="XXX.html">
<input type=button value="返回上一页" >
</a>
回到顶部-底部按钮
在<body>标签后面，加入代码：
<a name="top"></a>
在</body>标签前加入回到顶部按钮:
<a href="#top">回到顶部</a>
回到顶部-可随时回顶部
在<head>标签后面，加入代码：
<style type="text/css">
@media (min-width: 600px) {
/* 返回顶部按钮样式 */
#topButton {
position: fixed;
float: right;
right: 20px;
top: 95%;
}
}
</style>
<script>
// 返回顶部功能
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<!--返回顶部-->
<button onclick="topFunction()" id="topButton">返回顶部</button>
