登录 注册

[css] 思源笔记个人 CSS 样式分享 （第三版）

第二版链接：[css] 文本配色 css 样式 （升级版），附带 挖空块 和 伪代码块 - 链滴

第三版更新内容

  • 支持对 LaTeX 公式中的颜色进行重映射，暗色模式下也可以正常显示
  • 标题前增加了标题序号，但不适用于 引述/callout 中的标题
  • 对 新更新的 Callout 增加了边框样式
  • 更新了分隔线的样式
  • 增加了有序列表/无序列表 的样式 （借鉴自 本论坛另一用户的思路）
  • 增加了亮色模式下的护眼底色

截图：

文本样式：

image.png

image.png

样式 13 为「挖空块」，鼠标移动或点击即可显示隐藏内容

image.png

样式 12 为 「伪代码块」，可以对里面的文本进行高亮等格式化操作：

image.png

数据库选择项的样式：

image.png

引述块和 Callout 的样式：

image.png

image.png

标题、有序列表、无序列表的样式：

image.png

image.png

表格样式：

image.png

Tag 和 行内代码块样式：

image.png

image.png

公式颜色样式：

image.png

image.png

代码：

/*------------- 思源笔记 个人样式 -----------*/

/** 页面护眼色（仅亮色模式下） */
:root[data-theme-mode=light]{
	--b3-theme-background: #fffbf1 !important;
}

/** 变量定义 */
:root[data-theme-mode=light] {
    /* 文本颜色样式 */
    --b3-font-color1:  #afafaf !important;
    --b3-font-color2:  #da0000 !important;
    --b3-font-color3:  #e7613f !important;
    --b3-font-color4:  #a79600 !important;
    --b3-font-color5:  #5d8f00 !important;
    --b3-font-color6:  #008d13 !important;
    --b3-font-color7:  #00949e !important;
    --b3-font-color8:  #0068f1 !important;
    --b3-font-color9:  #6e22e9 !important;
    --b3-font-color10: #dc31e2 !important;
    --b3-font-color11: #000000 !important;
    --b3-font-color12: #ffffff !important; /* 特殊：伪代码块 */
    --b3-font-color13: #000000; /* 特殊：挖空 */
    --b3-database-font-color11: #FFFFFF  !important;
  
    --b3-font-background1:  #cacaca !important;
    --b3-font-background2:  #ffb7c4 !important;
    --b3-font-background3:  #ffd4b7 !important;
    --b3-font-background4:  #fff3be !important;
    --b3-font-background5:  #d9ff94 !important;
    --b3-font-background6:  #bef5bc !important;
    --b3-font-background7:  #b1fffb !important;
    --b3-font-background8:  #b0d0ff !important;
    --b3-font-background9:  #d9c2ff !important;
    --b3-font-background10: #fbb5fd !important;
    --b3-font-background11: #FFFFFF !important;
    --b3-font-background12: #007500 !important; /* 特殊：伪代码块 */
    --b3-font-background13: #1052b4 !important; /* 特殊：挖空 */
    --b3-database-font-background11: #b40000 !important;
    --b3-database-font-background14: #8a5e00 !important;
  
    /* 4 种样式中文字的颜色 */
    --b3-card-error-color:   #740000 !important;
    --b3-card-warning-color: #4d4900 !important;
    --b3-card-info-color:    #003e79 !important;
    --b3-card-success-color: #005504 !important;
    --b3-card-error-background:   rgba(255, 205, 205, 1) !important;
    --b3-card-warning-background: rgba(255, 255, 175, 1) !important;
    --b3-card-info-background:    rgba(211, 255, 255, 1) !important;
    --b3-card-success-background: rgba(211, 255, 207, 1) !important;
  
    /* 其他 */
    /* --b3-search-highlight: #FFFF00 !important */;
    --test-font-color-default: #000000 !important; /* 自定义变量，用于数据库中的单选/多选项颜色 */
  
    --test-highlight-border-color: rgba(0, 0, 0, 0.45) !important; /* 自定义变量，用于高亮边框颜色 */
    --test-highlight-shadow-color: rgba(0, 0, 0, 0.322) !important; /* 自定义变量，用于高亮阴影颜色 */
    --test-highlight-text-color: #000000 !important; /* 自定义变量，用于高亮文字颜色 */
  
    --test-inline-code-color: #003881 !important; /* 自定义变量，用于行内代码颜色 */
    --test-inline-code-border-color: rgba(0, 0, 0, 0.342) !important; /* 自定义变量，用于行内代码边框颜色 */
    --test-inline-code-shadow-color: rgba(0, 0, 0, 0.281) !important; /* 自定义变量，用于行内代码阴影颜色 */
    --test-inline-code-background: #66faff13 !important;
  
    --test-code-background: #caf4ff21 !important; /* 自定义变量，用于行内代码背景颜色 */
    --test-code-border-color: rgba(0, 68, 114, 1) !important; /* 自定义变量，用于行内代码边框颜色 */
    --test-code-shadow-color: rgba(0, 88, 138, 0.281) !important; /* 自定义变量，用于行内代码阴影颜色 */
    --test-code-color: #000000 !important; /* 自定义变量，用于伪代码块文字颜色 */
  
    --test-database-option-border-color: rgba(0, 0, 0, 0.55) !important; /* 自定义变量，用于数据库选项边框颜色 */
  
    --test-quote-background-color: #9e9e9e18 !important; /* 自定义变量，用于引用块背景颜色 */
    --test-quote-font-color: #001947 !important;
    --test-quote-border-color: rgba(0, 0, 0, 0.699) !important; /* 自定义变量，用于引用块边框颜色 */
    --test-quote-shadow-color: rgba(0, 0, 0, 0.521) !important; /* 自定义变量，用于引用块阴影颜色 */
    --test-quote-left-color: #3b3b3b83 !important; /* 自定义变量，用于引用块左侧竖线颜色 */
  
    --test-table-border-color: rgba(0, 0, 0, 0.623) !important; /* 自定义变量，用于表格外框颜色 */
    --test-table-cell-border-color: rgba(0, 0, 0, 0.171) !important; /* 自定义变量，用于表格单元格边框颜色 */
    --test-table-text-color: #000000 !important; /* 自定义变量，用于表格文字颜色 */
    --test-table-first-row-background: #e0ffd6 !important; /* 自定义变量，用于表格表头背景颜色 */
    --test-table-odd-row-background: #ffffff !important; /* 自定义变量，用于表格奇数行背景颜色 */
    --test-table-even-row-background: #f8f8f8 !important; /* 自定义变量，用于表格偶数行背景颜色 */
  
    --test-tag-background-color: #003d83 !important;
    --test-tag-text-color: #ffffff !important;
    --test-tag-hash-color: #00ffff !important;
  
    --test-splitter-color: #0070a3c9 !important;
  
    --test-heading-color-1: #000000 !important;
    --test-heading-color-2: #006edb !important;
    --test-heading-color-3: #00a000 !important;
    --test-heading-color-4: #e77b00 !important;
    --test-heading-color-5: #8c00ff !important;
    --test-heading-color-6: #6b6b6b !important;
  
    --test-list-color-1: #000000 !important;
	--test-list-color-2: #0080ff !important;
	--test-list-color-3: #00b600 !important;
	--test-list-color-4: #fd8700 !important;
	--test-list-color-5: #be6fff !important;
    --test-list-color-6: #888888 !important;
  
    --test-callout-note-background: #50d6ff15 !important;
    --test-callout-note-border: #0091cfff !important;
    /* --test-callout-note-shadow: #0077b386 !important; */
    --test-callout-tip-background: #6fff5915!important;
    --test-callout-tip-border: #00a334ff !important;
    --test-callout-important-background: #f478ff15 !important;
    --test-callout-important-border: #c900dbff !important;
    --test-callout-warning-background: #ffe77c15 !important;
    --test-callout-warning-border: #815f00ff !important;
    --test-callout-caution-background: #ff747418 !important;
    --test-callout-caution-border: #dd0000ff !important;
  

  
}
:root[data-theme-mode=dark] {
    /* 文本颜色样式 */
    --b3-font-color1:  #a0a0a0  !important;
    --b3-font-color2:  #ff5252  !important;
    --b3-font-color3:  #ffa46f  !important;
    --b3-font-color4:  #fdfa54  !important;
    --b3-font-color5:  #c9fc69  !important;
    --b3-font-color6:  #2aff16  !important;
    --b3-font-color7:  #2fd5ff  !important;
    --b3-font-color8:  #7499ff  !important;
    --b3-font-color9:  #ba7dff  !important;
    --b3-font-color10: #ea47ff  !important;
    --b3-font-color11: #ffffff  !important;
    --b3-font-color12: #000000  !important; /* 特殊：伪代码块 */
    --b3-font-color13: #000000; /* 特殊：挖空 */
    --b3-database-font-color11: #000000  !important;
  
    --b3-font-background1:  #5f5f5f !important;
    --b3-font-background2:  #862828 !important;
    --b3-font-background3:  #884d2b !important;
    --b3-font-background4:  #7a6315 !important;
    --b3-font-background5:  #5b8115 !important;
    --b3-font-background6:  #158d15 !important;
    --b3-font-background7:  #157f83 !important;
    --b3-font-background8:  #1952a8 !important;
    --b3-font-background9:  #6138a3 !important;
    --b3-font-background10: #86267d!important;
    --b3-font-background11: #000000 !important;
    --b3-font-background12: #00FF00 !important; /* 特殊：伪代码块 */
    --b3-font-background13: #00FFFF !important; /* 特殊：挖空 */
    --b3-database-font-background11: #ff8e8e !important;
    --b3-database-font-background14: #FFFF00 !important;
  
    /* 4种样式中文字的颜色 */
    --b3-card-error-color:   #ffbfbf !important;
    --b3-card-warning-color: #ffff77 !important;
    --b3-card-info-color:    #4fffff !important;
    --b3-card-success-color: #8fff8f !important;
    --b3-card-error-background:   rgba(94, 0, 0, 1) !important;
    --b3-card-warning-background: rgba(80, 80, 0, 1) !important;
    --b3-card-info-background:    rgba(0, 66, 66, 1) !important;
    --b3-card-success-background: rgba(6, 75, 0, 1) !important;
  
    /* 其他 */
    /* --b3-search-highlight: #FFFF00 !important */;
    --test-font-color-default: #ffffff !important; /* 自定义变量，用于数据库中的单选/多选项颜色 */
  
    --test-highlight-border-color: rgba(255, 255, 255, 0.65) !important; /* 自定义变量，用于高亮边框颜色 */
    --test-highlight-shadow-color: rgba(255, 255, 255, 0) !important; /* 自定义变量，用于高亮阴影颜色 */
    --test-highlight-text-color: #ffffff !important; /* 自定义变量，用于高亮文字颜色 */
  
  
    --test-inline-code-color: #afd2ff !important; /* 自定义变量，用于行内代码颜色 */
    --test-inline-code-border-color: rgba(255, 255, 255, 0.39) !important; /* 自定义变量，用于行内代码边框颜色 */
    --test-inline-code-shadow-color: rgba(255, 255, 255, 0) !important; /* 自定义变量，用于行内代码阴影颜色 */
    --test-inline-code-background: #66faff13 !important;
  
    --test-code-background: #00689425 !important; /* 自定义变量，用于行内代码背景颜色 */
    --test-code-border-color: #00ccff !important; /* 自定义变量，用于行内代码边框颜色 */
    --test-code-shadow-color: rgba(0, 218, 247, 0.667) !important; /* 自定义变量，用于行内代码阴影颜色 */
    --test-code-color: #ffffff !important; /* 自定义变量，用于伪代码块文字颜色 */
  
    --test-database-option-border-color: rgba(255, 255, 255, 0.55) !important; /* 自定义变量，用于数据库选项边框颜色 */
  
    --test-quote-background-color: #83838327 !important; /* 自定义变量，用于引用块背景颜色 */
    --test-quote-font-color: #e8f0ff !important;
    --test-quote-border-color: rgba(255, 255, 255, 0.801) !important; /* 自定义变量，用于引用块边框颜色 */
    --test-quote-shadow-color: rgba(255, 255, 255, 0.438) !important; /* 自定义变量，用于引用块阴影颜色 */
    --test-quote-left-color: #cccccc9d !important; /* 自定义变量，用于引用块左侧竖线颜色 */
  
    --test-table-border-color: rgba(255, 255, 255, 0.705) !important; /* 自定义变量，用于表格外框颜色 */
    --test-table-cell-border-color: rgba(255, 255, 255, 0.24) !important; /* 自定义变量，用于表格单元格边框颜色 */
    --test-table-text-color: #FFFFFF !important; /* 自定义变量，用于表格文字颜色 */
    --test-table-first-row-background: #004b17 !important; /* 自定义变量，用于表格表头背景颜色 */
    --test-table-odd-row-background: #161616 !important; /* 自定义变量，用于表格奇数行背景颜色 */
    --test-table-even-row-background: #292929 !important; /* 自定义变量，用于表格偶数行背景颜色 */

    --test-tag-background-color: #00f3fc !important;
    --test-tag-text-color: #000000 !important;
    --test-tag-hash-color: #005fdb !important;
  
    --test-splitter-color: #51e5ffd3 !important;
  
    --test-heading-color-1: #ffffff !important;
    --test-heading-color-2: #52b1ff !important;
    --test-heading-color-3: #00cc00 !important;
    --test-heading-color-4: #f38200 !important;
    --test-heading-color-5: #bb67ff !important;
    --test-heading-color-6: #a1a1a1 !important;
  
    --test-list-color-1: #d1d1d1 !important;
	--test-list-color-2: #52b1ff !important;
	--test-list-color-3: #00cc00 !important;
	--test-list-color-4: #f38200 !important;
	--test-list-color-5: #bb67ff !important;
    --test-list-color-6: #919191 !important;
  
    --test-callout-note-background: #50d6ff15 !important;
    --test-callout-note-border: #2abfffff !important;
    /* --test-callout-note-shadow: #0077b386 !important; */
    --test-callout-tip-background: #6fff5915!important;
    --test-callout-tip-border: #00c940ff !important;
    --test-callout-important-background: #f478ff15 !important;
    --test-callout-important-border: #ee35ffff !important;
    --test-callout-warning-background: #ffe77c15 !important;
    --test-callout-warning-border: #f3cf00ff !important;
    --test-callout-caution-background: #ff747418 !important;
    --test-callout-caution-border: #ff0000ff !important;
}

