[美化] 博客园美化历程

目录

• 开端
• 具体的css
  • 净化页面
  • 标题的蜜汁动画
  • 改一下主页的比例
  • 另一些改动
• 侧边栏的html
• js代码的添加
  • 在没有目录的情况下不显示目录
  • 在url存在 article 的时候不显示版权声明
  • js附带的css
  • js完整代码
• 结语

标题上写着美化，但怎么看自己的界面，仿佛每条线都在呐喊着：“实际上是简化吧！” /扶额

在入驻博客园的一周时间里，我使用各种课上时间抽空研究了一下博客园的页面定制CSS代码、HTML和JS这些看了半天也搞不明白的东西，并将原来的模板“SimpleMemory”改成了现在的样子。

开端

首先百度“博客园 css”，发现有不少前辈都把自己的css样式表直接贴了出来……但对我来说，这跟博客园自带的无数主题没有什么区别呀……哦好吧可能多一些交互特效。但是看了十多个都没有和自己审美一致的就很难受，更不用说有些人自己的主页都崩了/捂脸，这让我怎么敢直接抄代码2333。

不过还是有好心人稍微讲解了一下基本原理，这里感谢@mskitten的写给前端白痴的博客园样式定制指南。这大概是第一篇让我稍微了解到，想自定义自己的界面到底应该从何处下手的博文。我也很喜欢他的css，但是显然我更喜欢自己动手做一个哈哈。另外就是@夏日浅笑的这篇博客园样式美化，这位大佬的博客园可以说是很好看了，然而他又用WordPress建了一个更漂亮的个人主页……膜膜膜。我直接无脑copy了他所有的去广告部分。

最后在实现代码行号、版权信息和目录的js代码上，还要感谢一下这两位大佬@呆尐兔兔的js代码（虽然我用不了），还有@Bravo Yeung的博文（虽然我照着做也弄不好），我看@呆尐兔兔传到github上的代码也有人反馈了设置不成功但是没有下文。不过有人参考前面那位大佬的东西造出了一个我能直接copy且运行成功的代码！@蒟蒻ｍqd请这位大佬请不要妄自菲薄，在我看来您最厉害/捂脸，贴一下原博文地址以表敬意：https://www.cnblogs.com/mmmqqdd/p/10848560.html

具体的css

净化页面

之前说了这些是copy的，后来发现人家竟然连标题都取消显示了，哈哈，目前我的代码并没有去掉那么多乱七八糟的东西。

	//完全都是未知的东西，反正看起来不是什么好东西
	#cnblogs_c1{
	    display: none;
	}
	#cnblogs_c2{
	    display: none;
	}
	#ad_t2{
	    display: none;
	}
	#kb_block{
	    display:none
	}
	#under_post_news{
	    display:none
	}
	#header{
	    display:none
	}
	#BlogPostCategory{
	    display: none;
	}
	.postDesc{
	    border-bottom:none;
	}
	.newsItem .catListTitle {
	    display: none;
	}
	#profile_block {
	    display: none;
	}
	//这是作者个人信息，后来加原创声明以后就去掉了
	#author_profile_follow{
	    display: none;
	}
	#author_profile {
	    display: none;
	}

标题的蜜汁动画

	//原本被取消的
	#topics .postTitle{
	    display: none;
	}

本来我觉得取消标题无所谓啊，而且我不喜欢博客园这个能乱动的标题（后来发现只是我选的主题是这样的啦～），那我在内容里加个H1标题就好，后来在加目录之后让我为难了，因为目录（至少我不会放到正文里）只能加在正文和标题之间……
但是这个动画在个人主页看还蛮好看的，所以后来想保留个人主页的动画，去掉内容里的标题动画，于是找到了绝妙的定位方法让主题自带的动画在文章链接中不显示pointer-events: none; 大概是无视鼠标，独自美丽23333

	#topics .postTitle{
	    pointer-events: none;
	    padding-bottom: 0.6em;
	    margin-left: -15px;
	    font-size: 2em !important;
	    border-bottom: 1px solid #eee;
	}

改一下主页的比例

也是一位博主介绍的教程，使用了前两步，找不到原文链接了。

	#home {
	    margin: 0 auto;
	     90%;
	    min- 950px;
	    background-color: #fff;
	    padding: 30px;
	    margin-top: 50px;
	    margin-bottom: 50px;
	    box-shadow: 0 2px 6px rgba(100,100,100,.3);
	}

