用油猴脚本修改博客园代码显示字体和字号

急救室 2018-03-07

起因

使用安科网时,好多博主不修改默认的样式,而默认的代码块样式字号很小,字体也不好看(至少在我的标分屏上看起来很难受),而修改样式只能改自己的博客,阅读别人的文章的时候就没办法了。于是尝试使用油猴脚本向网页注入CSS,在此记录一下遇到的问题。

遇到的问题

平常修改样式时爱用jQuery的css()方法,但是安科网的代码部分的样式多用!important,这时必须用

$("selector").css("cssText","color:blue!important;font-size:14px!important;")

这样的写法

源代码

可以在Tampermonkey中新建脚本,直接复制源代码

// ==UserScript==
 // @name         修改安科网代码显示字体和字号
 // @namespace    undefined
 // @version      0.0.1
 // @description  zh-cn 安科网里许多技术博客粘的代码字号都特别小,字体也不好看,本脚本可以修改这些默认的样式
 // @author       hibiki
 // @match        *://www.cnblogs.com/*
 // @require      https://code.jquery.com/jquery-latest.js
 // @run-at       document-start
 // @grant        unsafeWindow
 // @grant        none
 // ==/UserScript==
 $(document).ready(function () {
     (function () {
         'use strict';
         var pre = $(".cnblogs_code pre");
         var span = $(".cnblogs_code span");
         pre.css("cssText", 'font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace!important;font-size: 14px!important;word-wrap: break-word;white-space: pre-wrap;'
         );
         span.css("cssText",
             'font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace!important;font-size: 14px!important;line-height: "1.5!important;'
         );
     })();
 });

相关推荐

安得情怀似旧时 / 0评论 2019-10-27
80417606 / 0评论 2007-03-06