您现在的位置是:首页 > 文章详情

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

日期:2020-01-08点击:384

在使用语雀文档的过程中,发现文档展示和编辑时的宽度是不能调整的,所以会在一些特殊情况下遇到一代呢人麻烦。比如在使用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%"; } })();
原文链接:https://yq.aliyun.com/articles/742192
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章