修改begin主题文章页代码高亮样式

虫子君 2019.4. 2812:35:11 评论 1,223

最近呢,虫子君也是非常的忙也没时间修改begin主题的样式,好不容易盼到周末的时间,好景不长遇到客人需要在线陪护。

一直以来都是觉得鸟叔的begin主题的功能非常的强大,但是样式着实不怎么样,可能是程序员的天性,不过似乎也不对,好像鸟叔是做前端的,不应该审美这么次吧。

好吧,不论好坏,今天就要大张旗鼓的修改一下主题的样式。

修改begin主题文章页代码高亮样式

这是没修改前的样子,是不是有点丑,首先虫子君不喜欢这个代码高亮的样式,这种黑绿色的背景,有点像似sublime不过奈何虫子君不喜欢这种。

所以魔改了之后,是这样子的。↓↓↓↓↓↓↓↓↓↓↓↓

修改begin主题文章页代码高亮样式

实现起来非常的简单,至于JS我们就不需要去修改了,仅仅修改一下css就好了。

操作步骤;

由于begin主题版本不同可能会存在文件路径的差异,建议利用Chrome的代码检查功能,查看具体样式的ID 和class

首先打开begin主题的css文件夹,找到其中的“prettify.css”文件。

.prettyprint.linenums ol li,
pre.prettyprint.linenums ol li {
	color: #777;
	line-height: 18px;(18)
	margin-left: 0;
	list-style: none;
	line-height: 18px;
	list-style: none;
    padding-left: 5px;
 	margin: 0 5px 0 5px;
  	font-size:0.8em;
}
pre.prettyprint.linenums {
	-webkit-box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741;(删除)
	box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741;(删除)
	border-radius: 2px;(改成8px)
}
pre.prettyprint {
	white-space: pre-wrap;
	word-wrap: break-word;
	background-color: #30303a;
	border: 1px solid #272822;
	overflow: hidden;
	padding: 8px 0px;
}
.prettyprint.linenums ol,
pre.prettyprint.linenums ol {
	margin: 0 0 0 33px;
}

虫子君这里修改的样式主要,有background-color(背景色)、margin(外边框)、padding(内边距)、border-radius(圆角)、list-atyle(序列的头)、font-size(字体大小)、line-height(行高)基本上修改的就是这些样式,如果您不懂怎么修改的话,可以直接找到prettify.css打开以后,然后找到对应的“类”就是大括号前面的部分。

好了今天的文章到此结束,如果对你有帮助请对我点个小星星喔!

我是虫子君,一个不平凡的翩翩少年。。。。。。。

虫子君

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: