思源笔记常用代码片段

背景色设置

:root {
    --b3-font-background1: #423a3a !important;
    --b3-font-background2: #4b3722 !important;
    --b3-font-background3: #203854c2 !important;
    --b3-font-background4: #2c5438a3 !important;
    --b3-font-background5: #4c525778 !important;
    --b3-font-background6: #1b3f758a !important;
    --b3-font-background7: #664a1c73 !important;
    --b3-font-background8: #5b1d1770 !important;
    --b3-font-background9: #541b3594 !important;
    --b3-font-background10: #6b2f6b70 !important;
    --b3-font-background11: #2f4c264f!important;
    --b3-font-background12: #72390f54 !important;
    --b3-font-background13: #3c3c3cd9 !important;
}

文字加粗颜色

.b3-typography strong, .b3-typography span[data-type~=strong], .protyle-wysiwyg strong, .protyle-wysiwyg span[data-type~=strong] {
    font-weight: 500;
    color: #73a6ff;
}

引用块美化

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

底部栏颜色

.status {
    background-color: #3C3C3C;
}

.status * {
    color: #Dadada;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Cascadia Mono', 'Cascadia Code', 'Microsoft YaHei UI';
}

网址链接

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

题头图

.protyle-background__img {
opacity:1 !important;
}

引用快字体颜色

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

修改图片亮度

.b3-typography .img, .protyle-wysiwyg .img {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    margin: 0 auto;
    max-width: 100%;
    user-select: none;
    word-break: keep-all;
    white-space: nowrap;
    filter: brightness(0.75);
}

大纲字体大小

.fn__flex-column.layout__dockr .file-tree {
  font-size: 13px !important;
}

代码块字体样式

.b3-typography .hljs, .protyle-wysiwyg .hljs {
    font-family: Consolas !important;
}

.hljs-comment {
    font-size: 13px;
}

钉住的同时显示 icon 和标题 CSS 片段

/* 钉住的同时显示 icon 和标题 CSS片段 */
.layout-tab-bar .item.item--pin .item__text {
    width: auto;
    max-width: none;
    display: flex !important;
}

类似 logseq 的层次子弹线 CSS 片段

/* 类似 logseq 的层次子弹线 CSS片段 */
/* REF https://github.com/svchord/Rem-Craft */
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.protyle-action{
    color:rgb(70, 110, 220);;
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.protyle-action svg{
    margin:0;
    width:16px;
    height:16px;
    padding:0px 0px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li::after{
    content:"";
    display:block;
    position:absolute;
    pointer-events:none;
    width:34px;
    left:-18px;
    top:-20px;
    border-style:solid;
    border-color:rgb(70, 110, 220);;
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:not(:has(.block-focus))::after{
    bottom:-2px;
    border-width:0 0 0 2px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{
    height:38px;
    border-radius:0 0 0 8px;
    border-width:0 0 2px 2px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)~.li:not(:has(.block-focus))::after{
    border-color:rgba(0,0,0,0)
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li[data-subtype=o]::after{
    width:24px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>.list:has(.block-focus)>.li[data-subtype=t]::after{
    width:28px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id]::after{
    content:"";
    display:block;
    position:absolute;
    pointer-events:none;
    width:34px;
    left:-18px;
    top:-20px;
    border-style:solid;
    border-color:rgb(70, 110, 220);
    top:20px;
    height:calc(100% + 4px);
    border-width:0 0 0 2px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id]:has(+.list)::after{
    height:auto;
    bottom:0
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id][data-type=NodeHeading]::after{
    top:0;
    height:185%
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].list:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].list:has(.block-focus)~[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].bq:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].bq:has(.block-focus)~[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].sb:has(.block-focus)::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus)>[data-node-id].sb:has(.block-focus)~[data-node-id]::after{
    border-color:rgba(0,0,0,0)
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[fold="1"]>[data-node-id]::after,.protyle-wysiwyg [data-node-id].li:has(.block-focus):has(>.block-focus)>[data-node-id]::after{
    border-color:rgba(0,0,0,0)
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=o]:has(.block-focus)>.list:has(.block-focus)>.li::after{
    top:-10px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=o]:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{
    height:28px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.protyle-action{
    color:rgb(70, 110, 220);;
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.protyle-action svg{
    margin:0;
    width:14px;
    height:14px;
    padding:0px 0px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.list:has(.block-focus)>.li::after{
    top:-14px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus)>.list:has(.block-focus)>.li:has(.block-focus)::after{
    height:32px
}
.protyle-wysiwyg [data-node-id].li:has(.block-focus)[data-subtype=t]:has(.block-focus).protyle-task--done>.list:has(.block-focus)>.li::after{
    border-color:rgba(139, 139, 139)
}

类似 logseq 的层次子弹线 JS 片段

/* 类似 logseq 的层次子弹线 JS片段 */
/**
 * 获得指定块位于的编辑区
 * @params {HTMLElement}
 * @return {HTMLElement} 光标所在块位于的编辑区
 * @return {null} 光标不在块内
 */
function getTargetEditor(block) {
    while (block != null && !block.classList.contains('protyle-wysiwyg')) block = block.parentElement;
    return block;
}

/**
 * 获得焦点所在的块
 * @return {HTMLElement} 光标所在块
 * @return {null} 光标不在块内
 */
function getFocusedBlock() {
    if (document.activeElement.classList.contains('protyle-wysiwyg')) {
        let block = window.getSelection()?.focusNode?.parentElement; // 当前光标
        while (block != null && block.dataset.nodeId == null) block = block.parentElement;
        return block;
    }
}

function focusHandler() {
    /* 获取当前编辑区 */
    let block = getFocusedBlock(); // 当前光标所在块
    /* 当前块已经设置焦点 */
    if (block?.classList.contains(`block-focus`)) return;

    /* 当前块未设置焦点 */
    const editor = getTargetEditor(block); // 当前光标所在块位于的编辑区
    if (editor) {
        editor.querySelectorAll(`.block-focus`).forEach((element) => element.classList.remove(`block-focus`));
        block.classList.add(`block-focus`);
        // setSelector(block);
    }
}

function bulletMain() {
    // 跟踪当前所在块
    window.addEventListener('mouseup', focusHandler, true);
    window.addEventListener('keyup', focusHandler, true);
}

(async () => {
    bulletMain();
    console.log('加载子弹线成功')
})();

去除图片后的多余空行 CSS 片段

/* 去除图片后的多余空行 CSS片段 */
.b3-typography .img:not([style]), .protyle-wysiwyg .img:not([style]) {
   display:inline-block;
}

代码块字体设置

.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;
}

虚线备注

/* 虚线备注 CSS片段 https://github.com/TCOTC/siyuan-css-dashed-line-memo */
.b3-typography span[data-type~=inline-memo], .protyle-wysiwyg span[data-type~=inline-memo] {
    background-color: transparent;
    border-bottom: 2px dashed var(--b3-theme-primary) !important;
}

隐藏大纲前面的块标记 H

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

行间距

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

文档树块间距

.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;
}

标题居中

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

plugin-custom-fonts-style

/* Twemoji Mozilla: https://github.com/mozilla/twemoji-colr */
@font-face {
    font-family: "Twemoji Mozilla";
    font-style: normal;
    src: url("plugins/custom-fonts/static/fonts/Twemoji.Mozilla/Twemoji.Mozilla-0.7.0.ttf");
}


:root {
    --b3-font-family-emoji: "Twemoji Mozilla", "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Noto Color Emoji", "Android Emoji";
}