分享默认主题下自用的一些代码片段

标题级别显示

div[data-subtype^="h1"]:not([type])>div:first-child:after{
    content:"  1";
    font-size:0.7em;
    opacity: 0.4;
}
div[data-subtype^="h2"]>div:first-child:after{
    content:"  2";
    font-size:0.7em;
    opacity: 0.4;
}
div[data-subtype^="h3"]>div:first-child:after{
    content:"  3";
    font-size:0.8em;
    font-size:0.7em;
    opacity:css 0.4;
}
div[data-subtype^="h4"]>div:first-child:after{
    content:"  4";
    font-size:0.8em;
    font-size:0.7em;
    opacity: 0.4;
}
div[data-subtype^="h5"]>div:first-child:after{
    content:"  5";
    font-size:0.8em;
    font-size:0.7em;
    opacity: 0.4;
}
div[data-subtype^="h6"]>div:first-child:after{
    content:"  6";
    font-size:0.8em;
    font-size:0.7em;
    opacity: 0.4;
}

字体渲染增强

:not(.katex):not(.overlaydiv):not([class*="icon"]):not([class*="button"]){
 /*使字体渲染不会应用于部分特殊字符符号和图标以及按钮等网页元素*/

    font-family: "JetBrains Mono", "等距更纱黑体 SC", monospace !important;  /*字体设置,中文字体安装对应字体后可选：苹方黑体、微软雅黑、pingfang sc regular、PingFang SC Heavy、.萍方-简、思源黑体 CN*/

    text-shadow: 0 0 0.36px #7C7C7CDD ;  /*更改字体阴影及颜色,可修改数值实现不同的效果*/
    -webkit-text-stroke-width: 0.08px; /*更改字体描边粗细*/
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

 /*使字体渲染不会应用于公式和图片制卡*/
span:not([class="katex"]) :not([class="overlaydiv"]){
    text-shadow: 0.01em 0.01em 0.01em rgba(0,0,0,0) !important;  
}

 /*使字体渲染不会应用于加粗字体*/
.b3-typography strong, .b3-typography span[data-type~=strong], .protyle-wysiwyg strong, .protyle-wysiwyg span[data-type~=strong] {
    text-shadow: 0.01em 0.01em 0.01em #999999 !important;  
    -webkit-text-stroke-width: 0px !important;
}

前后对比：

虚拟引用

.protyle-wysiwyg [data-node-id] span[data-type=virtual-block-ref] {
    opacity: 0.8;
}

设置

.b3-label__text {
    font-size: 13px !important;
}

快捷键

.b3-typography kbd, 
.b3-typography span[data-type~=kbd], 
.protyle-wysiwyg kbd, 
.protyle-wysiwyg span[data-type~=kbd] {
    font-size: 75%;
    font-family: "JetBrains Mono", "等距更纱黑体 SC", monospace !important;  确保字体名称用引号包裹，并添加后备字体 
}

链接

.protyle-wysiwyg [data-node-id] span[data-type~=a] {
    color: rgb(136, 158, 170);
    font-weight: 400;
}
.protyle-wysiwyg [data-node-id] span[data-type~=a]:hover {
    color: rgb(160, 178, 187);
    text-decoration-line: underline;
}

删除线

.b3-typography s, .b3-typography span[data-type~=s], .protyle-wysiwyg s, .protyle-wysiwyg span[data-type~=s] {
    color: hsl(0deg 0% 82% / 57%);
    font-size: 0.9em;
}

字体

/*设置字体类型*/
:root {
    --b3-font-family: "JetBrains Mono", "更纱黑体 SC", sans-serif !important;
    --b3-font-family-code: "JetBrains Mono", "等距更纱黑体 SC", monospace !important;
}
body {
    font-weight: 400;
}

英文使用 JetBrains 字体，中文使用更纱黑体，看起来效果很好。

标记

.b3-typography mark, .b3-typography span[data-type~=mark], .protyle-wysiwyg mark, .protyle-wysiwyg span[data-type~=mark] {
    background-color: rgb(255 208 0 / 34%);
    color: var(--b3-protyle-inline-mark-color);
    font-weight: 600;
    padding: 0.1em 0.1em;
}

行内代码

.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: #eb5757;
	font-size: 0.9em;
}

图片

.protyle-wysiwyg img {
    opacity: 0.65;
    transition: opacity .25s linear;
}
.protyle-wysiwyg img:hover {
    opacity: 1;
    transition: opacity .25s linear;
}
.b3-typography span.img img:not(.emoji):not([style *="width"]), .protyle-wysiwyg span.img img:not(.emoji):not([style *="width"]) { 
    width: 400px; 
}

鼠标移动块高亮

.protyle-wysiwyg
  [data-type]:hover:not(.protyle-wysiwyg [data-type="NodeList"]):not(
    .protyle-wysiwyg [data-type="NodeListItem"]
  ):not(.protyle-wysiwyg [data-type="img"]) {
  background-color: hsla(0, 0%, 77%, 0.15);
  box-shadow: 0 0 8px 0 hsla(0, 0%, 77%, 0.25);
  transition: all 0.5s ease-out 0ms;
}
.protyle-wysiwyg [data-type]:not(.protyle-wysiwyg [data-type="img"]) {
  transition: all 0.35s ease-out 0ms;
}

/* 标签 */
.protyle-wysiwyg span[data-type="tag"] {
	font-size: 90%;
	border-radius: 3px;
	padding:0px 6px 2px 6px;
	border-bottom:none !important;
        display: inline-flex; /* 使用 inline-flex 使内容垂直居中 */
        font-weight: 600;
}
.protyle-wysiwyg span[data-type="tag"]::before{
	content: "#";
}
.export-img span[data-type="tag"]::before{
	content: "";
}