/*
    如需对暗色主题单独设置，在 .样式 前加个 `html[data-theme-mode="dark"]` 即可
*/


/** 字体颜色 */
[style*="var(--b3-font-color1)"][style*="color"],
[style*="var(--b3-font-color2)"][style*="color"],
[style*="var(--b3-font-color3)"][style*="color"],
[style*="var(--b3-font-color4)"][style*="color"],
[style*="var(--b3-font-color5)"][style*="color"],
[style*="var(--b3-font-color6)"][style*="color"],
[style*="var(--b3-font-color7)"][style*="color"],
[style*="var(--b3-font-color8)"][style*="color"],
[style*="var(--b3-font-color9)"][style*="color"],
[style*="var(--b3-font-color10)"][style*="color"],
[style*="var(--b3-font-color11)"][style*="color"]
{
    font-weight: bold !important;
}


/** ==高亮== 颜色*/
span[data-type="mark"] {
    font-weight: bold;
    text-decoration: none !important;
    padding: 0.5px 1.0px 0.5px 1.0px;
    border-radius: 4px;
    margin: 0px 1.0px 0px 1.0px;
}
html[data-theme-mode="light"] span[data-type="mark"] {
    color: rgb(240, 0, 0) !important;
    background-color: #FFFF00 !important;
    border: 1px solid rgba(0,0,0,0.55);   /* 用固定灰色；也可以改成 currentColor */
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
html[data-theme-mode="dark"] span[data-type="mark"] {
    color: #FFFF00 !important;
    background-color: #662400FF !important;
    border: 1px solid rgba(255, 252, 58, 0.85);
    box-shadow: 0 1px 2px rgba(255,255,255,0.25);
}

/** 样式颜色 */
[style*="var(--b3-card-error-background)"],
[style*="var(--b3-card-warning-background)"],
[style*="var(--b3-card-info-background)"],
[style*="var(--b3-card-success-background)"] {
    border: 1px solid var(--test-highlight-border-color);
    box-shadow: 1px 1px 2px var(--test-highlight-shadow-color);
    padding: 0.5px 1.2px 0.5px 1.2px;
    border-radius: 4px;
    margin: 0px 1.0px 0px 1.0px;
    /* font-weight: bold !important; */
}

/** 高亮颜色 */
[style*="var(--b3-font-background1)"][style*="background"],
[style*="var(--b3-font-background2)"][style*="background"],
[style*="var(--b3-font-background3)"][style*="background"],
[style*="var(--b3-font-background4)"][style*="background"],
[style*="var(--b3-font-background5)"][style*="background"],
[style*="var(--b3-font-background6)"][style*="background"],
[style*="var(--b3-font-background7)"][style*="background"],
[style*="var(--b3-font-background8)"][style*="background"],
[style*="var(--b3-font-background9)"][style*="background"],
[style*="var(--b3-font-background10)"][style*="background"],
[style*="var(--b3-font-background11)"][style*="background"]
{
    /* border: 1px solid var(--test-highlight-border-color); */
    border-top: 1px solid var(--test-highlight-border-color);
    border-bottom: 1px solid var(--test-highlight-border-color);
    border-left: none;
    border-right: none;
    box-shadow: 0 1px 2px var(--test-highlight-shadow-color);
    padding: 1.0px 1.0px 1.0px 1.0px;
    /* border-radius: 4px; */
    /* margin: 0px 1.0px 0px 1.0px; */
    /*font-weight: bold;*/
    /* color: var(--test-highlight-text-color) !important; */
}


/* 伪代码块 */
[style*="var(--b3-font-background12)"][style*="color"] {
    font-family: var(--b3-font-family-code) !important;
    font-size: 85% !important;
    border-radius: 6px;
  
    margin-top: 3px !important;
    margin-bottom: 3px !important;
  
    padding-left: 13px !important;
    padding-right: 13px !important;
    padding-top: 8px !important;
    padding-bottom: 5px !important;
  
    border: 1.2px solid var(--test-code-border-color);
    line-height: 1.4;
    background-color: var(--test-code-background) !important;
    box-shadow: var(--test-code-shadow-color) 2px 2px 2px, var(--test-code-shadow-color) 0px 0px 4px;
    color: var(--test-code-color) !important;
}


/* 挖空配色 */
[style*="var(--b3-font-background13)"][style*="color"] {
    padding: 0.5px 1.0px 0.5px 1.0px;
    color: transparent !important;
    background:linear-gradient(145deg, #909090, #e4e4e4);
    /* cursor: pointer; */
    border-radius: 4px;
    margin: 0px 1.0px 0px 1.0px;
    box-shadow: rgba(0, 0, 0, 0.667) 1.4px 1.4px 1px, rgba(0, 0, 0, 0.533) 0px 0px 3px;
    transition: linear 0.8s !important;
    white-space: pre-wrap;
}
[style*="var(--b3-font-background13)"][style*="color"]:hover{
    color: var(--b3-font-color13) !important;
    transition-duration: 0.2s !important;
}
[style*="var(--b3-font-background13)"][style*="color"]:active{
    color: var(--b3-font-color13) !important;
    transition-duration: 0.2s !important;
}


/** 数据库 */
.custom-attr__avvalue .b3-chip,
.av__cell .b3-chip,
.av__panel .b3-chip,
.b3-menu__label .b3-chip
[data-name="av-col-option"] .color__square,
.av__group-title .b3-chip {
    padding: 1px 3px !important;
    margin: 1px 1px !important;
    border-radius: 4px !important;
    font-weight: normal !important;
    border: 1px solid var(--test-database-option-border-color) !important;
    color:var(--test-font-color-default) !important;
    line-height: 1.0 !important;
    box-shadow: none !important;
}

/* color 1 到 color 10 必须这样手动指定，否则在部分第三方主题下会发生混乱 */
.custom-attr__avvalue .b3-chip[style*="color1)"],
.av__cell .b3-chip[style*="color1)"],
.av__panel .b3-chip[style*="color1)"],
[data-name="av-col-option"] .color__square[style*="color1)"],
.b3-menu__label .b3-chip[data-color="1"],
.av__group-title .b3-chip[style*="color1)"]{
    background-color: var(--b3-font-background1) !important;
    color: var(--test-font-color-default) !important;
}
.custom-attr__avvalue .b3-chip[style*="color2)"],
.av__cell .b3-chip[style*="color2)"],
.av__panel .b3-chip[style*="color2)"],
[data-name="av-col-option"] .color__square[style*="color2)"],
.b3-menu__label .b3-chip[data-color="2"],
.av__group-title .b3-chip[style*="color2)"]{
    background-color: var(--b3-font-background2) !important;
    color: var(--test-font-color-default) !important;
}
.custom-attr__avvalue .b3-chip[style*="color3)"],
.av__cell .b3-chip[style*="color3)"],
.av__panel .b3-chip[style*="color3)"],
[data-name="av-col-option"] .color__square[style*="color3)"],
.b3-menu__label .b3-chip[data-color="3"],
.av__group-title .b3-chip[style*="color3)"]{
    background-color: var(--b3-font-background3) !important;
    color: var(--test-font-color-default) !important;
}
.custom-attr__avvalue .b3-chip[style*="color4)"],
.av__cell .b3-chip[style*="color4)"],
.av__panel .b3-chip[style*="color4)"],
[data-name="av-col-option"] .color__square[style*="color4)"],
.b3-menu__label .b3-chip[data-color="4"],
.av__group-title .b3-chip[style*="color4)"]{
    background-color: var(--b3-font-background4) !important;
    color: var(--test-font-color-default) !important;
}
.custom-attr__avvalue .b3-chip[style*="color5)"],
.av__cell .b3-chip[style*="color5)"],
.av__panel .b3-chip[style*="color5)"],
[data-name="av-col-option"] .color__square[style*="color5)"],
.b3-menu__label .b3-chip[data-color="5"],
.av__group-title .b3-chip[style*="color5)"]{
    background-color: var(--b3-font-background5) !important;
    color: var(--test-font-color-default) !important;
}
.custom-attr__avvalue .b3-chip[style*="color6)"],
.av__cell .b3-chip[style*="color6)"],
.av__panel .b3-chip[style*="color6)"],
[data-name="av-col-option"] .color__square[style*="color6)"],
.b3-menu__label .b3-chip[data-color="6"],
.av__group-title .b3-chip[style*="color6)"]{
    background-color: var(--b3-font-background6) !important;
    color: var(--test-font-color-default) !important;
}
.custom-attr__avvalue .b3-chip[style*="color7)"],
.av__cell .b3-chip[style*="color7)"],
.av__panel .b3-chip[style*="color7)"],
[data-name="av-col-option"] .color__square[style*="color7)"],
.b3-menu__label .b3-chip[data-color="7"],
.av__group-title .b3-chip[style*="color7)"]{
    background-color: var(--b3-font-background7) !important;
    color: var(--test-font-color-default) !important;
}
.custom-attr__avvalue .b3-chip[style*="color8)"],
.av__cell .b3-chip[style*="color8)"],
.av__panel .b3-chip[style*="color8)"],
[data-name="av-col-option"] .color__square[style*="color8)"],
.b3-menu__label .b3-chip[data-color="8"],
.av__group-title .b3-chip[style*="color8)"]{
    background-color: var(--b3-font-background8) !important;
    color: var(--test-font-color-default) !important;
}
.custom-attr__avvalue .b3-chip[style*="color9)"],
.av__cell .b3-chip[style*="color9)"],
.av__panel .b3-chip[style*="color9)"],
[data-name="av-col-option"] .color__square[style*="color9)"],
.b3-menu__label .b3-chip[data-color="9"],
.av__group-title .b3-chip[style*="color9)"]{
    background-color: var(--b3-font-background9) !important;
    color: var(--test-font-color-default) !important;
}
.custom-attr__avvalue .b3-chip[style*="color10)"],
.av__cell .b3-chip[style*="color10)"],
.av__panel .b3-chip[style*="color10)"],
[data-name="av-col-option"] .color__square[style*="color10)"],
.b3-menu__label .b3-chip[data-color="10"],
.av__group-title .b3-chip[style*="color10)"]{
    background-color: var(--b3-font-background10) !important;
    color: var(--test-font-color-default) !important;
}
/* color 12/13 因默认样式中被重写作其他用途, color 11 是白底与样式 14 相同，故手动重写为深色底色 */
.custom-attr__avvalue .b3-chip[style*="color11)"],
.av__cell .b3-chip[style*="color11)"],
.av__panel .b3-chip[style*="color11)"],
[data-name="av-col-option"] .color__square[style*="color11)"],
.b3-menu__label .b3-chip[data-color="11"],
.av__group-title .b3-chip[style*="color11)"]{
    background-color: var(--b3-database-font-background11) !important;
    color: var(--b3-database-font-color11) !important;
    border: 1px solid var(--b3-database-font-background11) !important;
}
.custom-attr__avvalue .b3-chip[style*="color12)"],
.av__cell .b3-chip[style*="color12)"],
.av__panel .b3-chip[style*="color12)"],
[data-name="av-col-option"] .color__square[style*="color12)"],
.b3-menu__label .b3-chip[data-color="12"],
.av__group-title .b3-chip[style*="color12)"]{
    background: solid var(--b3-font-background12) !important;
    background-color: var(--b3-font-background12) !important;
    color: var(--b3-font-color12) !important;
    border: 1px solid var(--b3-font-background12) !important;
    font-family: revert !important;
    font-size: revert !important;
}
.custom-attr__avvalue .b3-chip[style*="color13)"],
.av__cell .b3-chip[style*="color13)"],
.av__panel .b3-chip[style*="color13)"],
[data-name="av-col-option"] .color__square[style*="color13)"],
.b3-menu__label .b3-chip[data-color="13"],
.av__group-title .b3-chip[style*="color13)"]{
    background: solid var(--b3-font-background13) !important;
    background-color: var(--b3-font-background13) !important;
    color: var(--b3-database-font-color11) !important;
    transition: none !important;
    border: 1px solid var(--b3-font-background13) !important;
}
.custom-attr__avvalue .b3-chip[style*="color14)"],
.av__cell .b3-chip[style*="color14)"],
.av__panel .b3-chip[style*="color14)"],
[data-name="av-col-option"] .color__square[style*="color14)"],
.b3-menu__label .b3-chip[data-color="14"],
.av__group-title .b3-chip[style*="color14)"]{
    background: solid var(--b3-database-font-background14) !important;
    background-color: var(--b3-database-font-background14) !important;
    color: var(--b3-database-font-color11) !important;
    transition: none !important;
    border: 1px solid var(--b3-database-font-background14) !important;
}


/** 引述块 */
.protyle-wysiwyg .bq {
    background: var(--test-quote-background-color);
    color: var(--test-quote-font-color) !important;
    margin-top: 2.5px !important;
    margin-bottom: 2.5px !important;
    /* padding: 5px revert 5px revert; */
    border: 0.8px solid var(--test-quote-border-color);
    box-shadow:  1px 1px 2px var(--test-quote-shadow-color);
}
.protyle-wysiwyg .bq::before {
    background-color: var(--test-quote-left-color) !important;
    left: 3px !important;
    /* margin-left: 1px !important; */
    margin-right: 3px !important;
    width: 3.5px !important;
}

/** Callout 块 */
.protyle-wysiwyg div[data-type="NodeCallout"].callout[data-subtype="NOTE"] {
    background: var(--test-callout-note-background);
    color: var(--test-quote-font-color) !important;
    border: 0.8px solid var(--test-callout-note-border);
    box-shadow:  1px 1px 2px var(--test-quote-shadow-color);
    margin-top: 2.5px !important;
    margin-bottom: 2.5px !important;
}
.protyle-wysiwyg div[data-type="NodeCallout"].callout[data-subtype="TIP"] {
    background: var(--test-callout-tip-background);
    color: var(--test-quote-font-color) !important;
    border: 0.8px solid var(--test-callout-tip-border);
    box-shadow:  1px 1px 2px var(--test-quote-shadow-color);
    margin-top: 2.5px !important;
    margin-bottom: 2.5px !important;
}
.protyle-wysiwyg div[data-type="NodeCallout"].callout[data-subtype="IMPORTANT"] {
    background: var(--test-callout-important-background);
    color: var(--test-quote-font-color) !important;
    border: 0.8px solid var(--test-callout-important-border);
    box-shadow:  1px 1px 2px var(--test-quote-shadow-color);
    margin-top: 2.5px !important;
    margin-bottom: 2.5px !important;
}
.protyle-wysiwyg div[data-type="NodeCallout"].callout[data-subtype="WARNING"] {
    background: var(--test-callout-warning-background);
    color: var(--test-quote-font-color) !important;
    border: 0.8px solid var(--test-callout-warning-border);
    box-shadow:  1px 1px 2px var(--test-quote-shadow-color);
    margin-top: 2.5px !important;
    margin-bottom: 2.5px !important;
}
.protyle-wysiwyg div[data-type="NodeCallout"].callout[data-subtype="CAUTION"] {
    background: var(--test-callout-caution-background);
    color: var(--test-quote-font-color) !important;
    border: 0.8px solid var(--test-callout-caution-border);
    box-shadow:  1px 1px 2px var(--test-quote-shadow-color);
    margin-top: 2.5px !important;
    margin-bottom: 2.5px !important;
}

/** 行内代码 */
.fn__code, .b3-typography code:not(.hljs), .b3-typography span[data-type~=code], .protyle-wysiwyg code:not(.hljs), .protyle-wysiwyg span[data-type~=code]{
	color:var(--test-inline-code-color)  !important;
    background-color: var(--test-inline-code-background) !important;
    border: 1px solid var(--test-inline-code-border-color)  !important;
    box-shadow: 0 1px 2px var(--test-inline-code-shadow-color);
    margin: 0px 2.0px 0px 2.0px;
    padding: 0.4px 3.0px 0.4px 3.0px;
}

/** 代码块 */
.code-block {
    box-shadow: var(--test-code-shadow-color) 2px 2px 2px, var(--test-code-shadow-color) 0px 0px 4px;
    border: 1.2px solid var(--test-code-border-color);
    /* margin: 5px revert 5px revert;
    padding: 5px revert 5px revert; */
  
    margin-top: 3px !important;
    margin-bottom: 3px !important;
    background-color: var(--test-code-background) !important;
  
}
.protyle-wysiwyg div.hljs,
.b3-typography div.hljs {
    padding-top: 18px !important;
    padding-bottom: 5px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/** 表格样式 */
/* 表格整体外框 */
.protyle-wysiwyg table {
    border-collapse: collapse !important;
    border: 1px solid var(--test-table-border-color) !important;
    border-radius: 4px;
    overflow: hidden;
    box-shadow:  1px 1px 2px var(--test-quote-shadow-color);
}

/* 表格内部网格线 */
.protyle-wysiwyg table th,
.protyle-wysiwyg table td {
    border: 1.5px solid var(--test-table-cell-border-color) !important;
}

/* 表头 */
.protyle-wysiwyg table th {
    background-color: var(--test-table-first-row-background) !important;
    color: var(--test-table-text-color);
}
.protyle-wysiwyg table tr:nth-child(odd) {
    background-color: var(--test-table-odd-row-background) !important;
    color: var(--test-table-text-color);
}
.protyle-wysiwyg table tr:nth-child(even) {
    background-color: var(--test-table-even-row-background) !important;
    color: var(--test-table-text-color);
}



/** 标签 tag */
.protyle-wysiwyg span[data-type="tag"], .sy__outline span[data-type="tag"]{
	border-radius: 6px;
	padding:0px 4px 0px 4px !important;
    margin: 0px 2.0px 0px 2.0px !important;
	color: var(--test-tag-text-color) !important;
	border-bottom:none !important;
	background-color: var(--test-tag-background-color) !important;
    border: 1.0px solid var(--test-tag-background-color);
    font-size: 90% !important;
}
.protyle-wysiwyg span[data-type="tag"]::before, .sy__outline span[data-type="tag"]::before{
	content: "# ";
    color: var(--test-tag-hash-color) !important;
    font-weight: bold;
    font-size: 75% !important;
}
.export-img span[data-type="tag"]::before{
	content: "";
}

/** 公式块 */
.katex-display {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/* 覆盖 katex 颜色*/
.katex span[style*="color:gray"]   {color: var(--b3-font-color1) !important;}
.katex span[style*="color:red"]    {color: var(--b3-font-color2) !important;}
.katex span[style*="color:orange"] {color: var(--b3-font-color3) !important;}
.katex span[style*="color:yellow"],
.katex span[style*="color:brown"]  {color: var(--b3-font-color4) !important;}
.katex span[style*="color:olive"]  {color: var(--b3-font-color5) !important;}
.katex span[style*="color:lime"],
.katex span[style*="color:green"]  {color: var(--b3-font-color6) !important;}
.katex span[style*="color:cyan"],
.katex span[style*="color:teal"]   {color: var(--b3-font-color7) !important;}
.katex span[style*="color:blue"],
.katex span[style*="color:navy"]   {color: var(--b3-font-color8) !important;}
.katex span[style*="color:purple"] {color: var(--b3-font-color9) !important;}
.katex span[style*="color:magenta"],
.katex span[style*="color:pink"]   {color: var(--b3-font-color10) !important;}
.katex span[style*="color:black"]  {color: var(--b3-font-color11) !important;}
.katex span[style*="color:white"]  {color: var(--b3-font-color12) !important;}

.katex span[style*="background-color:"]    {color: var(--test-font-color-default) !important;}
/* .katex span[background*="red"]     {background-color: var(--b3-font-background2) !important;}
.katex span[background*="blue"]    {background-color: var(--b3-font-background8) !important;}
.katex span[background*="green"]   {background-color: var(--b3-font-background6) !important;}
.katex span[background*="yellow"]  {background-color: var(--b3-font-background4) !important;}
.katex span[background*="orange"]  {background-color: var(--b3-font-background3) !important;}
.katex span[background*="purple"]  {background-color: var(--b3-font-background9) !important;}
.katex span[background*="cyan"]    {background-color: var(--b3-font-background7) !important;}
.katex span[background*="magenta"],
.katex span[background*="pink"]    {background-color: var(--b3-font-background10) !important;}
.katex span[background*="gray"]    {background-color: var(--b3-font-background1) !important;} */


/** 分割线 */
.protyle-wysiwyg [data-node-id].hr>div:after {
    display: none;
}
.hr {
  border: none !important;
  position: relative;
  height: 4px;
  background: #00000000 !important;
  color: #00000000 !important;
  border-top: none !important;
  border-bottom: none !important;
}

.hr::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  height: 2px; /* 粗细 */
  transform: translateY(-50%);
  border-radius: 1px; /* 柔和一点 */
  /*box-shadow: rgba(0, 0, 0, 0.667) 1.4px 1.4px 1px*/;
  background-color: var(--test-splitter-color) !important;
}


/** 标题层级颜色 */
:root {
    --test-h1-padding-top: 30px !important;
    --test-h2-padding-top: 20px !important;
    --test-h3-padding-top: 10px !important;
    --test-h4-padding-top: 5px !important;
    --test-h5-padding-top: 2px !important;
    --test-h6-padding-top: 2px !important;
}
.protyle-wysiwyg div[data-type="NodeHeading"][data-subtype^="h"]:not(.bq *):not(.callout *) {
    position: relative;
    padding-top: 6px;
}
.protyle-wysiwyg div[data-type="NodeHeading"][data-subtype^="h"]:not(.bq *):not(.callout *)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
    pointer-events: none;
}

.protyle-wysiwyg [data-type="NodeHeading"][data-subtype="h1"] {
    color: var(--test-heading-color-1) !important;
}
.protyle-wysiwyg :is(.bq, .callout) div[data-type="NodeHeading"][data-subtype="h1"] {
    font-size: 20px !important;
}
.protyle-wysiwyg [data-type="NodeHeading"][data-subtype="h1"]:not(.bq *):not(.callout *) {
    padding-top: var(--test-h1-padding-top) !important;
}
.protyle-wysiwyg div[data-type="NodeHeading"][data-subtype="h1"]:not(.bq *):not(.callout *)::before {
    height: 3px;
    background: linear-gradient(to right, transparent, var(--test-heading-color-1)) !important;
    top: var(--test-h1-padding-top) !important;
}

.protyle-wysiwyg [data-type="NodeHeading"][data-subtype="h2"] {
    color: var(--test-heading-color-2) !important;
}
.protyle-wysiwyg :is(.bq, .callout) div[data-type="NodeHeading"][data-subtype="h2"] {
    font-size: 18px !important;
}
.protyle-wysiwyg [data-type="NodeHeading"][data-subtype="h2"]:not(.bq *):not(.callout *) {
    padding-top: var(--test-h2-padding-top) !important;
}
.protyle-wysiwyg div[data-type="NodeHeading"][data-subtype="h2"]:not(.bq *):not(.callout *)::before {
    height: 2.5px;
    background: linear-gradient(to right, transparent, var(--test-heading-color-2)) !important;
    top: var(--test-h2-padding-top) !important;
}

.protyle-wysiwyg [data-type="NodeHeading"][data-subtype="h3"] {
    color: var(--test-heading-color-3) !important;
}
.protyle-wysiwyg :is(.bq, .callout) div[data-type="NodeHeading"][data-subtype="h3"] {
    font-size: 16px !important;
}
.protyle-wysiwyg [data-type="NodeHeading"][data-subtype="h3"]:not(.bq *):not(.callout *) {
    padding-top: var(--test-h3-padding-top) !important;
}
.protyle-wysiwyg div[data-type="NodeHeading"][data-subtype="h3"]:not(.bq *):not(.callout *)::before {
    height: 2px;
    background: linear-gradient(to right, transparent, var(--test-heading-color-3)) !important;
    top: var(--test-h3-padding-top) !important;
}

.protyle-wysiwyg [data-type="NodeHeading"][data-subtype="h4"] {
    color: var(--test-heading-color-4) !important;
}
.protyle-wysiwyg :is(.bq, .callout) div[data-type="NodeHeading"][data-subtype="h4"] {
    font-size: 14px !important;
}
.protyle-wysiwyg [data-type="NodeHeading"][data-subtype="h4"]:not(.bq *):not(.callout *) {
    padding-top: var(--test-h4-padding-top) !important;
}
.protyle-wysiwyg div[data-type="NodeHeading"][data-subtype="h4"]:not(.bq *):not(.callout *)::before {
    height: 1.5px;
    background: linear-gradient(to right, transparent, var(--test-heading-color-4)) !important;
    top: var(--test-h4-padding-top) !important;
}

.protyle-wysiwyg [data-type="NodeHeading"][data-subtype="h5"] {
    color: var(--test-heading-color-5) !important;
}
.protyle-wysiwyg :is(.bq, .callout) div[data-type="NodeHeading"][data-subtype="h5"] {
    font-size: 14px !important;
}
.protyle-wysiwyg [data-type="NodeHeading"][data-subtype="h5"]:not(.bq *):not(.callout *) {
    padding-top: var(--test-h5-padding-top) !important;
}
.protyle-wysiwyg div[data-type="NodeHeading"][data-subtype="h5"]:not(.bq *):not(.callout *)::before {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--test-heading-color-5)) !important;
    top: var(--test-h5-padding-top) !important;
}