另一些改动

	//内容与右边界贴的太近，加了一个边。
	#mainContent {
	    min-height: 200px;
	    padding: 0 0 10px 0;
	    *padding-top: 10px;
	    -o-text-overflow: ellipsis;
	    text-overflow: ellipsis;
	    overflow: hidden;
	    float: right;
	    margin-left: -22em;
	     100%;
	}
	//把侧边栏挪到左边
	#sideBar {
	    margin-top: 0px;
	     250px;
	    min-height: 200px;
	    padding: 0 0 0 5px;
	    float: left;
	    -o-text-overflow: ellipsis;
	    text-overflow: ellipsis;
	    overflow: hidden;
	    colour: 112233;
	}
	#sideBar h1 {
	    font-size: 30px;
	}
	//一堆自己看着不爽就挪来挪去的东西
	#topics {
	     95%;
	    padding: 0 50px 10px 10px;
	}
	.day {
	     95%;
	    padding: 0px 50px 10px 10px;
	}
	#cnblogs_post_body {
	    margin: 20px 0;
	}
	#div_digg {
	    margin-top: -60px;
	}
	#comment_form_container .comment_textarea {
	     800px;
	}
	.commentbox_title {
	     800px;
	}
	//主题自带的Markdown引用蜜汁双引号，屏蔽掉
	.postBody blockquote {
	    background-image: none;
	}

侧边栏的html

	<!--悄悄加了一个链接-->
	<div>
	    <h1 class="winng">
	        <a href="https://www.cnblogs.com/winng/">
	            winng
	        </a> 
	    </h1>
	    <br>
	<!--去掉了标题栏所以又加上几个链接-->
	    <h3 class="sign">
	        <a href="https://i.cnblogs.com/Configure.aspx">
	            no game, no life.
	        </a> 
	    </h3>
	    <br>
	<!--照猫画虎地加了一个图片-->
	    <img src="https://files-cdn.cnblogs.com/files/winng/winngcover.bmp">
	</div>
	<br>
	<br>
	<div>
	    <li>
	        <a href="https://msg.cnblogs.com/send/winng">
	            站内联系
	        </a> 
	    </li>
	    <li>
	        <a href="https://www.cnblogs.com/winng/MyDiary.html">
	            我的日记
	        </a> 
	    </li>
	</div>

js代码的添加

在之前提到的文章里copy到了拥有添加目录、添加版权声明、添加代码行号功能的js代码（包括一些css样式表），但原来的代码存在两点问题：

1. 目录功能在没有目录的时候也会显示一个目录
2. 版权声明并不应该出现在我写的文章里，博客园告诉我文章是用来放转载的东西的，我不希望它有版权声明……（好像日记里出现也没什么用，但是我懒得再改了）

在没有目录的情况下不显示目录

	if (($("#cnblogs_post_body h2,#cnblogs_post_body h3")).length==0)
	    return false;

查了一下js的筛选器……然后发现这是一个叫做jQuery的东西（显然最后也不知道jQuery到底是什么），但反正我搞清楚了怎样判断没筛选出任何东西，这就够了/叉腰。

在url存在 article 的时候不显示版权声明

	url = window.location.href;
	var reg=/.articles./;
	if(reg.test(url)){
 	   return false;
	}

稍微看了看正则表达式，然后写了这样一个东西。

js附带的css