引用块

.protyle-wysiwyg [data-node-id] span[data-type~=block-ref]:not(.av__celltext), .protyle-wysiwyg [data-node-id] span[data-type~=file-annotation-ref] {
    color: hsl(201,17%,60%);
    font-weight: 600;
}
.protyle-wysiwyg [data-node-id] span[data-type~="block-ref"]:hover, .protyle-wysiwyg [data-node-id] span[data-type~="file-annotation-ref"]:hover {
    color: hsl(201,17%,70%);
    text-decoration-line: underline;
}
/*
.protyle-wysiwyg [data-node-id] span[data-type*="block-ref"]:not([data-type="virtual-block-ref"]):not([data-type*="sup"]):not([data-type*="sub"]):not(.av__celltext--ref)::before {
    content: "[[";
}
.protyle-wysiwyg [data-node-id] span[data-type*="block-ref"]:not([data-type="virtual-block-ref"]):not([data-type*="sup"]):not([data-type*="sub"]):not(.av__celltext--ref)::after {
    content: "]]";
}
*/

.protyle-wysiwyg [data-node-id] .def--mark {
    background-color: #ffffff2b;
}

引述（> ）块

.b3-typography blockquote, .b3-typography .bq, .protyle-wysiwyg blockquote, .protyle-wysiwyg .bq {
    border-left: .25em solid #6f6f6f;
    background-color: #99999914;
    font-size: 0.85em;
    border-radius: unset;
}

面包屑

.protyle-breadcrumb {
  background-color: var(--b3-theme-surface);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.protyle-breadcrumb:hover {
  opacity: 1;

隐藏图标

.b3-list-item__icon,
.layout-tab-bar .item__icon,
#barSync,
#plugin_siyuan-plugin-picgo_0,
#barSearch,
#barCommand,
#plugin_siyuan-plugins-index_0,
#plugin_plugin-add-shortcut-to-topbar_0 {
  display: none;
}

最终效果：

4 回帖

分享默认主题下自用的一些代码片段

欢迎来到这里！

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

注册关于

请输入回帖内容 ...

Imuvux • 3 个月前 • 3

订阅者付费者

跟进分享~

折叠列表项环绕虚线

参考此链接：

.protyle-wysiwyg [data-node-id].li[fold="1"]>.protyle-action:after{
    border: 1px dashed var(--b3-font-color1);
    transform: scale(1.35);
}

移除块滚动条

.protyle-scroll {
    display: none;
}

块引用锚文本附加 `｢｣` 符号

彩色｢｣符号并区分动静态锚文本


:root {
    --b3-protyle-inline-blockref-color: var(--b3-theme-accent);
}
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref]::before {
    content: "｢";
    display: inline-block;
    font-size: 100%;
    color:rgb(137,87,229);
}
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref]::after {
    content: "｣";
    display: inline-block;
    font-size: 100%;
    color:rgb(137,87,229);
}
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref][data-subtype="s"]::before {
    content: "｢";
    display: inline-block;
    font-size: 100%;
    color:rgb(137,87,229);
    transform: scale(1, -1);
}
.protyle-wysiwyg [data-node-id] span[data-type~=block-ref][data-subtype="s"]::after {
    content: "｣";
    display: inline-block;
    font-size: 100%;
    color:rgb(137,87,229);
    transform: scale(1, -1);
}
span[data-type~=block-ref] {
    font-weight: unset !important;
}

其他回帖
xqh042 • 3 个月前
订阅者
隐藏图标可能会导致钉住的文档变成空白，稍微改了一下
```
.b3-list-item__icon,
li:not(.item--pin)>.item__icon {
	display: none !important;
}
```
ifdong • 3 个月前
大佬 nb

请问大佬，如何实现全局公式左对齐? 为啥下面的 css 代码无法在思源中实现? 拜谢 😭
```
.mathjax-block,
.MathJax_Display {
    text-align: left !important;
}
```
y1x233 • 2 个月前
付费者

大佬，一级标题后面不显示数字 1，是什么情况

标题级别显示

字体渲染增强

虚拟引用

设置

快捷键

链接

删除线

字体

标记

行内代码

图片

鼠标移动块高亮

标签

引用块

引述（> ）块

面包屑

隐藏图标

相关帖子

页面删除

思源笔记丨动态图标使用笔记

数据库视图多选粘贴优化建议

思源笔记 v3.1.11 发布，改进细节

嵌套表格、单元格外观可单独设置，这些表格特性，绝对不可能在思源里实现吗？

思源能不能把浏览器的浏览网页的功能补全，在写文档过程中，频繁切浏览器和思源的窗口，效率好低

[css] 大纲缩进线

欢迎来到这里！

折叠列表项环绕虚线

移除块滚动条

块引用锚文本附加 `｢｣` 符号

分享默认主题下自用的一些代码片段

标题级别显示

字体渲染增强

虚拟引用

设置

快捷键

链接

删除线

字体

标记

行内代码

图片

鼠标移动块高亮

标签

引用块

引述（> ）块

面包屑

隐藏图标

相关帖子

页面删除

思源笔记丨动态图标使用笔记

数据库视图多选粘贴优化建议

思源笔记 v3.1.11 发布，改进细节

嵌套表格、单元格外观可单独设置，这些表格特性，绝对不可能在思源里实现吗？

思源能不能把浏览器的浏览网页的功能补全，在写文档过程中，频繁切浏览器和思源的窗口，效率好低

[css] 大纲缩进线

欢迎来到这里！

折叠列表项环绕虚线

移除块滚动条

块引用锚文本附加 ｢｣ 符号

块引用锚文本附加 `｢｣` 符号