思源 v2.4.7 代码片段扫盲

前提：你的思源版本必须是 2.4.7 或以上！

嗯，怎么说呢，这其实是一个挺强大但也挺简单的功能，不过文档还没有更新，所以一些人还不知道怎么用，故特意发个贴扫盲一下。

简而言之，代码片段，就是把一段 CSS 片段或 JS 片段插到思源的页面中，这会改变思源的显示效果，或者影响思源的功能。

对于 css 片段要怎么写，js 片段怎么写，这就超过这个简单扫盲的能力范围了，这个帖子只想简单的说一下代码片段怎么用。

操作步骤见下：

文中演示所用到的代码片段见下：

/*大纲距离 大档*/
.protyle-wysiwyg [data-node-id].li>div:nth-child(2) {
    margin-top: -0.3em !important;
}
.protyle-wysiwyg [data-node-id].li>[data-node-id] {
    margin-left: 1.7em !important;
    padding-left: 0.3em;
}
.protyle-wysiwyg [data-node-id].li>.list {
    padding-left: 0em;
}

/*大纲距离 中档*/
.protyle-wysiwyg [data-node-id].li>div:nth-child(2) {
    margin-top: -0.3em !important;
}
.protyle-wysiwyg [data-node-id].li>[data-node-id] {
    margin-left: 1.4em !important;
    padding-left: 0.6em;
}
.protyle-wysiwyg [data-node-id].li>.list {
    padding-left: 0em;
}

/*大纲距离 小档*/
.protyle-wysiwyg [data-node-id].li>div:nth-child(2) {
    margin-top: -0.3em !important;
}
.protyle-wysiwyg [data-node-id].li>[data-node-id] {
    margin-left: 1.1em !important;
    padding-left: 0.9em;
}
.protyle-wysiwyg [data-node-id].li>.list {
    padding-left: 0em;
}

/*大纲距离 迷你档*/
.protyle-wysiwyg [data-node-id].li>div:nth-child(2) {
    margin-top: -0.3em !important;
}
.protyle-wysiwyg [data-node-id].li>[data-node-id] {
    margin-left: 0.9em !important;
    padding-left: 1.1em;
}
.protyle-wysiwyg [data-node-id].li>.list {
    padding-left: 0em;
}

/*标题字重 normal*/
.b3-typography .h1, .b3-typography h1, .b3-typography .h2, .b3-typography h2, .b3-typography .h3, .b3-typography h3, .b3-typography .h4, .b3-typography h4, .b3-typography .h5, .b3-typography h5, .b3-typography .h6, .b3-typography h6, .protyle-wysiwyg .h1, .protyle-wysiwyg h1, .protyle-wysiwyg .h2, .protyle-wysiwyg h2, .protyle-wysiwyg .h3, .protyle-wysiwyg h3, .protyle-wysiwyg .h4, .protyle-wysiwyg h4, .protyle-wysiwyg .h5, .protyle-wysiwyg h5, .protyle-wysiwyg .h6, .protyle-wysiwyg h6
{
font-weight: normal;
}

/*标题字重 lighter*/
.b3-typography .h1, .b3-typography h1, .b3-typography .h2, .b3-typography h2, .b3-typography .h3, .b3-typography h3, .b3-typography .h4, .b3-typography h4, .b3-typography .h5, .b3-typography h5, .b3-typography .h6, .b3-typography h6, .protyle-wysiwyg .h1, .protyle-wysiwyg h1, .protyle-wysiwyg .h2, .protyle-wysiwyg h2, .protyle-wysiwyg .h3, .protyle-wysiwyg h3, .protyle-wysiwyg .h4, .protyle-wysiwyg h4, .protyle-wysiwyg .h5, .protyle-wysiwyg h5, .protyle-wysiwyg .h6, .protyle-wysiwyg h6
{
font-weight: lighter;
}