.protyle-wysiwyg [data-type="NodeHeading"][data-subtype="h6"] {
    color: var(--test-heading-color-6) !important;
}
.protyle-wysiwyg :is(.bq, .callout) div[data-type="NodeHeading"][data-subtype="h6"] {
    font-size: 14px !important;
}
.protyle-wysiwyg [data-type="NodeHeading"][data-subtype="h6"]:not(.bq *):not(.callout *) {
    padding-top: var(--test-h6-padding-top) !important;
}
.protyle-wysiwyg div[data-type="NodeHeading"][data-subtype="h6"]:not(.bq *):not(.callout *)::before {
    height: 0.8px;
    background: linear-gradient(to right, transparent, var(--test-heading-color-6)) !important;
    top: var(--test-h6-padding-top) !important;
}



/** 标题层级显示 */
div[data-subtype^="h1"]:not([type])>div:first-child:after{
    content:"  ❶";
    font-size: 11pt;
    opacity: 0.4;
}
div[data-subtype^="h2"]>div:first-child:after{
    content:"  ❷";
    font-size: 11pt;
    opacity: 0.4;
}
div[data-subtype^="h3"]>div:first-child:after{
    content:"  ❸";
    font-size: 11pt;
    opacity: 0.4;
}
div[data-subtype^="h4"]>div:first-child:after{
    content:"  ❹";
    font-size: 11pt;
    opacity: 0.4;
}
div[data-subtype^="h5"]>div:first-child:after{
    content:"  ❺";
    font-size: 11pt;
    opacity: 0.4;
}
div[data-subtype^="h6"]>div:first-child:after{
    content:"  ❻";
    font-size: 11pt;
    opacity: 0.4;
}

