思源笔记—代码片段

Vue 引用主题样式

代码语言：javascript复制

.protyle-wysiwyg [data-node-id].bq, .b3-typography blockquote {
    border-left: 0.25em solid #5ebc1d !important;
    border-radius: 0em 0.31em 0.31em 0.em;
    background-color: rgb(106 241 90 / 5%) !important;
    margin-top: 8px !important;
    .protyle-wysiwyg [: ;}

粉色小屋代码块美化

代码语言：javascript复制

/*代码块颜色*/
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}
/*!Theme: a11y-dark
  Author: @ericwbailey
  Maintainer: @ericwbailey
  Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css*/
.hljs{background:#2b2b2b;color:#f8f8f2}.hljs-comment,.hljs-quote{color:#d4d0ab}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#ffa07a}.hljs-built_in,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#f5ab35}.hljs-attribute{color:gold}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#abe338}.hljs-section,.hljs-title{color:#00e0e0}.hljs-keyword,.hljs-selector-tag{color:#dcc6e0}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}@media screen and (-ms-high-contrast:active){.hljs-addition,.hljs-attribute,.hljs-built_in,.hljs-bullet,.hljs-comment,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-quote,.hljs-string,.hljs-symbol,.hljs-type{color:highlight}.hljs-keyword,.hljs-selector-tag{font-weight:700}}

/*代码块行数背景颜色*/
.protyle-linenumber__rows {
    background-color: #292929;
}

/*代码块行数颜色*/
.protyle-linenumber__rows>span::before {
    color: #cecece;
}

/* 设置顶部三个mac按钮样式 */
.code-block::after {
    content: ' ';
    position: absolute;
    background: #fa625c;
    box-shadow: 23px 0 #fdbc40, 45px 0 #35cd4b;
    border-radius: 7px;
    top: 10px;
    left: 15px;
    height: 12px;
    width: 12px;
    z-index: 1;
}

/*代码块背景颜色*/
.b3-typography div.hljs, .protyle-wysiwyg div.hljs {
    background-color: #2e2d2d;
}

/*语言提醒*/
.b3-typography .code-block .protyle-action .protyle-action__language, .protyle-wysiwyg .code-block .protyle-action .protyle-action__language {
    font-size: 85%;
    color: wheat;
    margin-top: -4px;
	padding-left: 2em;
}

网站引用字体颜色

代码语言：javascript复制

.protyle-wysiwyg [data-node-id] span[data-type~=a] {
    color: #b54040;
    border-bottom: 1px solid var(--b3-border-color);
}

写味代码块美化

代码语言：javascript复制

/*代码块颜色*/
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}
/*!Theme: a11y-dark
  Author: @ericwbailey
  Maintainer: @ericwbailey
  Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css*/
.hljs{background:#2b2b2b;color:#f8f8f2}.hljs-comment,.hljs-quote{color:#d4d0ab}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#ffa07a}.hljs-built_in,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#f5ab35}.hljs-attribute{color:gold}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#abe338}.hljs-section,.hljs-title{color:#00e0e0}.hljs-keyword,.hljs-selector-tag{color:#dcc6e0}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}@media screen and (-ms-high-contrast:active){.hljs-addition,.hljs-attribute,.hljs-built_in,.hljs-bullet,.hljs-comment,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-quote,.hljs-string,.hljs-symbol,.hljs-type{color:highlight}.hljs-keyword,.hljs-selector-tag{font-weight:700}}

/*代码块背景设置*/
.b3-typography div.hljs, .protyle-wysiwyg div.hljs {
    background: #2e2d2d;
    padding: 30px 10px 22px 10px;
}

/*行号背景设置*/
.protyle-linenumber__rows {
    background-color: #302d2d !important;
}

/*行数颜色设置*/
.protyle-linenumber__rows span::before {
    color: #ffffffad;
}

/*复制按钮代码颜色*/
.code-block .protyle-action .protyle-action__copy, .code-block .protyle-action .protyle-action__menu {
    margin-top: -3px;
    color: wheat;
    background-color: var(--S-list-background);
}

/*语言提醒*/
.b3-typography .code-block .protyle-action .protyle-action__language, .protyle-wysiwyg .code-block .protyle-action .protyle-action__language {
    font-size: 85%;
    color: wheat;
    margin-top: -4px;
	padding-left: 2em;
}
/* 设置顶部三个mac按钮样式 */
.code-block::after {
    content: ' ';
    position: absolute;
    background: #fa625c;
    box-shadow: 23px 0 #fdbc40, 45px 0 #35cd4b;
    border-radius: 7px;
    top: 10px;
    left: 15px;
    height: 12px;
    width: 12px;
    z-index: 1;
}

属性固定

代码语言：javascript复制

.protyle-wysiwyg [data-node-id][fold="1"]:not(.li):not([data-type="NodeHeading"]) .protyle-attr {
    opacity: 1;
    transform: translateY(100%);
}

.protyle-attr>div:not(.protyle-attr--refcount) {
    margin: 0 4px;
    line-height: 16px;
    color: #bc9638;
    min-width: 12px;
    padding-right: 65px;
    font-weight: bold;
}

写味代码块Light配色设置

代码语言：javascript复制

/*代码块颜色*/
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}
/*!Theme: a11y-dark
  Author: @ericwbailey
  Maintainer: @ericwbailey
  Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css*/
