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

虫子君
虫子君
虫子君
675
文章
278
评论
2019年4月28日12:35:11 评论 1,785 1232字阅读4分6秒

最近呢,虫子君也是非常的忙也没时间修改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打开以后,然后找到对应的“类”就是大括号前面的部分。

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

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

  • 欢迎来“给我投稿”网友会因为你的帮助而感激。
  • 文章链接:https://chonzi.com/7541.html
纯代码实现知更鸟begin主题弹窗公告 WordPress功能扩展

纯代码实现知更鸟begin主题弹窗公告

begin主题自己使用的时间长了以后,大部分知更鸟原有的主题功能已经完全可以满足自己的实际需求,对于新的功能并没有过高的需求,所以更新主题都没什么动力。今天在逛博客的时候发现有个站长做了一个begin...
美化知更鸟begin主题的插入文章模块更绚丽 WordPress教程

美化知更鸟begin主题的插入文章模块更绚丽

各种各样的美化,各种各样的要求,一千个人就有一千种神奇的想法,所以对于主题的美化虫子君也从来没有满足过。今天在叶忠文的博客当中浏览的时候发现一个不错的效果。就是当使用begin主题在文章内页当中插入文...
纯CSS实现WordPress底部增加水波动画效果 WordPress功能扩展

纯CSS实现WordPress底部增加水波动画效果

网站美化这个事情似乎是一个没有尽头的事情,就像虫子君现在的网站一样,虽然现在我已经觉得非常的漂亮了,但还是觉得有时候哪里缺少一点什么,似乎网站美化这个这个事情,就仿佛这一辈子都没完没了一样的。 嗯哼,...
begin主题代码高亮样式美化 WordPress教程

begin主题代码高亮样式美化

对于begin主题,虽然有着非常强大的功能,但是对于一些细节的把控,没有ui设计的鸟叔还是稍微有点力不从心。几乎每一次虫子君从鸟叔那里拿到新版的主题以后,都会自己调整一下。 这次调整了一下being主...
WordPress主题增加关注微信才能查看内容的功能 WordPress教程

WordPress主题增加关注微信才能查看内容的功能

做微信公众号的朋友有时候也会有自己的网站,用来存放历史文章,第一是可以方便我们的管理,另一个就是可以随时让小伙伴们在网站上面搜索。那就是是需要一个可以将流量转换成粉丝的一个功能,毕竟现在流量为王的年代...

您必须才能发表评论!