/** 标题 显示章节序号 */
/* 统一在编辑区作用域内计数，避免被 DOM 拆分导致断号 */
.protyle-wysiwyg {
    counter-reset: h1-count 0 h2-count 0 h3-count 0 h4-count 0 h5-count 0 h6-count 0;
}

/* 只对“非 bq 内”的标题：遇到更高层级时重置低层级 */
.protyle-wysiwyg div[data-type="NodeHeading"][data-subtype="h1"]:not([type]):not(.bq *):not(.callout *) { counter-reset: h2-count 0 h3-count 0 h4-count 0 h5-count 0 h6-count 0; }
.protyle-wysiwyg div[data-type="NodeHeading"][data-subtype="h2"]:not(.bq *):not(.callout *)             { counter-reset: h3-count 0 h4-count 0 h5-count 0 h6-count 0; }
.protyle-wysiwyg div[data-type="NodeHeading"][data-subtype="h3"]:not(.bq *):not(.callout *)             { counter-reset: h4-count 0 h5-count 0 h6-count 0; }
.protyle-wysiwyg div[data-type="NodeHeading"][data-subtype="h4"]:not(.bq *):not(.callout *)             { counter-reset: h5-count 0 h6-count 0; }
.protyle-wysiwyg div[data-type="NodeHeading"][data-subtype="h5"]:not(.bq *):not(.callout *)             { counter-reset: h6-count 0; }

