调整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%";
    }
})();
目录
相关文章
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
578 12
|
前端开发
「CSS畅想」我的发呆专属,反复解锁手机屏幕
前端玩转CSS,可以创造出不少有趣的效果。今天实现了一个解锁手机屏幕的效果,简单的快乐。
283 1
|
前端开发 JavaScript
💖CSS + JS 送学妹满屏幕小爱心
💖CSS + JS 送学妹满屏幕小爱心
326 0
|
前端开发
chrome7-查看和编辑css
chrome7-查看和编辑css
183 0
chrome7-查看和编辑css
|
Web App开发 前端开发 程序员
如何使用CSS3来获取屏幕宽度并且用来计算DIV高度
今天使用到了SUI的路由功能,切换界面的时候可以不用刷新页面,达到了能够返回到之前浏览的ajax界面的位置,用户体验较好。但是由于其中的一个div是使用js根据屏幕宽度计算得来的相对高度,而路由功能的切换界面不会重新加载js,那么我们就需要在css里实现这个功能。
27007 1
|
Web App开发 前端开发
Confluence 6 开始编辑 CSS
希望编辑空间的样式表: 进入到空间,然后在左侧边栏中选择 空间工具 > 界面外观(Space tools > Look and Feel)。
1382 0
|
前端开发
Confluence 6 CSS 编辑快速入门
希望编辑空间的 CSS 样式表: 进入空间后,然后从边栏的底部选择 空间工具(Space tools) > 外观和感觉(Look and Feel) 。
1074 0
|
Web App开发 前端开发 JavaScript
Confluence 6 CSS 编辑技巧
开始编辑空间样式表 一个空间的样式表是你开始对 CSS 进行自定义编辑的好的开始。在空间样式表中,包含了你所有可以进行修改的元素。
1331 0
|
Web App开发 编解码 前端开发
第119天:移动端:CSS像素、屏幕像素和视口的关系
移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间的关系。
1496 0

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    464
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    359
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    343
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    229
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    462
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    633
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    986
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    247
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    823
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    427