Q站资源网
当前位置:网站首页 > 最近更新 > 免费技术 > 网站建设 > 正文

修改zblog文章代码高亮 并将灰色背景修改为黑色样式

作者:百变鹏仔 日期:2020-06-10 16:25:06 浏览:3743 分类:网站建设


    大家好,我是Q站小编鹏仔,因为鹏仔自己经常写一些小代码玩,然后会在网站去分享给大家,平时使用的编辑器,我都设置的深色背景,看习惯了,看其他颜色的总觉得难受不好看,zblog默认的背景为灰色的,于是想修改一下,就在插件搜了下代码高亮相关插件,发现都是收费的,几十块钱,要不起,于是就简单自己改下吧。


    其实这个高亮原理很简单,针对不同的代码给不同的颜色,基本都会有相应的标签嵌套起来,找到对应类名或标签修改下颜色即可。


    安排(只需改几句即可,目前,鹏仔只测试了js、html、css,其他没使用过,也不知道,大家有问题给鹏仔反馈即可)。

<style>
	/*修改代码黑色背景并高亮*/
	pre[class*="language-"]{
		background: #000;
	}
	code[class*="language-"]{
		color: #ccc;
		text-shadow: none;
	}
	.prism-token.prism-operator{
		background: transparent;
	}
</style>


    将上方css代码,放置你网站公共底部支持html地方即可,这样权重比较大,直接覆盖之前样式。

    当然,你也可以在 /zb_users/plugin/UEditor/third-party/prism/prism.css 文件中针对修改,比较麻烦。

     效果可以去鹏仔任意有代码的页面查看,例如 http://qzhan.vip/post/272.html

已有2位网友发表了看法:

  • 百变鹏仔

    百变鹏仔  评论于 [2020-06-10 16:46:14]  回复

    2020年6月10日:针对样式修改了背景颜色为黑色,修改默认字体颜色为灰色,去除默认文字阴影,去除˂括号的背景。

取消回复欢迎 发表评论:

关灯