/* 显示编号：同样只对“非 bq 内”的标题生效 */
.protyle-wysiwyg div[data-type="NodeHeading"][data-subtype="h1"]:not([type]):not(.bq *):not(.callout *) > div:first-child::before{
    counter-increment: h1-count;
    content: counter(h1-count, decimal) ".  ";
    font-size: 80%;
    opacity: 0.6;
}
.protyle-wysiwyg div[data-type="NodeHeading"][data-subtype="h2"]:not(.bq *):not(.callout *) > div:first-child::before{
    counter-increment: h2-count;
    content: counter(h1-count, decimal) "." counter(h2-count, decimal) ".  ";
    font-size: 80%;
    opacity: 0.6;
}
.protyle-wysiwyg div[data-type="NodeHeading"][data-subtype="h3"]:not(.bq *):not(.callout *) > div:first-child::before{
    counter-increment: h3-count;
    content: counter(h1-count, decimal) "." counter(h2-count, decimal) "." counter(h3-count, decimal) ".  ";
    font-size: 80%;
    opacity: 0.6;
}
.protyle-wysiwyg div[data-type="NodeHeading"][data-subtype="h4"]:not(.bq *):not(.callout *) > div:first-child::before{
    counter-increment: h4-count;
    content: counter(h1-count, decimal) "." counter(h2-count, decimal) "." counter(h3-count, decimal) "." counter(h4-count, decimal) ".  ";
    font-size: 80%;
    opacity: 0.6;
}
.protyle-wysiwyg div[data-type="NodeHeading"][data-subtype="h5"]:not(.bq *):not(.callout *) > div:first-child::before{
    counter-increment: h5-count;
    content: counter(h1-count, decimal) "." counter(h2-count, decimal) "." counter(h3-count, decimal) "." counter(h4-count, decimal) "." counter(h5-count, decimal) ".  ";
    font-size: 80%;
    opacity: 0.6;
}
.protyle-wysiwyg div[data-type="NodeHeading"][data-subtype="h6"]:not(.bq *):not(.callout *) > div:first-child::before{
    counter-increment: h6-count;
    content: counter(h1-count, decimal) "." counter(h2-count, decimal) "." counter(h3-count, decimal) "." counter(h4-count, decimal) "." counter(h5-count, decimal) "." counter(h6-count, decimal) ".  ";
    font-size: 80%;
    opacity: 0.6;
}

