思源笔记—代码片段
Vue 引用主题样式
.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 [: ;}
粉色小屋代码块美化
/*代码块颜色*/
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}
/*!Theme: a11y-darkAuthor: @ericwbaileyMaintainer: @ericwbaileyBased 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;
}
网站引用字体颜色
.protyle-wysiwyg [data-node-id] span[data-type~=a] {color: #b54040;border-bottom: 1px solid var(--b3-border-color);
}
写味代码块美化
/*代码块颜色*/
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}
/*!Theme: a11y-darkAuthor: @ericwbaileyMaintainer: @ericwbaileyBased 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;
}
属性固定
.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配色设置
/*代码块颜色*/
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}
/*!Theme: a11y-darkAuthor: @ericwbaileyMaintainer: @ericwbaileyBased 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;
}
标题居中
.protyle-title__input {text-align: center;
}
头图半透明
/*cssInJS*/
/*题头图透明遮罩*/
.protyle-background__img{
-webkit-mask: linear-gradient( #000000 ,#000000,transparent);
}
行间距调整
.protyle-wysiwyg>.p {line-height: 2.3; /*段落块的行间距，段间距的话前面该改成margin*/}
隐藏大纲前面的块标记 H
.sy__outline .b3-list-item__graphic {display: none;
}
文档树块间距
.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;
}
代码块字体大小设置
.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;
}
写味引用字体颜色
.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;
}
