文章目录
代码块的样式真的很重要，毕竟咱好歹是一个技术博客，难免会贴一些代码的。因此参考https://cqh-i.github.io的样式进行了调整，下面是HTML的例子，更多具体效果可以参考这篇博客的样式：test-codestyle。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html代码块样本</title>
</head>
<body>
<h1>这个样式可还行？</h1>
<p class="p1" style="font-size:20px;">我的第一个段落。</p>
</body>
</html>
说明
- 由于每个人可能都修改过样式文件，所以每个人的样式可能都会有所不同。建议修改之前做好备份，防止出现错误难于恢复，可以使用git进行版本管理（备份博客的源码和配置）。
- 我的备份文件，详见代码块样式调整备份文件，
cqh-i.github.io.css为博客https://cqh-i.github.io的代码块样式。main.0cf68a.css为我之前的css文件的备份。
文中超链接样式
默认：
a {
background: 0 0;
text-decoration: none;
color: #08c;
}
修改（添加内容）后：
/* 文章中的超链接,鼠标悬浮特效 */
.article-entry li a:hover, .article-entry p a:hover {
background: 0 0;
text-decoration: underline;
color: #08c;
/* font-size:18px; */
font-weight:bold;
transition:.8s;
}
再次修改：
参考：https://css.30secondsofcode.org/snippet/hover-underline-animation
/* 文章中的超链接,鼠标悬浮特效*/
.article-entry a{
display: inline-block;
position: relative;
color: #0087ca;
font-family: lucida console;/* 这种字体的英文比较好看（像代码样式） */
}
/* 鼠标悬浮时，变色 */
.article-entry a:hover{
color: #d7191a;
transition:.8s;
}
/* 鼠标悬浮时，下划线从中间向两边延伸 */
.article-entry a:hover::after{
transform: scaleX(1);
/* 旋转，与transform连用；这里作用：鼠标悬浮时，底部的下划线从中间扩散到两边。
bottom right :左到右出现，左到右消失（需配合上面的::after）
*/
transform-origin: bottom center;
}
/* 鼠标移开后，下划线从两边向中间消失 */
.article-entry a::after{
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 1.5px;
bottom: 0;
left: 0;
background-color: #0087ca;
/* 详见：https://www.w3school.com.cn/cssref/pr_transform-origin.asp,
旋转，与transform连用；这里作用：鼠标移开后，底部的下划线从中间开始消失 */
transform-origin: bottom center;
transition: transform 0.5s ease-out;
}
2019年11月8日调整将article-entry换成mid-col，原来只是文章中文的超链接，现在改为右边栏都进行设置。（可能会出现很多负面影响，请自行决定是否更改）。
行内代码块样式
默认：
.article-entry li code,.article-entry p code {
padding: 1px 3px;
margin: 0 3px;
background: #ddd;
border: 1px solid #ccc;
font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
word-wrap: break-word;
font-size: 14px
}
参考csdn代码块样式：主要是调整颜色为红色
.markdown_views code {
color: #c7254e;
background-color: #f9f2f4;
border-radius: -9px;
}
修改后：
/* 行内代码块``的样式，参考csdn的
color: #c7254e;
background-color: #f9f2f4;
border-radius: 2px;
padding: 2px 4px;
*/
.article-entry li code, .article-entry p code {
color: #c7254e;
background-color: #f9f2f4;
border-radius: 2px;
padding:2px 4px;
margin:0 3px;
/* background:#ddd; */
/* border:2px solid #ccc; */
font-family:Menlo, Monaco, Andale Mono, lucida console, Courier New, monospace;
word-wrap:break-word;
/* font-size:14px */
}
补充：一开始没注意到原来该样式不包含标题中的代码块，添加:
/* 标题中的代码块样式 */
.article-entry code {
/* background:#eee;
padding:0 .3em;
border:none */
color: #c7254e;
background-color: rgba(249,242,244,.7);
border-radius: 2px;
padding: 2px 4px;
margin: 0 3px;
font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
word-wrap: break-word
}
代码块主要样式文件
代码块简单设置
1.修改代码块的样式
直接修改编译好的文件。路径为： theme/yilia/source/main.0cf68a.css:
(1)修改代码背景色，
搜索 .article-entry .highlight, 修改background后面的颜色
将 pre{background:#272822;
改为 pre{background:#1a0139;
(2)修改行号颜色，
搜索 .article-entry .highlight .gutter pre .line
将.article-entry .highlight .gutter pre .line{color:#666
改为.article-entry .highlight .gutter pre .line{color:#fc0000
(3)修改代码字体颜色
搜索 .article-entry .highlight .line
将.article-entry .highlight .line{color:#fff;
修改为.article-entry .highlight .line{color:#00ff0d;
效果图：
个人感觉还不是很满意，有待优化。
2.代码块行号显示错乱
修改yilia/source/main.0cf68a.css的内容：将white-space:pre-wrap; 删除，这个问题是自动换行造成的，使用不自动换行的white-space:pre;样式代码块部分会自动出现底部滚动条，行号错乱问题就没有了。
3.重点调整
不知道是hexo还是yilia主题自带的是使用highlight.js进行代码高亮的，但是好像是内置的，因为我不会写源码，只能更改生成的文件：yilia/source/main.0cf68a.css，按照识别的关键字自定义颜色，这里是我的一些配置，你也可以自己使用F12进行调试。（当然网上也有许多替换自指定的highlight.js进行代码高亮的教程）。
特别注意：高亮的前提是语言要写对，不然只能当做普通文本进行识别。
/* 代码块样式之评论：黄色 */
pre .comment {
color:#ffec8b
}
/* 代码块样式之类的参数、函数的关键字、关键字：蓝色 */
pre .class .params, pre .function .keyword, pre .keyword, pre .literal {
color:#66d9ef
}
/* 代码块样式之css的属性值、函数名、参数、标签：白色 */
pre .css .value, pre .doctype, pre .function, pre .params, pre .tag {
color:#fff
/* color:#66d9ef; */
}
/* 代码块样式之HTML或者xml的头部元素：红色(颜色较浅) */
pre .meta{
color:#f78da1;
}
/* 代码块样式之HTML的标签：红色 */
pre .tag .name {
/* color:#dc3958; */
color:#ff6481;
}
/* 代码块样式之：色 */
pre .at_rule, pre .at_rule .keyword, pre .css~* .tag, pre .preprocessor, pre .preprocessor .keyword, pre .title{
color:#fa9400
}
/* 代码块样式之属性、类、函数的title：绿色 */
pre .attr,pre .attribute, pre .built_in, pre .class, pre .css~* .class, pre .function .title {
color:#a6e22e
}
/* 代码块样式之字符串、属性值：猪肝色 */
pre .string, pre .value {
color:#e6db74
}
/* 代码块样式之数字：粉红色 */
pre .number {
color:#ffe4b5
}
pre .css~* .id, pre .id {
color:#fd971f
}
文章内的超链接和引用块超出页面的问题
当页面进行缩放时，说明这两个区域可能会超出页面。
使用下面这两个属性进行截断：
/* 如果超长，自动截断 */
word-wrap:break-word;
word-break:break-all;
具体如下：
a {
background:transparent;
text-decoration:none;
color:#08c;
/* 如果超长，自动截断 */
word-wrap:break-word;
word-break:break-all;
}
.article-entry blockquote {
background:#ddd;
border-left:5px solid #ccc;
padding:15px 20px;
margin-top:10px;
border-left:5px solid #657b83;
background:#f6f6f6;
/* 如果超长，自动截断 */
word-wrap:break-word;
word-break:break-all;
}
左侧边栏的菜单
导航超链接样式：
/* 这个字体不错font-family: STCaiyun,STXingkai; */
.left-col #header .header-menu {
font-family: STCaiyun,STXingkai;
line-height: 31px;
text-transform: uppercase;
float: none;
min-height: 150px;
margin-left: -12px;
-webkit-box-pack: center;
-webkit-box-align: center;
margin-top: 10px;
margin-bottom: 10px;
}
主页‘展开全文’按钮样式
样式参考：http://ianlunn.github.io/Hover/的hvr-shutter-in-horizontal按钮，示例：https://codepen.io/yansheng836/pen/QWWmEro。
1.添加class
修改H:\Hexo\themes\yilia\layout\_partial\article.ejs，查找index && theme.show_all_link，找到如下内容
<% if (index && theme.show_all_link){ %>
<p class="article-more-link">
<a class="article-more-a" href="<%- url_for(post.path) %>"><%= theme.show_all_link %> >></a>
</p>
<% } %>
在class="article-more-a中添加hvr-shutter-in-horizontal
<% if (index && theme.show_all_link){ %>
<p class="article-more-link">
<a class="article-more-a hvr-shutter-in-horizontal" href="<%- url_for(post.path) %>"><%= theme.show_all_link %> >></a>
</p>
<% } %>
2.修改样式
修改H:\Hexo\themes\yilia\source\main.0cf68a.css，查找.article-more-link a
.article-more-link a {
background:#4d4d4d;
color:#fff;
font-size:12px;
padding:5px 8px;
line-height:16px;
border-radius:2px;
transition:background .3s
}
.article-more-link a:hover {
background:#3c3c3c
}
修改为：
/* 《展开全文按钮 */
.article-more-link a {
color:#fff;
font-size:12px;
padding:5px 8px;
line-height:16px;
border-radius:2px;
/* Prevent highlight colour when element is tapped */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
/* Smooth fonts */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Shutter In Horizontal ,from : http://ianlunn.github.io/Hover/ */
.hvr-shutter-in-horizontal {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
/* 在鼠标悬浮时为：蓝色 */
background: #2098D1;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
.hvr-shutter-in-horizontal:before {
content:"";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* 在默认情况下为：灰褐色 */
background: #4d4d4d;
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-shutter-in-horizontal:hover, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:active {
color: white;
}
.hvr-shutter-in-horizontal:hover:before, .hvr-shutter-in-horizontal:focus:before, .hvr-shutter-in-horizontal:active:before {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
/* 展开全文按钮》 */
文章首发于：hexo+yilia修改代码块等样式
3716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