/** 有序列表 */
/* 隐藏原始编号 */
.li[data-subtype="o"] .li[data-subtype="o"] .protyle-action--order {
    color: transparent !important;
}
.li[data-subtype="o"] .protyle-action--order {
    font-weight: bold !important;
    color: var(--test-list-color-1) !important;
}
.list[data-subtype="o"] { /* 初始化计数器 */
    counter-reset: o1 0 o2 0 o3 0 o4 0 o5 0 o6 0;
}
/* 第一层嵌套：阿拉伯数字 (1. 2. 3.) */
.li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o1;
    content: counter(o1, decimal) ".";
    position: absolute;
    padding: 3px 2px;
    width: 24px;
    display: flex;
    justify-content: center;
    margin: -20px 0 0 -8px !important;
    font-weight: bold;
}
/* 第二层嵌套：中文括号 + 阿拉伯数字 (（1） （2） （3）) */
.li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o2;
    content: "‹" counter(o2, decimal) "›";
    position: absolute;
    color: var(--test-list-color-2) !important;
}
/* 第三层嵌套：大写拉丁字母 (A. B. C.) */
.li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o3;
    content: counter(o3, lower-alpha) ".";
    position: absolute;
    color: var(--test-list-color-3) !important;
}
/* 第四层嵌套：小写罗马数字 (i. ii. iii.) */
.li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o4;
    content: counter(o4, lower-roman) ".";
    position: absolute;
    color: var(--test-list-color-4) !important;
}
.li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o5;
    content: counter(o5, decimal) ")";
    position: absolute;
    color: var(--test-list-color-5) !important;
}
.li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] .li[data-subtype="o"] > .protyle-action::after {
    counter-increment: o6;
    content: "‹" counter(o6, lower-roman) "›";
    position: absolute;
    color: var(--test-list-color-6) !important;
}