.hljs{background:#2b2b2b;color:#f8f8f2}.hljs-comment,.hljs-quote{color:#d4d0ab}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#ffa07a}.hljs-built_in,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#f5ab35}.hljs-attribute{color:gold}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#abe338}.hljs-section,.hljs-title{color:#00e0e0}.hljs-keyword,.hljs-selector-tag{color:#dcc6e0}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}@media screen and (-ms-high-contrast:active){.hljs-addition,.hljs-attribute,.hljs-built_in,.hljs-bullet,.hljs-comment,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-quote,.hljs-string,.hljs-symbol,.hljs-type{color:highlight}.hljs-keyword,.hljs-selector-tag{font-weight:700}}

/*代码块背景设置*/
.b3-typography div.hljs, .protyle-wysiwyg div.hljs {
    background: #2e2d2d;
    padding: 30px 10px 22px 10px;
}

/*行号背景设置*/
.b3-typography .code-block, .protyle-wysiwyg .code-block {
    position: relative;
    padding: 0;
    margin: 1em 0;
    display: flex;
    flex-direction: row-reverse;
    background-color: #302d2d;
}

/*复制按钮代码颜色*/
.code-block .protyle-action .protyle-action__copy, .code-block .protyle-action .protyle-action__menu {
    margin-top: -3px;
    color: wheat;
    background-color: var(--S-list-background);
}

/*行数颜色*/
.protyle-linenumber__rows span::before {
    color: #ffffffad;
}

/*语言提醒*/
.b3-typography .code-block .protyle-action .protyle-action__language, .protyle-wysiwyg .code-block .protyle-action .protyle-action__language {
    font-size: 85%;
    color: wheat;
    margin-top: -4px;
	padding-left: 2em;
}
/* 设置顶部三个mac按钮样式 */
.code-block::after {
    content: ' ';
    position: absolute;
    background: #fa625c;
    box-shadow: 23px 0 #fdbc40, 45px 0 #35cd4b;
    border-radius: 7px;
    top: 10px;
    left: 15px;
    height: 12px;
    width: 12px;
    z-index: 1;
}

标题居中

代码语言：javascript复制

.protyle-title__input {
    text-align: center;
}

头图半透明

代码语言：javascript复制

/*cssInJS*/
/*题头图透明遮罩*/ 
.protyle-background__img{
-webkit-mask: linear-gradient( #000000 ,#000000,transparent);
}

行间距调整

代码语言：javascript复制

.protyle-wysiwyg>.p {
 	line-height: 2.3;  /*段落块的行间距，段间距的话前面该改成margin*/
 }

隐藏大纲前面的块标记 H

代码语言：javascript复制

.sy__outline .b3-list-item__graphic {
    display: none;
}

文档树块间距

代码语言：javascript复制

.b3-list-item {
    line-height: 35px !important;
    min-height: 28px;
    padding: 0 4px;
    display: flex;
    cursor: pointer;
    align-items: center;
    position: relative;
    background-color: rgba(0,0,0,0);
    text-align: left;
    border: 0;
    color: var(--b3-theme-on-background);
    margin: 1px 8px;
}

.b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq {
    padding: 4px;
    color: black;
    border-left: 0.25em solid #ffffff;
    background-color: var(--b3-list-hover);
    margin: 4px 0;
}

代码块字体大小设置

代码语言：javascript复制

.b3-typography .hljs, .protyle-wysiwyg .hljs {
    border-radius: var(--b3-border-radius);
    padding: 1.6em 4px;
    font-size: 13px !important;
    overflow: auto;
    font-family: var(--b3-font-family-code);
    min-height: 22px !important;
    overflow-x: overlay;
    tab-size: 4;
    flex: 1;
}

写味引用字体颜色

代码语言：javascript复制

.b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq {
    padding: 4px;
    color: #EBEBEB;
    border-left: 0.25em solid #ffffff;
    background-color: var(--b3-list-hover);
    margin: 4px 0;
}

笔记 action background block code

0 人点赞