首先是在css里需要加的，对博客园markdown的美化（？）……反正做那个js的大佬表示把这些都贴上就行，我后来又改了一些（主要就是换了自己喜欢的Fira Code的字体）。

	@font-face {
	  font-family: octicons-anchor;
	  src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
	}
	#cnblogs_post_body {
	  margin: 20px 0;
	}
	 
	.cnblogs-markdown {
	  -ms-text-size-adjust: 100%;
	  -webkit-text-size-adjust: 100%;
	  color: #333;
	  overflow: hidden;
	  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
	  font-size: 16px;
	  line-height: 1.6;
	  word-wrap: break-word;
	}
	 
	.cnblogs-markdown a {
	  background: transparent;
	}
	 
	.cnblogs-markdown a:active,
	.cnblogs-markdown a:hover {
	  outline: 0;
	}
	 
	.cnblogs-markdown strong {
	  font-weight: bold;
	}
	 
	.cnblogs-markdown h1 {
	  font-size: 2em;
	  margin: 0.67em 0;
	}
	 
	.cnblogs-markdown img {
	  border: 0;
	}
	 
	.cnblogs-markdown hr {
	  box-sizing: content-box;
	  height: 0;
	}
	 
	.cnblogs-markdown pre {
	  overflow: auto;
	}
	 
	.cnblogs-markdown code,
	.cnblogs-markdown kbd,
	.cnblogs-markdown pre {
	  font-family: monospace, monospace;
	  font-size: 1em;
	}
	 
	.cnblogs-markdown input {
	  color: inherit;
	  font: inherit;
	  margin: 0;
	}
	 
	.cnblogs-markdown html input[disabled] {
	  cursor: default;
	}
	 
	.cnblogs-markdown input {
	  line-height: normal;
	}
	 
	.cnblogs-markdown input[type="checkbox"] {
	  box-sizing: border-box;
	  padding: 0;
	}
	 
	.cnblogs-markdown table {
	  border-collapse: collapse;
	  border-spacing: 0;
	}
	 
	.cnblogs-markdown td,
	.cnblogs-markdown th {
	  padding: 0;
	}
	 
	.cnblogs-markdown * {
	  box-sizing: border-box;
	}
	 
	.cnblogs-markdown input {
	  font: 13px/1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
	}
	 
	.cnblogs-markdown a {
	  color: #4183c4;
	  text-decoration: none;
	}
	 
	.cnblogs-markdown a:hover,
	.cnblogs-markdown a:active {
	  text-decoration: underline;
	}
	 
	.cnblogs-markdown hr {
	  height: 0;
	  margin: 15px 0;
	  overflow: hidden;
	  background: transparent;
	  border: 0;
	  border-bottom: 1px solid #ddd;
	}
	 
	.cnblogs-markdown hr:before {
	  display: table;
	  content: "";
	}
	 
	.cnblogs-markdown hr:after {
	  display: table;
	  clear: both;
	  content: "";
	}
	 
	.cnblogs-markdown h1,
	.cnblogs-markdown h2,
	.cnblogs-markdown h3,
	.cnblogs-markdown h4,
	.cnblogs-markdown h5,
	.cnblogs-markdown h6 {
	  margin-top: 15px;
	  margin-bottom: 10px;
	  line-height: 1.1;
	}
	 
	.cnblogs-markdown blockquote {
	  margin: 0;
	}
	 
	.cnblogs-markdown ul,
	.cnblogs-markdown ol {
	  padding: 0;
	  margin-top: 0;
	  margin-bottom: 0;
	}
	 
	.cnblogs-markdown ol ol,
	.cnblogs-markdown ul ol {
	  list-style-type: lower-roman;
	}
	 
	.cnblogs-markdown ul ul ol,
	.cnblogs-markdown ul ol ol,
	.cnblogs-markdown ol ul ol,
	.cnblogs-markdown ol ol ol {
	  list-style-type: lower-alpha;
	}
	 
	.cnblogs-markdown dd {
	  margin-left: 0;
	}
	 
	.cnblogs-markdown code {
	  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
	  font-size: 12px;
	}
	 
	.cnblogs-markdown pre {
	  margin-top: 0;
	  margin-bottom: 0;
	  font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
	}
	 
	.cnblogs-markdown .octicon {
	  font: normal normal normal 16px/1 octicons-anchor;
	  display: inline-block;
	  text-decoration: none;
	  text-rendering: auto;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}
	 
	.cnblogs-markdown .octicon-link:before {
	  content: 'f05c';
	}
	 
	.cnblogs-markdown>*:first-child {
	  margin-top: 0 !important;
	}
	 
	.cnblogs-markdown>*:last-child {
	  margin-bottom: 0 !important;
	}
	 
	.cnblogs-markdown a:not(:link):not(:visited) {
	  color: inherit;
	  text-decoration: none;
	}
	 
	.cnblogs-markdown .anchor {
	  position: absolute;
	  top: 0;
	  left: 0;
	  display: block;
	  padding-right: 6px;
	  padding-left: 30px;
	  margin-left: -30px;
	}
	 
	.cnblogs-markdown .anchor:focus {
	  outline: none;
	}
	 
	.cnblogs-markdown h1,
	.cnblogs-markdown h2,
	.cnblogs-markdown h3,
	.cnblogs-markdown h4,
	.cnblogs-markdown h5,
	.cnblogs-markdown h6 {
	  position: relative;
	  margin-top: 1em;
	  margin-bottom: 16px;
	  font-weight: bold;
	  line-height: 1.4;
	}
	 
	.cnblogs-markdown h1 .octicon-link,
	.cnblogs-markdown h2 .octicon-link,
	.cnblogs-markdown h3 .octicon-link,
	.cnblogs-markdown h4 .octicon-link,
	.cnblogs-markdown h5 .octicon-link,
	.cnblogs-markdown h6 .octicon-link {
	  display: none;
	  color: #000;
	  vertical-align: middle;
	}
	 
	.cnblogs-markdown h1:hover .anchor,
	.cnblogs-markdown h2:hover .anchor,
	.cnblogs-markdown h3:hover .anchor,
	.cnblogs-markdown h4:hover .anchor,
	.cnblogs-markdown h5:hover .anchor,
	.cnblogs-markdown h6:hover .anchor {
	  padding-left: 8px;
	  margin-left: -30px;
	  text-decoration: none;
	}
	 
	.cnblogs-markdown h1:hover .anchor .octicon-link,
	.cnblogs-markdown h2:hover .anchor .octicon-link,
	.cnblogs-markdown h3:hover .anchor .octicon-link,
	.cnblogs-markdown h4:hover .anchor .octicon-link,
	.cnblogs-markdown h5:hover .anchor .octicon-link,
	.cnblogs-markdown h6:hover .anchor .octicon-link {
	  display: inline-block;
	}
	 
	.cnblogs-markdown h1 {
	  padding-bottom: 0.3em;
	  font-size: 2.25em !important;
	  line-height: 1.2;
	  border-bottom: 1px solid #eee;
	}
	 
	.cnblogs-markdown h1 .anchor {
	  line-height: 1;
	}
	 
	.cnblogs-markdown h2 {
	  padding-bottom: 0.3em;
	  font-size: 1.5em !important;
	  line-height: 1.225;
	  border-bottom: 1px solid #eee;
	}
	 
	.cnblogs-markdown h2 .anchor {
	  line-height: 1;
	}
	 
	.cnblogs-markdown h3 {
	  font-size: 1.25em!important;
	  line-height: 1.43;
	}
	 
	.cnblogs-markdown h3 .anchor {
	  line-height: 1.2;
	}
	 
	.cnblogs-markdown h4 {
	  font-size: 1.1em !important; 
	}
	 
	.cnblogs-markdown h4 .anchor {
	  line-height: 1.2;
	}
	 
	.cnblogs-markdown h5 {
	  font-size: 1em !important;
	}
	 
	.cnblogs-markdown h5 .anchor {
	  line-height: 1.1;
	}
	 
	.cnblogs-markdown h6 {
	  font-size: 1em !important;
	  color: #777;
	}
	 
	.cnblogs-markdown h6 .anchor {
	  line-height: 1.1;
	}
	 
	.cnblogs-markdown p,
	.cnblogs-markdown blockquote,
	.cnblogs-markdown ul,
	.cnblogs-markdown ol,
	.cnblogs-markdown dl,
	.cnblogs-markdown table,
	.cnblogs-markdown pre {
	  margin-top: 0;
	  margin-bottom: 16px;
	}
	 
	.cnblogs-markdown hr {
	  height: 4px;
	  padding: 0;
	  margin: 16px 0;
	  background-color: #e7e7e7;
	  border: 0 none;
	}
	 
	.cnblogs-markdown ul,
	.cnblogs-markdown ol {
	  padding-left: 2em;
	  font-size: 14px;
	}
	 
	.cnblogs-markdown ul ul,
	.cnblogs-markdown ul ol,
	.cnblogs-markdown ol ol,
	.cnblogs-markdown ol ul {
	  margin-top: 0;
	  margin-bottom: 0;
	}
	 
	.cnblogs-markdown li>p {
	  margin-top: 16px;
	}
	 
	.cnblogs-markdown dl {
	  padding: 0;
	}
	 
	.cnblogs-markdown dl dt {
	  padding: 0;
	  margin-top: 16px;
	  font-size: 1em;
	  font-style: italic;
	  font-weight: bold;
	}
	 
	.cnblogs-markdown dl dd {
	  padding: 0 16px;
	  margin-bottom: 16px;
	}
	 
	.cnblogs-markdown blockquote {
	  color: #333;
	  padding: 10px 15px;
	  border: none;
	  border-left: 10px solid #D6DBDF;
	}
	 
	.cnblogs-markdown blockquote>:first-child {
	  margin-top: 0;
	}
	 
	.cnblogs-markdown blockquote>:last-child {
	  margin-bottom: 0;
	}
	 
	.cnblogs-markdown table {
	  display: block;
	   100%;
	  overflow: auto;
	  word-break: normal;
	  word-break: keep-all;
	}
	 
	.cnblogs-markdown table th {
	  font-weight: bold;
	}
	 
	.cnblogs-markdown table th,
	.cnblogs-markdown table td {
	  padding: 6px 13px;
	  border: 1px solid #ddd;
	}
	 
	.cnblogs-markdown table tr {
	  background-color: #fff;
	  border-top: 1px solid #ccc;
	}
	 
	.cnblogs-markdown table tr:nth-child(2n) {
	  background-color: #f8f8f8;
	}
	 
	.cnblogs-markdown img {
	  max- 100%;
	  box-sizing: border-box;
	}
	 
	.cnblogs-markdown code {
	  padding: 0;
	  padding-top: 0.2em;
	  padding-bottom: 0.2em;
	  margin: 0;
	  font-size: 85%;
	  background-color: rgba(0,0,0,0.04);
	  border-radius: 3px;
	  border: none !important;
	  display: inline-block;
	}
	 
	.cnblogs-markdown code:before,
	.cnblogs-markdown code:after {
	  letter-spacing: -0.2em;
	  content: "0a0";
	}
	 
	/*only for syntaxhighlighter */
	/*--start--*/
	.cnblogs-markdown .syntaxhighlighter table td.code {
	  95% !important; 
	}
	 
	.cnblogs-markdown .syntaxhighlighter code {
	  font-family: "Fira Code","Bitstream Vera Sans Mono","Courier New",Courier,monospace!important;
	  padding: 0 !important;
	  border-radius: 0 !important;
	  background-color: transparent !important;
	}
	 
	.cnblogs-markdown .syntaxhighlighter code:before,
	.cnblogs-markdown .syntaxhighlighter code:before {
	  letter-spacing: -0.5em;
	}
	/*--end--*/
	 
	.cnblogs-markdown pre>code {
	  padding: 0;
	  margin: 0;
	  font-size: 100%;
	  word-break: normal;
	  white-space: pre;
	  background: transparent;
	  border: 0;
	}
	 
	.cnblogs-markdown .highlight {
	  margin-bottom: 16px;
	}
	 
	.cnblogs-markdown .highlight pre,
	.cnblogs-markdown pre {
	  padding: 16px;
	  overflow: auto;
	  font-size: 85%;
	  line-height: 1.45;
	  background-color: #f7f7f7;
	  border-radius: 3px;
	}
	 
	.cnblogs-markdown .highlight pre {
	  margin-bottom: 0;
	  word-break: normal;
	}
	 
	.cnblogs-markdown pre {
	  word-wrap: normal;
	}
	 
	.cnblogs-markdown code, .cnblogs-post-body code {
	    font-family: "Fira Code",sans-serif!important;
	}
	.cnblogs-markdown pre code {
	  display: inline;
	  max- initial;
	  padding: 0;
	  margin: 0;
	  overflow: initial;
	  line-height: inherit;
	  word-wrap: normal;
	  background-color: transparent;
	  border: 0;
	}
	 
	.cnblogs-markdown pre code:before,
	.cnblogs-markdown pre code:after {
	  content: normal;
	}
	 
	.cnblogs-markdown kbd {
	  display: inline-block;
	  padding: 3px 5px;
	  font-size: 11px;
	  line-height: 10px;
	  color: #555;
	  vertical-align: middle;
	  background-color: #fcfcfc;
	  border: solid 1px #ccc;
	  border-bottom-color: #bbb;
	  border-radius: 3px;
	  box-shadow: inset 0 -1px 0 #bbb;
	}
	 
	.cnblogs-markdown .pl-c {
	  color: #969896;
	}
	 
	.cnblogs-markdown .pl-c1,
	.cnblogs-markdown .pl-mdh,
	.cnblogs-markdown .pl-mm,
	.cnblogs-markdown .pl-mp,
	.cnblogs-markdown .pl-mr,
	.cnblogs-markdown .pl-s1 .pl-v,
	.cnblogs-markdown .pl-s3,
	.cnblogs-markdown .pl-sc,
	.cnblogs-markdown .pl-sv {
	  color: #0086b3;
	}
	 
	.cnblogs-markdown .pl-e,
	.cnblogs-markdown .pl-en {
	  color: #795da3;
	}
	 
	.cnblogs-markdown .pl-s1 .pl-s2,
	.cnblogs-markdown .pl-smi,
	.cnblogs-markdown .pl-smp,
	.cnblogs-markdown .pl-stj,
	.cnblogs-markdown .pl-vo,
	.cnblogs-markdown .pl-vpf {
	  color: #333;
	}
	 
	.cnblogs-markdown .pl-ent {
	  color: #63a35c;
	}
	 
	.cnblogs-markdown .pl-k,
	.cnblogs-markdown .pl-s,
	.cnblogs-markdown .pl-st {
	  color: #a71d5d;
	}
	 
	.cnblogs-markdown .pl-pds,
	.cnblogs-markdown .pl-s1,
	.cnblogs-markdown .pl-s1 .pl-pse .pl-s2,
	.cnblogs-markdown .pl-sr,
	.cnblogs-markdown .pl-sr .pl-cce,
	.cnblogs-markdown .pl-sr .pl-sra,
	.cnblogs-markdown .pl-sr .pl-sre,
	.cnblogs-markdown .pl-src {
	  color: #183691;
	}
	 
	.cnblogs-markdown .pl-v {
	  color: #ed6a43;
	}
	 
	.cnblogs-markdown .pl-id {
	  color: #b52a1d;
	}
	 
	.cnblogs-markdown .pl-ii {
	  background-color: #b52a1d;
	  color: #f8f8f8;
	}
	 
	.cnblogs-markdown .pl-sr .pl-cce {
	  color: #63a35c;
	  font-weight: bold;
	}
	 
	.cnblogs-markdown .pl-ml {
	  color: #693a17;
	}
	 
	.cnblogs-markdown .pl-mh,
	.cnblogs-markdown .pl-mh .pl-en,
	.cnblogs-markdown .pl-ms {
	  color: #1d3e81;
	  font-weight: bold;
	}
	 
	.cnblogs-markdown .pl-mq {
	  color: #008080;
	}
	 
	.cnblogs-markdown .pl-mi {
	  color: #333;
	  font-style: italic;
	}
	 
	.cnblogs-markdown .pl-mb {
	  color: #333;
	  font-weight: bold;
	}
	 
	.cnblogs-markdown .pl-md,
	.cnblogs-markdown .pl-mdhf {
	  background-color: #ffecec;
	  color: #bd2c00;
	}
	.cnblogs-markdown .pl-mdht,
	.cnblogs-markdown .pl-mi1 {
	  background-color: #eaffea;
	  color: #55a532;
	}
	 
	.cnblogs-markdown .pl-mdr {
	  color: #795da3;
	  font-weight: bold;
	}
	 
	.cnblogs-markdown .pl-mo {
	  color: #1d3e81;
	}
	 
	.cnblogs-markdown kbd {
	  display: inline-block;
	  padding: 3px 5px;
	  font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
	  line-height: 10px;
	  color: #555;
	  vertical-align: middle;
	  background-color: #fcfcfc;
	  border: solid 1px #ccc;
	  border-bottom-color: #bbb;
	  border-radius: 3px;
	  box-shadow: inset 0 -1px 0 #bbb;
	  padding-top: 20px;
	}
	 
	.cnblogs-markdown .task-list-item {
	  list-style-type: none;
	}
	 
	.cnblogs-markdown .task-list-item+.task-list-item {
	  margin-top: 3px;
	}
	 
	.cnblogs-markdown .task-list-item input {
	  margin: 0 0.35em 0.25em -1.6em;
	  vertical-align: middle;
	}
	 
	.cnblogs-markdown :checked+.radio-label {
	  z-index: 1;
	  position: relative;
	  border-color: #4183c4;
	}
	 
	.cnblogs-markdown .hljs {
	   border: none !important;
	}
	#cnblogs_post_body th, #cnblogs_post_body td, .cnblogs-post-body th, .cnblogs-post-body td {
	   border: none !important;
	   padding: 0;
	}
	 
	.postCon {
	   font-size: 14px;
	}
	 
	.cnblogs-markdown .hljs, .cnblogs-post-body .hljs {
	    font-family: "Fira Code",sans-serif!important;
	   font-size: 13px! important;
	}
	 
	.cnblogs-markdown .hljs, .cnblogs-post-body .hljs {
	   font-family: "Fira Code",sans-serif!important;
	   font-size: 13px!important;
	   line-height: 1.5!important;
	   padding: 5px!important;
	}
	
	#cnblogs_post_body table, .cnblogs-post-body table {
	   border: none !important;
	   border-collapse: collapse;
	   word-break: break-word;