/** 无序列表 */
[data-subtype="u"] > .li[data-subtype="u"] > .protyle-action svg {
    color: transparent;
}

/* 设置无序列表标记的颜色 */
[data-subtype="u"] > .li[data-subtype="u"] > .protyle-action::before {
    font-size: 1.6em;
    font-weight: bold;
    font-family: Arial;
    content: "•";
    position: absolute;
    color: var(--test-list-color-1) !important;
}
[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "▪";
    color: var(--test-list-color-2) !important;
}
[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "•";
    color: var(--test-list-color-3) !important;
}
[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "▪";
    color: var(--test-list-color-4) !important;
}
[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "•";
    color: var(--test-list-color-5) !important;
}
[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "▪";
    color: var(--test-list-color-6) !important;
}
[data-subtype="u"] > [data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] .li[data-subtype="u"] > .protyle-action::before {
    content: "•";
    color: var(--test-list-color-1) !important;
}
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    28443 引用 • 119762 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    285 引用 • 1984 回帖
1 感谢
1 收藏
2 回帖
126 83 2 41

相关帖子

2 回帖
[css] 思源笔记个人 CSS 样式分享 （第三版）

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
BH2WFR
回帖
9
 帖子
8
 积分
690

近期热议

推荐标签 标签

  • Access
    1 引用 • 3 回帖 • 13 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 517 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎，支持 Go 和 JavaScript。

    29 引用 • 202 回帖 • 54 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件，打造你得心应手的工具集合。

    9 引用 • 75 回帖 • 1 关注
  • OpenStack

    OpenStack 是一个云操作系统，通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成，同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 9 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    117 引用 • 99 回帖 • 191 关注
  • 单点登录

    单点登录（Single Sign On）是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 9 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎，可以结合 MySQL、PostgreSQL 做全文搜索，它可以提供比数据库本身更专业的搜索功能，使得应用程序更容易实现专业化的全文检索。

    1 引用 • 259 关注
  • Excel
    32 引用 • 29 回帖 • 1 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    316 引用 • 547 回帖 • 4 关注
  • Electron

    Electron 基于 Chromium 和 Node.js，让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目，兼容 Mac、Windows 和 Linux，它构建的应用可在这三个操作系统上面运行。

    16 引用 • 143 回帖 • 6 关注
  • 域名

    域名（Domain Name），简称域名、网域，是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

    43 引用 • 208 回帖
  • 禅道

    禅道是一款国产的开源项目管理软件，她的核心管理思想基于敏捷方法 scrum，内置了产品管理和项目管理，同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能，在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来，完整地覆盖了项目管理的核心流程。

    11 引用 • 15 回帖 • 1 关注
  • 知乎

    知乎是网络问答社区，连接各行各业的用户。用户分享着彼此的知识、经验和见解，为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • Vue.js

    Vue.js（读音 /vju ː/，类似于 view）是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    269 引用 • 666 回帖 • 1 关注
  • Solo

    Solo 是一款小而美的开源博客系统，专为程序员设计。Solo 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    1449 引用 • 10092 回帖 • 489 关注
  • 宕机

    宕机，多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态，也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态，也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 75 关注
  • LeetCode

    LeetCode（力扣）是一个全球极客挚爱的高质量技术成长平台，想要学习和提升专业能力从这里开始，充足技术干货等你来啃，轻松拿下 Dream Offer！

    209 引用 • 72 回帖 • 1 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码，也可以编译成 JavaScript，方便在没有 JVM 的设备上运行。在 Google I/O 2017 中，Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 87 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端，也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • 千千插件

    千千块（自定义块 css 和 js）
    可以用 ai 提示词来无限创作思源笔记

    32 引用 • 69 回帖 • 1 关注
  • 京东

    京东是中国最大的自营式电商企业，2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月，京东在美国纳斯达克证券交易所正式挂牌上市（股票代码：JD），是中国第一个成功赴美上市的大型综合型电商平台，与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 261 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 80 回帖 • 1 关注
  • 星云链

    星云链是一个开源公链，业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎，一个公链的所有功能，它基本都有，比如你可以用它来开发部署你的去中心化的 APP，你可以在上面编写智能合约，发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • OpenShift

    红帽提供的 PaaS 云，支持多种编程语言，为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 687 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库，专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 99 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ，专注在碎片化时代，促进你的记录，帮你积累更多知识资产。

    6 引用 • 144 回帖

最新标签