Discussions » Development

Tampermonkey代码编辑器样式美化【推荐】

§
Posted: 31.10.2020
Edited: 01.11.2020

Tampermonkey代码编辑器默认样式不好看,顶部还占用较大的空间,能不能改进和美化呢?答案是肯定的。
那看我是怎么操作的吧!

开始之前,先看看我美化后的成果:


第一步:
复制下面的样式代码:

.script_tab_head{display:none}
.tv_container_fit{top: 2.1em;}
.banner{position: relative;top: -21px;}
.header_title{position: relative;top: -6px;}
.cm-s-railscasts span.CodeMirror-matchingbracket{text-decoration:none;background:#9b9e92;color:black!important;}
.tv_tab_close:before {
    content: "×";
    font-size: 17px;
}
.modified .tv_tab_close:before {
    content: "●";
}
.editor_container_o{border:0;}
.td_content_alt .tv_contents_alt{top: 1px;}
.details .tr_tabs_alt{height: 2.3em;}
.editormenu li:hover label{font-weight: bold;}
.editormenu li:hover {
    border-top: 0;
}
.default .tv_tab.tv_selected{
    background-color: #fff !important;
}
.default .tv_tab.tv_selected.tv_selected_alt{
    background-color: lightgrey !important;
}
.tv_container_fit > div > table > tr.tr_content > td > div > div:last-child .CodeMirror-scroll{margin-right:0px}
.version {
    position: absolute;
    top: 6px;
    left: 392px;
}

第二步:
设置参数和样式,见下图:




好了,自我欣赏一番吧!

§
Posted: 01.11.2020

大佬tql,比默认样式看着舒服多了。

§
Posted: 15.11.2020

I suggest everyone who uses Default (a.k.a.Monokai) theme should edit '.cm-s-monokai' it really improves matchingbracket visibility, very useful, cheers!

§
Posted: 16.11.2020

大佬们的脚本,几十万行代码,都是直接连接GitHub,直接上传的,不屑于内置的编辑器 Ծ‸ Ծ

Post reply

Sign in to post a reply.