美化引用

前端笔记 - 一只热爱😻️前端的软件狗

引言

一个简洁的桌面可以极大的提高写作效率。
──鲁迅

作为一名软件狗,对前端的东西不是特别在行,前不久看见有许多软件的文档介绍采用的是Meteor主题,第一眼见到这主题就被她的简洁所吸引,在我看来用这个主题来写日记再适合不过了,毕竟博客上面也不是什么都写(博客上面采用的是Michael.Lu的一款功能强大、自定义极强的hexo主题–Mellow),不得不说Michael.Lu老哥的技术很是强大啊。从之前的解决Hexo引擎渲染table标记到而今的去掉引用标记的红竖线。感受颇深,把DIY的过程记录下来。

收获:

  • 利用google的开发者工具获取好看的CSS样式,进行修改时可以充分利用控制台。
  • Github/Gitlab的commit history很重要,不仅方便查看修改,更能从中获得重要的信息

之前重装10.13.5的时候由于降级不兼容,同时时光胶囊里面没有保持博客文章副本,最新的一个副本保存在宿舍的机械硬盘里面没有带回家,所以就暂时没有动服务器上面的HTML源码,于是就弄了一个小站来记录暑假学习的收获,或许就是现在这个站点–diary,嗯,从meteor那里拐走了主题,并进行二次魔改:

主要改动

  • 去掉主题带的广告插件
  • 侧边菜单进行自定义,页脚底部修改
  • 修复table标记,个性化代码显示,美化引用

首先,美化引用,这个引用的样式来自Alexander Marenin,他在Chrome上面的MarkDown Preview的一个插件里面自带的ClearnessDark样式,但是这个插件并没有提供这个CSS的下载。于是我们打开任意一个网络上面的md文件,此时插件进行渲染,显示出正常的阅读页面,打开Chrome的开发者工具查看调用了哪些样式,并将其保存到本地,查看样式后我提取了两个部分的代码。

1
` > `引用标记显示一个双引号
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
blockquote {
margin: 0;
padding: 0;
}
blockquote {
padding: 13px 13px 21px 15px;
margin-bottom: 18px;
font-family:georgia,serif;
font-style: italic;
}
blockquote:before {
content:"\201C";
font-size:40px;
margin-left:-10px;
font-family:georgia,serif;
color:#eee;
}
blockquote p {
font-size: 14px;
font-weight: 300;
line-height: 18px;
margin-bottom: 0;
font-style: italic;
}

1
代码块配色方案
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
code, pre {
font-family: Monaco, Andale Mono, Courier New, monospace;
}
code {
color: #ff4a14;
padding: 1px 3px;
font-size: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre {
display: block;
padding: 14px;
margin: 0 0 18px;
line-height: 16px;
font-size: 11px;
border: 1px solid #bf370f;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
pre code {
background-color: #282a36;
color: #ff4a14;
font-size: 11px;
padding: 0;
}

提取这两个代码,把它加到了page.ejs里面,引号是显示了不过左侧的红竖线却没有去掉,

Bug

尝试改动相关参数,无果,遂群中询问,群主大大,很快就解决了。
原本没有美化之前,引用标记显示是这个样子的:

红竖线

这里再次使用Chrome的开发者工具:

新技能

可以看到这里的红色竖线是由brodr-left,将其去掉,或者使用broder: none;覆盖掉,就可以去掉这条红色的竖线。

类似这样的东西,你只需要把控制台打开,找到对应的样式以及class,然后再custom.less里覆盖掉就行了
– Michael.Lu

按照这种方法,我很快就把代码块的配色弄好了。

接下来就是这个table标记了。

commit history

打开Michael.Lu的主题Repo,我找到了他之前解决table标记的提交记录,主要是这一个fixed table display in the index-card下面👇🏻的一条提交记录fixed #18#18),查看代码改动的部分,同样把它放进page.ejs里面:

1
修复table标记
1
2
3
4
5
6
7
8
<!--fix table 使用标签<table class="class">需要额外加代码,-->
<%
page.content = page.content.replace(/<table>(.+)<\/table>/, function(match, $1) {
$1 = $1.replace(/<br>/g, '');
return `<table>${$1}</table>`;
}); %>
<!--fix table 注意要放在page.content前面。-->
<%- page.content %>

把它放进<div class="document-formatting"></div>里面。

可以收工了。