js完整代码

//未知的内容
<link rel="stylesheet"
    href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.7.0/dist/highlightjs-line-numbers.min.js"></script>
	<script>
    	$(function () {
    	/* markdown模式下为代码加入行号, 调用插件highlightjs-line-numbers.js */
    	hljs.initHighlightingOnLoad();
    	hljs.initLineNumbersOnLoad();
    	});
	</script>
	<script type="text/javascript">
    	var setMyBlog = {
        	setCopyright: function() { //设置版权信息，转载出处自动根据页面url生成，这里应该把自己的名字写上
        	var info_str = '<hr></hr><p>作者：<a target="_blank">@winng</a><br>'+
                '本文为作者原创，转载请注明出处：<a class="uri"></a></p>',
        	info = $(info_str),
        	info_a = info.find("a"),
        	url = window.location.href;
        	var reg=/.articles./; //没有技术水平的正则
        	if(reg.test(url)){
            	return false;
        	}
        	$(info_a[0]).attr("href","https://www.cnblogs.com/winng"); //然后在这里贴上自己的主页地址
        	$(info_a[1]).attr("href",url).text(url);
        	$("#cnblogs_post_body").append(info);
    	},
    	setCodeRow: function(){
            // 代码行号显示
            var pre = $("pre.sourceCode"); //选中需要更改的部分
            if(pre && pre.length){
                    pre.each(function () {
                        var item = $(this);
                        var lang = item.attr("class").split(" ")[1]; //判断高亮的语言
                        item.html(item.html().replace(/<[^>]+>/g, "    ")); //将<pre>标签中的html标签去掉
                        item.removeClass().addClass("brush: " + lang + ";"); //根据语言添加笔刷
                        SyntaxHighlighter.all();
                    })
                }
                },
        setAtarget: function() {
                    // 博客内的链接在新窗口打开
                    $("#cnblogs_post_body a").each(function () {
                        this.target = "_blank";
                    })
                },
        setContent: function() {
            // 根据h2、h3标签自动生成目录
            var captions_ori = $("#cnblogs_post_body h2"),
                    captions = $("#cnblogs_post_body h2,#cnblogs_post_body h3").clone(),
                content = $("<blockquote><h4>目录</h4></blockquote>");
            if (($("#cnblogs_post_body h2,#cnblogs_post_body h3")).length==0)  //没有水平的判断
                return false;
            $("#cnblogs_post_body").prepend(content.append(captions));
            var index = -1;
                captions.replaceWith(function(){
                    var self = this;
                    if(self.tagName == "H2" || self.tagName == "h2"){
                        // 设置点击目录跳转
                        index += 1;
                    $('<a name="' + '_caption_' + index + '"></a>').insertBefore(captions_ori[index]);
                        return '<a href="#_caption_' + index + '"><strong>' + self.innerHTML + '</strong></a><br>';
                    } else {
                        return "•  "  + self.innerHTML + "<br>";
                    }
                });
            },
        runAll: function() {
                            /* 运行所有方法
                             * setAtarget() 博客园内标签新窗口打开
                             * setContent() 设置目录
                             * setCopyright() 设置版权信息
                             * setCodeRow() 代码行号显示
                             */
                            this.setAtarget();
                        this.setContent();
                        this.setCopyright();
                        this.setCodeRow();
                    }
                }
                setMyBlog.runAll();
</script>

结语

也不知道有没有人跟我一样不知道markdown自带一个叫做Toc的目录，用的时候只要用[]把Toc框起来就可以了，感觉很好看……所以说折腾那半天目录我为什么啊/捂脸。

//找到了css格式里会让目录看起来怪怪的一行，改掉就好了
.cnblogs-markdown ul, .cnblogs-markdown ol {
    padding: 10px 0px 0px 0px;
}

所以直接注释掉this.setContent();，然后每篇想加个目录的随笔里加上TOC就可以了qvq