调整css让语雀在更宽的屏幕上展示和编辑

在使用语雀文档的过程中,发现文档展示和编辑时的宽度是不能调整的,所以会在一些特殊情况下遇到一代呢人麻烦。比如在使用markdown时,代码段中的内容如果稍微长一些就看不到后面的代码,稍宽一些的表格也会展示的很挤。

所以,我针对语雀的css进行了一些调整,让语雀在编辑和展示时可以使用更宽的空间,这即使是一些字段超多的markdown表格,只要有带鱼屏,也可以展示和编辑的很舒服了。这些css的调整,可以通过如下的Tampermonkey脚本来进行自动的设置:

// ==UserScript==
// @name         Wider Yuque
// @namespace    https://gist.github.com/socrateslee/751c6670c59d5b9cdbd8428fab493375
// @version      0.1
// @description  Let yuque a bit wider on browser screen.
// @author       github.com/socrateslee
// @include      https://*.yuque.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var css = `
.lake-common-sidebar {
  left: calc(100% - 214px) !important ;
}
.lake-content-editor {
  width: calc(100% - 428px) !important ;
}
`
    var style = document.createElement('STYLE');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    document.head.appendChild(style);


    var nav = document.getElementById("navBox");
    var main = document.getElementById("main");
    var content = document.getElementById("content");

    if(nav && main && content){
        nav.parentNode.style.width = window.getComputedStyle(nav.parentNode).minWidth;
        nav.parentNode.style.paddingLeft = "0px";

        main.style.maxWidth = "100%";

        content.parentNode.style.maxWidth = "100%";
        content.parentNode.style.width = "100%";
    }
})();
上一篇:C语言之数值计算--级数算法


下一篇:从“四舍五入”到“奇进偶舍”