在使用語雀文檔的過程中,發現文檔展示和編輯時的寬度是不能調整的,是以會在一些特殊情況下遇到一代呢人麻煩。比如在使用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%";
}
})();