标签：片段 code 思源 color 笔记 protyle hljs background b3
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-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;
}
网站引用字体颜色
.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-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;
}
属性固定
.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-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;
}
标题居中
.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;
}
标签：片段,
code,
思源,
color,
笔记,
protyle,
hljs,
background,
b3
From： https://www.cnblogs.com/NorthPoet/p/18016127/siyuan-note-code-fragment-r6b0m